@govtechsg/sgds-web-component 3.17.1-rc.0 → 3.18.0

package/react/components/Stepper/sgds-stepper.js

@@ -1,7 +1,7 @@
 'use client';
 import { __decorate } from 'tslib';
 import { html } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import SgdsElement from '../../base/sgds-element.js';
 import { defaultValue } from '../../utils/defaultvalue.js';
@@ -18,14 +18,13 @@ import { SgdsIcon } from '../Icon/sgds-icon.js';
  * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.
  * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.
  * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.
- * @slot default - slot for sgds-step children
  *
  */
 class SgdsStepper extends SgdsElement {
     constructor() {
         super(...arguments);
-        /** The metadata of stepper, type `IStepMetaData`. Deprecated: use sgds-step child components instead.
-         * @deprecated Use sgds-step child components instead of the steps property
+        /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string`, `component:unknown`, `iconName:string`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.
+         * It is required to populate this array to properly render the stepper. By default, stepper markers will render numbers. For icon stepper markers, pass the name of sgds icon via `iconName` key. `iconName` is optional.
          */
         this.steps = [];
         /** The current state of active step. Defaults to 0 */
@@ -34,56 +33,17 @@ class SgdsStepper extends SgdsElement {
         this.orientation = "horizontal";
         /** When true, the stepper's steps will be clickable */
         this.clickable = false;
-        /** When true, the stepper's steps can only be clicked in a linear manner */
-        this.linear = false;
         /** @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
         this.defaultActiveStep = 0;
-        this._totalSteps = 0;
-        /** @internal Bound i-sgds-click handler for proper event listener removal */
-        this._boundHandleItemClick = this._handleStepClick.bind(this);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._totalSteps = this.steps.length;
-        this.addEventListener("i-sgds-click", this._boundHandleItemClick);
-    }
-    /** @internal */
-    _handleSlotChange() {
-        this._items = this._slotNodes;
-        this._totalSteps = this._items.length;
-        this._updateStepItems();
-    }
-    /** @internal Updates step item properties based on active step and clickable state */
-    _updateStepItems() {
-        if (this._items && this._items.length > 0) {
-            this._items.forEach((item, index) => {
-                item.stepIndex = index;
-                item.active = this.activeStep === index;
-                item._isCompleted = item.completed || this.activeStep > index;
-                item.isClickable = this.linear
-                    ? !item.disabled && this.clickable && (this.activeStep - 1 == index || this.activeStep + 1 == index)
-                    : !item.disabled && this.clickable;
-                item.orientation = this.orientation;
-                if (this._items.length > 1) {
-                    item.isFirstOfType = index === 0;
-                    item.classList.toggle("last", index === this._items.length - 1);
-                }
-            });
-        }
     }
     /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/
     getComponent(step = this.activeStep) {
-        var _a, _b;
-        const items = this._slotNodes.length > 1 ? this._items : this.steps;
-        if (items && items.length > 0) {
-            return (_a = items[step]) === null || _a === void 0 ? void 0 : _a.component;
-        }
-        return (_b = this.steps[step]) === null || _b === void 0 ? void 0 : _b.component;
+        return this.steps[step].component;
     }
     /** Moves the active step forward one step */
     nextStep() {
         this.emit("sgds-next-step");
-        if (this.activeStep < this._totalSteps - 1) {
+        if (this.activeStep < this.steps.length - 1) {
             this.activeStep++;
         }
     }
@@ -97,8 +57,8 @@ class SgdsStepper extends SgdsElement {
     /** Changes the active step to the last step */
     lastStep() {
         this.emit("sgds-last-step");
-        if (this.activeStep !== this._totalSteps - 1) {
-            this.activeStep = this._totalSteps - 1;
+        if (this.activeStep !== this.steps.length - 1) {
+            this.activeStep = this.steps.length - 1;
         }
     }
     /** Changes active step to the first step */
@@ -115,35 +75,21 @@ class SgdsStepper extends SgdsElement {
     }
     /**@internal */
     _onStepperItemClick(index) {
-        this.activeStep = index;
+        //emit an event before moving to next step
+        if (this.activeStep > index) {
+            this.activeStep = index;
+        }
     }
     /**@internal */
     _handleActiveStepChange() {
-        this._updateStepItems();
         this.emit("sgds-arrived");
     }
     /**@internal */
-    _handleClickableChange() {
-        this._updateStepItems();
-    }
-    /**@internal */
-    _handleOrientationChange() {
-        this._updateStepItems();
-    }
-    /**@internal */
     _handleKeyDown(event, index) {
         if (event.key === "Enter") {
             this._onStepperItemClick(index);
         }
     }
-    /**@internal */
-    _handleStepClick(e) {
-        var _a;
-        const event = e;
-        e.stopPropagation();
-        const stepIndex = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.stepIndex;
-        this._onStepperItemClick(stepIndex);
-    }
     render() {
         return html `
       <div
@@ -152,8 +98,6 @@ class SgdsStepper extends SgdsElement {
             clickable: this.clickable
         })}"
       >
-        <slot @slotchange=${this._handleSlotChange}></slot>
-
         ${this.steps.map(({ stepHeader: step, iconName }, index) => {
             return html `
             <div class="stepper-item-container">
@@ -196,24 +140,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsStepper.prototype, "clickable", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SgdsStepper.prototype, "linear", void 0);
 __decorate([
     defaultValue("activeStep")
 ], SgdsStepper.prototype, "defaultActiveStep", void 0);
-__decorate([
-    queryAssignedElements()
-], SgdsStepper.prototype, "_slotNodes", void 0);
 __decorate([
     watch("activeStep", { waitUntilFirstUpdate: true })
 ], SgdsStepper.prototype, "_handleActiveStepChange", null);
-__decorate([
-    watch("clickable", { waitUntilFirstUpdate: true })
-], SgdsStepper.prototype, "_handleClickableChange", null);
-__decorate([
-    watch("orientation", { waitUntilFirstUpdate: true })
-], SgdsStepper.prototype, "_handleOrientationChange", null);
 
 export { SgdsStepper, SgdsStepper as default };
 //# sourceMappingURL=sgds-stepper.js.map

package/react/components/Stepper/sgds-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-stepper.js","sources":["../../../../src/components/Stepper/sgds-stepper.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 { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { IStepMetaData } from \"./types\";\nimport type SgdsStep from \"./sgds-step\";\nexport type { IStepMetaData };\n\n/**\n * @summary Steppers are used to inform users which step they are at in a form or a process\n *\n * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n * @slot default - slot for sgds-step children\n *\n */\nexport class SgdsStepper extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepperStyle];\n  /** @internal */\n  static dependencies = { \"sgds-icon\": SgdsIcon };\n  /** The metadata of stepper, type `IStepMetaData`. Deprecated: use sgds-step child components instead.\n   * @deprecated Use sgds-step child components instead of the steps property\n   */\n  @property({ type: Array })\n  steps: IStepMetaData[] = [];\n\n  /** The current state of active step. Defaults to 0 */\n  @property({ type: Number, reflect: true })\n  activeStep = 0;\n\n  /** The orientation of stepper. By default, the stepper is of horizontal orientation */\n  @property({ type: String, reflect: true }) orientation: StepperOrientation = \"horizontal\";\n\n  /** When true, the stepper's steps will be clickable */\n  @property({ type: Boolean, reflect: true }) clickable = false;\n\n  /** When true, the stepper's steps can only be clicked in a linear manner */\n  @property({ type: Boolean, reflect: true }) linear = false;\n\n  /** @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"activeStep\")\n  defaultActiveStep = 0;\n\n  /** @internal */\n  @queryAssignedElements() private _slotNodes!: SgdsStep[];\n\n  /** @internal */\n  private _items!: SgdsStep[];\n  private _totalSteps = 0;\n\n  /** @internal Bound i-sgds-click handler for proper event listener removal */\n  private _boundHandleItemClick = this._handleStepClick.bind(this);\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this._totalSteps = this.steps.length;\n    this.addEventListener(\"i-sgds-click\", this._boundHandleItemClick);\n  }\n\n  /** @internal */\n  private _handleSlotChange() {\n    this._items = this._slotNodes;\n    this._totalSteps = this._items.length;\n\n    this._updateStepItems();\n  }\n\n  /** @internal Updates step item properties based on active step and clickable state */\n  private _updateStepItems() {\n    if (this._items && this._items.length > 0) {\n      this._items.forEach((item, index) => {\n        item.stepIndex = index;\n        item.active = this.activeStep === index;\n        item._isCompleted = item.completed || this.activeStep > index;\n        item.isClickable = this.linear\n          ? !item.disabled && this.clickable && (this.activeStep - 1 == index || this.activeStep + 1 == index)\n          : !item.disabled && this.clickable;\n        item.orientation = this.orientation;\n\n        if (this._items.length > 1) {\n          item.isFirstOfType = index === 0;\n          item.classList.toggle(\"last\", index === this._items.length - 1);\n        }\n      });\n    }\n  }\n\n  /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/\n  public getComponent(step: number = this.activeStep) {\n    const items = this._slotNodes.length > 1 ? this._items : this.steps;\n    if (items && items.length > 0) {\n      return items[step]?.component;\n    }\n    return this.steps[step]?.component;\n  }\n\n  /** Moves the active step forward one step */\n  public nextStep() {\n    this.emit(\"sgds-next-step\");\n    if (this.activeStep < this._totalSteps - 1) {\n      this.activeStep++;\n    }\n  }\n\n  /** Moves the active step back one step */\n  public previousStep() {\n    this.emit(\"sgds-previous-step\");\n\n    if (this.activeStep > 0) {\n      this.activeStep--;\n    }\n  }\n\n  /** Changes the active step to the last step */\n  public lastStep() {\n    this.emit(\"sgds-last-step\");\n    if (this.activeStep !== this._totalSteps - 1) {\n      this.activeStep = this._totalSteps - 1;\n    }\n  }\n\n  /** Changes active step to the first step */\n  public firstStep() {\n    this.emit(\"sgds-first-step\");\n    if (this.activeStep > 0) {\n      this.activeStep = 0;\n    }\n  }\n\n  /** Resets the Stepper to its initial active step state */\n  public reset() {\n    this.emit(\"sgds-reset\");\n    this.activeStep = this.defaultActiveStep;\n  }\n\n  /**@internal */\n  _onStepperItemClick(index: number) {\n    this.activeStep = index;\n  }\n\n  /**@internal */\n  @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n  _handleActiveStepChange() {\n    this._updateStepItems();\n    this.emit(\"sgds-arrived\");\n  }\n\n  /**@internal */\n  @watch(\"clickable\", { waitUntilFirstUpdate: true })\n  _handleClickableChange() {\n    this._updateStepItems();\n  }\n\n  /**@internal */\n  @watch(\"orientation\", { waitUntilFirstUpdate: true })\n  _handleOrientationChange() {\n    this._updateStepItems();\n  }\n\n  /**@internal */\n  _handleKeyDown(event: KeyboardEvent, index: number) {\n    if (event.key === \"Enter\") {\n      this._onStepperItemClick(index);\n    }\n  }\n\n  /**@internal */\n  _handleStepClick(e: Event) {\n    const event = e as CustomEvent;\n    e.stopPropagation();\n\n    const stepIndex = event.detail?.stepIndex;\n    this._onStepperItemClick(stepIndex);\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"stepper ${classMap({\n          [`${this.orientation}`]: this.orientation,\n          clickable: this.clickable\n        })}\"\n      >\n        <slot @slotchange=${this._handleSlotChange}></slot>\n\n        ${this.steps.map(({ stepHeader: step, iconName }, index) => {\n          return html`\n            <div class=\"stepper-item-container\">\n              <div\n                class=\"stepper-item ${classMap({\n                  \"is-active\": this.activeStep === index,\n                  \"is-completed\": this.activeStep > index,\n                  \"is-clickable\": this.clickable && this.activeStep > index\n                })}\"\n                tabindex=${this.clickable && this.activeStep > index ? \"0\" : \"-1\"}\n                aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n                aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n                @click=\"${this.clickable ? () => this._onStepperItemClick(index) : null}\"\n                @keydown=${this.clickable ? (e: KeyboardEvent) => this._handleKeyDown(e, index) : null}\n              >\n                <div class=\"stepper-marker\">\n                  ${iconName ? html`<sgds-icon name=${iconName} size=\"md\"></sgds-icon>` : index + 1}\n                </div>\n                <div class=\"stepper-detail\">${step}</div>\n              </div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport default SgdsStepper;\n"],"names":["stepperStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-stepper.js","sources":["../../../../src/components/Stepper/sgds-stepper.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 { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { IStepMetaData } from \"./types\";\nexport type { IStepMetaData };\n/**\n * @summary Steppers are used to inform users which step they are at in a form or a process\n *\n * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepperStyle];\n  /** @internal */\n  static dependencies = { \"sgds-icon\": SgdsIcon };\n  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string`, `component:unknown`, `iconName:string`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\n   * It is required to populate this array to properly render the stepper. By default, stepper markers will render numbers. For icon stepper markers, pass the name of sgds icon via `iconName` key. `iconName` is optional.\n   */\n  @property({ type: Array })\n  steps: IStepMetaData[] = [];\n\n  /** The current state of active step. Defaults to 0 */\n  @property({ type: Number, reflect: true })\n  activeStep = 0;\n\n  /** The orientation of stepper. By default, the stepper is of horizontal orientation */\n  @property({ type: String, reflect: true }) orientation: StepperOrientation = \"horizontal\";\n\n  /** When true, the stepper's steps will be clickable */\n  @property({ type: Boolean, reflect: true }) clickable = false;\n\n  /** @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"activeStep\")\n  defaultActiveStep = 0;\n\n  /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/\n  public getComponent(step: number = this.activeStep) {\n    return this.steps[step].component;\n  }\n  /** Moves the active step forward one step */\n  public nextStep() {\n    this.emit(\"sgds-next-step\");\n    if (this.activeStep < this.steps.length - 1) {\n      this.activeStep++;\n    }\n  }\n\n  /** Moves the active step back one step */\n  public previousStep() {\n    this.emit(\"sgds-previous-step\");\n\n    if (this.activeStep > 0) {\n      this.activeStep--;\n    }\n  }\n\n  /** Changes the active step to the last step */\n  public lastStep() {\n    this.emit(\"sgds-last-step\");\n    if (this.activeStep !== this.steps.length - 1) {\n      this.activeStep = this.steps.length - 1;\n    }\n  }\n\n  /** Changes active step to the first step */\n  public firstStep() {\n    this.emit(\"sgds-first-step\");\n    if (this.activeStep > 0) {\n      this.activeStep = 0;\n    }\n  }\n\n  /** Resets the Stepper to its initial active step state */\n  public reset() {\n    this.emit(\"sgds-reset\");\n    this.activeStep = this.defaultActiveStep;\n  }\n\n  /**@internal */\n  _onStepperItemClick(index: number) {\n    //emit an event before moving to next step\n    if (this.activeStep > index) {\n      this.activeStep = index;\n    }\n  }\n\n  /**@internal */\n  @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n  _handleActiveStepChange() {\n    this.emit(\"sgds-arrived\");\n  }\n\n  /**@internal */\n  _handleKeyDown(event: KeyboardEvent, index: number) {\n    if (event.key === \"Enter\") {\n      this._onStepperItemClick(index);\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"stepper ${classMap({\n          [`${this.orientation}`]: this.orientation,\n          clickable: this.clickable\n        })}\"\n      >\n        ${this.steps.map(({ stepHeader: step, iconName }, index) => {\n          return html`\n            <div class=\"stepper-item-container\">\n              <div\n                class=\"stepper-item ${classMap({\n                  \"is-active\": this.activeStep === index,\n                  \"is-completed\": this.activeStep > index,\n                  \"is-clickable\": this.clickable && this.activeStep > index\n                })}\"\n                tabindex=${this.clickable && this.activeStep > index ? \"0\" : \"-1\"}\n                aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n                aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n                @click=\"${this.clickable ? () => this._onStepperItemClick(index) : null}\"\n                @keydown=${this.clickable ? (e: KeyboardEvent) => this._handleKeyDown(e, index) : null}\n              >\n                <div class=\"stepper-marker\">\n                  ${iconName ? html`<sgds-icon name=${iconName} size=\"md\"></sgds-icon>` : index + 1}\n                </div>\n                <div class=\"stepper-detail\">${step}</div>\n              </div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport default SgdsStepper;\n"],"names":["stepperStyle"],"mappings":"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"}

package/react/components/Stepper/stepper.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item{margin-bottom:var(--sgds-padding-xl)}.stepper .stepper-item.is-clickable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.stepper.horizontal .stepper-item-container:not(:first-of-type) .stepper-item:before{background:var(--sgds-border-color-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-border-color-default)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper .stepper-item.is-clickable:focus .stepper-marker,.stepper .stepper-item.is-clickable:focus-visible .stepper-marker,.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-clickable:focus .stepper-detail,.stepper .stepper-item.is-clickable:focus-visible .stepper-detail,.stepper .stepper-item.is-clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color-default)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}`;
+var css_248z = lit.css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item{margin-bottom:var(--sgds-padding-xl)}.stepper .stepper-item.is-clickable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.stepper.horizontal .stepper-item-container:not(:first-child) .stepper-item:before{background:var(--sgds-border-color-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-border-color-default)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper .stepper-item.is-clickable:focus .stepper-marker,.stepper .stepper-item.is-clickable:focus-visible .stepper-marker,.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-clickable:focus .stepper-detail,.stepper .stepper-item.is-clickable:focus-visible .stepper-detail,.stepper .stepper-item.is-clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color-default)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=stepper.cjs.js.map

package/react/components/Stepper/stepper.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item{margin-bottom:var(--sgds-padding-xl)}.stepper .stepper-item.is-clickable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.stepper.horizontal .stepper-item-container:not(:first-of-type) .stepper-item:before{background:var(--sgds-border-color-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-border-color-default)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper .stepper-item.is-clickable:focus .stepper-marker,.stepper .stepper-item.is-clickable:focus-visible .stepper-marker,.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-clickable:focus .stepper-detail,.stepper .stepper-item.is-clickable:focus-visible .stepper-detail,.stepper .stepper-item.is-clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color-default)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}`;
+var css_248z = css`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item{margin-bottom:var(--sgds-padding-xl)}.stepper .stepper-item.is-clickable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.stepper.horizontal .stepper-item-container:not(:first-child) .stepper-item:before{background:var(--sgds-border-color-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-border-color-default)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper .stepper-item.is-clickable:focus .stepper-marker,.stepper .stepper-item.is-clickable:focus-visible .stepper-marker,.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-clickable:focus .stepper-detail,.stepper .stepper-item.is-clickable:focus-visible .stepper-detail,.stepper .stepper-item.is-clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color-default)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=stepper.js.map

package/react/components/ThumbnailCard/sgds-thumbnail-card.cjs.js

@@ -49,20 +49,17 @@ class SgdsThumbnailCard extends cardElement.CardElement {
         }
     }
     _handleFooterSlotChange(e) {
-        var _a;
         const assignedElements = e.target.assignedElements({ flatten: true });
-        const footerHref = (_a = this._getAnchorFromSlot(assignedElements)) === null || _a === void 0 ? void 0 : _a.href;
-        if (this.stretchedLink && footerHref) {
-            this.card.setAttribute("href", footerHref);
-        }
+        const anchor = this._getAnchorFromSlot(assignedElements);
+        if (this.stretchedLink)
+            this._forwardAnchorAttributes(anchor);
     }
     _handleLinkSlotChange(e) {
-        var _a;
         this.warnLinkSlotMisused(e);
         const assignedElements = e.target.assignedElements({ flatten: true });
-        const linkHref = (_a = this._getAnchorFromSlot(assignedElements)) === null || _a === void 0 ? void 0 : _a.href;
-        if (this.stretchedLink && linkHref)
-            this.card.setAttribute("href", linkHref);
+        const anchor = this._getAnchorFromSlot(assignedElements);
+        if (this.stretchedLink)
+            this._forwardAnchorAttributes(anchor);
     }
     render() {
         const tag = this.stretchedLink ? staticHtml_js.literal `a` : staticHtml_js.literal `div`;

package/react/components/ThumbnailCard/sgds-thumbnail-card.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-thumbnail-card.cjs.js","sources":["../../../../src/components/ThumbnailCard/sgds-thumbnail-card.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport thumbnailCardStyle from \"./thumbnail-card.css\";\n\n/**\n * @summary Thumbnail cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.\n * @slot thumbnail - Accepts a small image or visual element typically displayed alongside the card's title or content to provide quick visual context.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.\n * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n *  Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsThumbnailCard extends CardElement {\n  static styles = [...CardElement.styles, thumbnailCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"upper\", flatten: true })\n  _upperNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  private _getAnchorFromSlot(elements: Element[]): HTMLAnchorElement | null {\n    if (!elements || elements.length === 0) return null;\n    const element = elements[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n  private _handleThumbnailSlotChange(e: Event) {\n    const thumbnailNode = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    if (thumbnailNode.length === 0) {\n      if ((this.orientation === \"vertical\" && this._upperNode.length === 0) || this.orientation === \"horizontal\") {\n        const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n        media.style.display = \"none\";\n\n        const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n        if (this.noPadding) body.style.padding = \"0px\";\n      }\n    }\n  }\n  private _handleFooterSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    const footerHref = this._getAnchorFromSlot(assignedElements)?.href;\n\n    if (this.stretchedLink && footerHref) {\n      this.card.setAttribute(\"href\", footerHref);\n    }\n  }\n\n  private _handleLinkSlotChange(e: Event) {\n    this.warnLinkSlotMisused(e);\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    const linkHref = this._getAnchorFromSlot(assignedElements)?.href;\n    if (this.stretchedLink && linkHref) this.card.setAttribute(\"href\", linkHref);\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      > \n        ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n        <div class=\"card-media\">\n          <slot name=\"thumbnail\" @slotchange=${this._handleThumbnailSlotChange}></slot>\n\t\t\t\t\t${this.orientation === \"vertical\" ? html`<slot name=\"upper\"></slot>` : nothing}\n        </div>\n        <div class=\"card-body\">\n\t\t\t\t\t${this.orientation === \"horizontal\" ? html`<slot name=\"upper\"></slot>` : nothing}\n          <div class=\"card-header-container\">\n            <div class=\"card-header\">\n              <slot name=\"subtitle\"></slot>\n              <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n            </div>\n            <slot></slot>\n          </div>\n          <slot name=\"description\"></slot>\n          <slot name=\"lower\"></slot>\n          <slot name=\"footer\" @slotchange=${this._handleFooterSlotChange}>\n            <slot name=\"link\" @slotchange=${this._handleLinkSlotChange}></slot>\n          </slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsThumbnailCard;\n"],"names":["CardElement","literal","html","classMap","nothing","thumbnailCardStyle","__decorate","queryAssignedNodes","property"],"mappings":"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"}
+{"version":3,"file":"sgds-thumbnail-card.cjs.js","sources":["../../../../src/components/ThumbnailCard/sgds-thumbnail-card.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport thumbnailCardStyle from \"./thumbnail-card.css\";\n\n/**\n * @summary Thumbnail cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.\n * @slot thumbnail - Accepts a small image or visual element typically displayed alongside the card's title or content to provide quick visual context.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.\n * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n *  Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsThumbnailCard extends CardElement {\n  static styles = [...CardElement.styles, thumbnailCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"upper\", flatten: true })\n  _upperNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  private _getAnchorFromSlot(elements: Element[]): HTMLAnchorElement | null {\n    if (!elements || elements.length === 0) return null;\n    const element = elements[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n  private _handleThumbnailSlotChange(e: Event) {\n    const thumbnailNode = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    if (thumbnailNode.length === 0) {\n      if ((this.orientation === \"vertical\" && this._upperNode.length === 0) || this.orientation === \"horizontal\") {\n        const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n        media.style.display = \"none\";\n\n        const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n        if (this.noPadding) body.style.padding = \"0px\";\n      }\n    }\n  }\n  private _handleFooterSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    const anchor = this._getAnchorFromSlot(assignedElements);\n    if (this.stretchedLink) this._forwardAnchorAttributes(anchor);\n  }\n\n  private _handleLinkSlotChange(e: Event) {\n    this.warnLinkSlotMisused(e);\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    const anchor = this._getAnchorFromSlot(assignedElements);\n    if (this.stretchedLink) this._forwardAnchorAttributes(anchor);\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      > \n        ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n        <div class=\"card-media\">\n          <slot name=\"thumbnail\" @slotchange=${this._handleThumbnailSlotChange}></slot>\n\t\t\t\t\t${this.orientation === \"vertical\" ? html`<slot name=\"upper\"></slot>` : nothing}\n        </div>\n        <div class=\"card-body\">\n\t\t\t\t\t${this.orientation === \"horizontal\" ? html`<slot name=\"upper\"></slot>` : nothing}\n          <div class=\"card-header-container\">\n            <div class=\"card-header\">\n              <slot name=\"subtitle\"></slot>\n              <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n            </div>\n            <slot></slot>\n          </div>\n          <slot name=\"description\"></slot>\n          <slot name=\"lower\"></slot>\n          <slot name=\"footer\" @slotchange=${this._handleFooterSlotChange}>\n            <slot name=\"link\" @slotchange=${this._handleLinkSlotChange}></slot>\n          </slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsThumbnailCard;\n"],"names":["CardElement","literal","html","classMap","nothing","thumbnailCardStyle","__decorate","queryAssignedNodes","property"],"mappings":"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"}

package/react/components/ThumbnailCard/sgds-thumbnail-card.js

@@ -45,20 +45,17 @@ class SgdsThumbnailCard extends CardElement {
         }
     }
     _handleFooterSlotChange(e) {
-        var _a;
         const assignedElements = e.target.assignedElements({ flatten: true });
-        const footerHref = (_a = this._getAnchorFromSlot(assignedElements)) === null || _a === void 0 ? void 0 : _a.href;
-        if (this.stretchedLink && footerHref) {
-            this.card.setAttribute("href", footerHref);
-        }
+        const anchor = this._getAnchorFromSlot(assignedElements);
+        if (this.stretchedLink)
+            this._forwardAnchorAttributes(anchor);
     }
     _handleLinkSlotChange(e) {
-        var _a;
         this.warnLinkSlotMisused(e);
         const assignedElements = e.target.assignedElements({ flatten: true });
-        const linkHref = (_a = this._getAnchorFromSlot(assignedElements)) === null || _a === void 0 ? void 0 : _a.href;
-        if (this.stretchedLink && linkHref)
-            this.card.setAttribute("href", linkHref);
+        const anchor = this._getAnchorFromSlot(assignedElements);
+        if (this.stretchedLink)
+            this._forwardAnchorAttributes(anchor);
     }
     render() {
         const tag = this.stretchedLink ? literal `a` : literal `div`;

package/react/components/ThumbnailCard/sgds-thumbnail-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-thumbnail-card.js","sources":["../../../../src/components/ThumbnailCard/sgds-thumbnail-card.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport thumbnailCardStyle from \"./thumbnail-card.css\";\n\n/**\n * @summary Thumbnail cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.\n * @slot thumbnail - Accepts a small image or visual element typically displayed alongside the card's title or content to provide quick visual context.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.\n * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n *  Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsThumbnailCard extends CardElement {\n  static styles = [...CardElement.styles, thumbnailCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"upper\", flatten: true })\n  _upperNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  private _getAnchorFromSlot(elements: Element[]): HTMLAnchorElement | null {\n    if (!elements || elements.length === 0) return null;\n    const element = elements[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n  private _handleThumbnailSlotChange(e: Event) {\n    const thumbnailNode = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    if (thumbnailNode.length === 0) {\n      if ((this.orientation === \"vertical\" && this._upperNode.length === 0) || this.orientation === \"horizontal\") {\n        const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n        media.style.display = \"none\";\n\n        const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n        if (this.noPadding) body.style.padding = \"0px\";\n      }\n    }\n  }\n  private _handleFooterSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    const footerHref = this._getAnchorFromSlot(assignedElements)?.href;\n\n    if (this.stretchedLink && footerHref) {\n      this.card.setAttribute(\"href\", footerHref);\n    }\n  }\n\n  private _handleLinkSlotChange(e: Event) {\n    this.warnLinkSlotMisused(e);\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    const linkHref = this._getAnchorFromSlot(assignedElements)?.href;\n    if (this.stretchedLink && linkHref) this.card.setAttribute(\"href\", linkHref);\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      > \n        ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n        <div class=\"card-media\">\n          <slot name=\"thumbnail\" @slotchange=${this._handleThumbnailSlotChange}></slot>\n\t\t\t\t\t${this.orientation === \"vertical\" ? html`<slot name=\"upper\"></slot>` : nothing}\n        </div>\n        <div class=\"card-body\">\n\t\t\t\t\t${this.orientation === \"horizontal\" ? html`<slot name=\"upper\"></slot>` : nothing}\n          <div class=\"card-header-container\">\n            <div class=\"card-header\">\n              <slot name=\"subtitle\"></slot>\n              <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n            </div>\n            <slot></slot>\n          </div>\n          <slot name=\"description\"></slot>\n          <slot name=\"lower\"></slot>\n          <slot name=\"footer\" @slotchange=${this._handleFooterSlotChange}>\n            <slot name=\"link\" @slotchange=${this._handleLinkSlotChange}></slot>\n          </slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsThumbnailCard;\n"],"names":["thumbnailCardStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-thumbnail-card.js","sources":["../../../../src/components/ThumbnailCard/sgds-thumbnail-card.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport thumbnailCardStyle from \"./thumbnail-card.css\";\n\n/**\n * @summary Thumbnail cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.\n * @slot thumbnail - Accepts a small image or visual element typically displayed alongside the card's title or content to provide quick visual context.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.\n * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n *  Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsThumbnailCard extends CardElement {\n  static styles = [...CardElement.styles, thumbnailCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"upper\", flatten: true })\n  _upperNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  private _getAnchorFromSlot(elements: Element[]): HTMLAnchorElement | null {\n    if (!elements || elements.length === 0) return null;\n    const element = elements[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n  private _handleThumbnailSlotChange(e: Event) {\n    const thumbnailNode = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    if (thumbnailNode.length === 0) {\n      if ((this.orientation === \"vertical\" && this._upperNode.length === 0) || this.orientation === \"horizontal\") {\n        const media = this.shadowRoot.querySelector(\".card-media\") as HTMLDivElement;\n        media.style.display = \"none\";\n\n        const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n        if (this.noPadding) body.style.padding = \"0px\";\n      }\n    }\n  }\n  private _handleFooterSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    const anchor = this._getAnchorFromSlot(assignedElements);\n    if (this.stretchedLink) this._forwardAnchorAttributes(anchor);\n  }\n\n  private _handleLinkSlotChange(e: Event) {\n    this.warnLinkSlotMisused(e);\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    const anchor = this._getAnchorFromSlot(assignedElements);\n    if (this.stretchedLink) this._forwardAnchorAttributes(anchor);\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      > \n        ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n        <div class=\"card-media\">\n          <slot name=\"thumbnail\" @slotchange=${this._handleThumbnailSlotChange}></slot>\n\t\t\t\t\t${this.orientation === \"vertical\" ? html`<slot name=\"upper\"></slot>` : nothing}\n        </div>\n        <div class=\"card-body\">\n\t\t\t\t\t${this.orientation === \"horizontal\" ? html`<slot name=\"upper\"></slot>` : nothing}\n          <div class=\"card-header-container\">\n            <div class=\"card-header\">\n              <slot name=\"subtitle\"></slot>\n              <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n            </div>\n            <slot></slot>\n          </div>\n          <slot name=\"description\"></slot>\n          <slot name=\"lower\"></slot>\n          <slot name=\"footer\" @slotchange=${this._handleFooterSlotChange}>\n            <slot name=\"link\" @slotchange=${this._handleLinkSlotChange}></slot>\n          </slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsThumbnailCard;\n"],"names":["thumbnailCardStyle"],"mappings":"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"}

package/react/index.cjs.js

@@ -56,26 +56,25 @@ var index$N = require('./sidenav-link/index.cjs.js');
 var index$O = require('./sidenav/index.cjs.js');
 var index$P = require('./skeleton/index.cjs.js');
 var index$Q = require('./spinner/index.cjs.js');
-var index$R = require('./step/index.cjs.js');
-var index$S = require('./stepper/index.cjs.js');
-var index$T = require('./subnav-item/index.cjs.js');
-var index$U = require('./subnav/index.cjs.js');
-var index$V = require('./switch/index.cjs.js');
-var index$W = require('./system-banner-item/index.cjs.js');
-var index$X = require('./system-banner/index.cjs.js');
-var index$Y = require('./tab-group/index.cjs.js');
-var index$Z = require('./tab-panel/index.cjs.js');
-var index$_ = require('./tab/index.cjs.js');
-var index$$ = require('./table-cell/index.cjs.js');
-var index$10 = require('./table-head/index.cjs.js');
-var index$11 = require('./table-row/index.cjs.js');
-var index$12 = require('./table/index.cjs.js');
-var index$13 = require('./table-of-contents/index.cjs.js');
-var index$14 = require('./textarea/index.cjs.js');
-var index$15 = require('./thumbnail-card/index.cjs.js');
-var index$16 = require('./toast-container/index.cjs.js');
-var index$17 = require('./toast/index.cjs.js');
-var index$18 = require('./tooltip/index.cjs.js');
+var index$R = require('./stepper/index.cjs.js');
+var index$S = require('./subnav-item/index.cjs.js');
+var index$T = require('./subnav/index.cjs.js');
+var index$U = require('./switch/index.cjs.js');
+var index$V = require('./system-banner-item/index.cjs.js');
+var index$W = require('./system-banner/index.cjs.js');
+var index$X = require('./tab-group/index.cjs.js');
+var index$Y = require('./tab-panel/index.cjs.js');
+var index$Z = require('./tab/index.cjs.js');
+var index$_ = require('./table-cell/index.cjs.js');
+var index$$ = require('./table-head/index.cjs.js');
+var index$10 = require('./table-row/index.cjs.js');
+var index$11 = require('./table/index.cjs.js');
+var index$12 = require('./table-of-contents/index.cjs.js');
+var index$13 = require('./textarea/index.cjs.js');
+var index$14 = require('./thumbnail-card/index.cjs.js');
+var index$15 = require('./toast-container/index.cjs.js');
+var index$16 = require('./toast/index.cjs.js');
+var index$17 = require('./tooltip/index.cjs.js');
 
 
 
@@ -132,24 +131,23 @@ exports.SgdsSidenavLink = index$N["default"];
 exports.SgdsSidenav = index$O["default"];
 exports.SgdsSkeleton = index$P["default"];
 exports.SgdsSpinner = index$Q["default"];
-exports.SgdsStep = index$R["default"];
-exports.SgdsStepper = index$S["default"];
-exports.SgdsSubnavItem = index$T["default"];
-exports.SgdsSubnav = index$U["default"];
-exports.SgdsSwitch = index$V["default"];
-exports.SgdsSystemBannerItem = index$W["default"];
-exports.SgdsSystemBanner = index$X["default"];
-exports.SgdsTabGroup = index$Y["default"];
-exports.SgdsTabPanel = index$Z["default"];
-exports.SgdsTab = index$_["default"];
-exports.SgdsTableCell = index$$["default"];
-exports.SgdsTableHead = index$10["default"];
-exports.SgdsTableRow = index$11["default"];
-exports.SgdsTable = index$12["default"];
-exports.SgdsTableOfContents = index$13["default"];
-exports.SgdsTextarea = index$14["default"];
-exports.SgdsThumbnailCard = index$15["default"];
-exports.SgdsToastContainer = index$16["default"];
-exports.SgdsToast = index$17["default"];
-exports.SgdsTooltip = index$18["default"];
+exports.SgdsStepper = index$R["default"];
+exports.SgdsSubnavItem = index$S["default"];
+exports.SgdsSubnav = index$T["default"];
+exports.SgdsSwitch = index$U["default"];
+exports.SgdsSystemBannerItem = index$V["default"];
+exports.SgdsSystemBanner = index$W["default"];
+exports.SgdsTabGroup = index$X["default"];
+exports.SgdsTabPanel = index$Y["default"];
+exports.SgdsTab = index$Z["default"];
+exports.SgdsTableCell = index$_["default"];
+exports.SgdsTableHead = index$$["default"];
+exports.SgdsTableRow = index$10["default"];
+exports.SgdsTable = index$11["default"];
+exports.SgdsTableOfContents = index$12["default"];
+exports.SgdsTextarea = index$13["default"];
+exports.SgdsThumbnailCard = index$14["default"];
+exports.SgdsToastContainer = index$15["default"];
+exports.SgdsToast = index$16["default"];
+exports.SgdsTooltip = index$17["default"];
 //# sourceMappingURL=index.cjs.js.map

package/react/index.cjs.js.map

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

package/react/index.d.ts

@@ -51,7 +51,6 @@ export { default as SgdsSidenavLink } from './sidenav-link';
 export { default as SgdsSidenav } from './sidenav';
 export { default as SgdsSkeleton } from './skeleton';
 export { default as SgdsSpinner } from './spinner';
-export { default as SgdsStep } from './step';
 export { default as SgdsStepper } from './stepper';
 export { default as SgdsSubnavItem } from './subnav-item';
 export { default as SgdsSubnav } from './subnav';

package/react/index.js

@@ -52,7 +52,6 @@ export { default as SgdsSidenavLink } from './sidenav-link/index.js';
 export { default as SgdsSidenav } from './sidenav/index.js';
 export { default as SgdsSkeleton } from './skeleton/index.js';
 export { default as SgdsSpinner } from './spinner/index.js';
-export { default as SgdsStep } from './step/index.js';
 export { default as SgdsStepper } from './stepper/index.js';
 export { default as SgdsSubnavItem } from './subnav-item/index.js';
 export { default as SgdsSubnav } from './subnav/index.js';

package/react/index.js.map

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

package/types/react.d.ts

@@ -29,7 +29,7 @@ export {};
 type SgdsEventHandler = (event: CustomEvent) => void;
 
 /** Common props shared by every SGDS element */
-interface SgdsBaseProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+interface SgdsBaseProps extends React.HTMLAttributes<HTMLElement> {
   /** Override the CSS `class` attribute (use `className` in JSX for React) */
   class?: string;
 }
@@ -76,7 +76,6 @@ interface IStepMetaData {
     component: unknown;
     stepHeader: string;
     iconName?: string;
-    isCompleted?: boolean;
 }
 
 // ── Switch ─────────────────────────────────────────────────────────────
@@ -1191,21 +1190,11 @@ interface SgdsSpinnerProps extends SgdsBaseProps {
   orientation?: "horizontal" | "vertical";
 }
 
-// ── Step ─────────────────────────────────────────────────────────────
-
-interface SgdsStepProps extends SgdsBaseProps {
-  /** The header text for the step */
-  stepHeader?: string;
-  /** Optional icon name to display instead of step number */
-  iconName?: string | undefined;
-  /** Optional component to render for this step */
-  component?: unknown;
-}
-
 // ── Stepper ─────────────────────────────────────────────────────────────
 
 interface SgdsStepperProps extends SgdsBaseProps {
-  /** The metadata of stepper, type `IStepMetaData`. Deprecated: use sgds-step child components instead. */
+  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string`, `component:unknown`, `iconName:string`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.
+It is required to populate this array to properly render the stepper. By default, stepper markers will render numbers. For icon stepper markers, pass the name of sgds icon via `iconName` key. `iconName` is optional. */
   steps?: IStepMetaData[];
   /** The current state of active step. Defaults to 0 */
   activeStep?: number;
@@ -1213,8 +1202,6 @@ interface SgdsStepperProps extends SgdsBaseProps {
   orientation?: "horizontal" | "vertical";
   /** When true, the stepper's steps will be clickable */
   clickable?: boolean;
-  /** When true, the stepper's steps can only be clicked in a linear manner */
-  linear?: boolean;
   "onsgds-next-step"?: SgdsEventHandler;
   "onsgds-previous-step"?: SgdsEventHandler;
   "onsgds-last-step"?: SgdsEventHandler;
@@ -1551,7 +1538,6 @@ declare module "react" {
       "sgds-sidenav": SgdsSidenavProps;
       "sgds-skeleton": SgdsSkeletonProps;
       "sgds-spinner": SgdsSpinnerProps;
-      "sgds-step": SgdsStepProps;
       "sgds-stepper": SgdsStepperProps;
       "sgds-subnav-item": SgdsSubnavItemProps;
       "sgds-subnav": SgdsSubnavProps;
@@ -1634,7 +1620,6 @@ declare global {
     "sgds-sidenav": HTMLElement;
     "sgds-skeleton": HTMLElement;
     "sgds-spinner": HTMLElement;
-    "sgds-step": HTMLElement;
     "sgds-stepper": HTMLElement;
     "sgds-subnav-item": HTMLElement;
     "sgds-subnav": HTMLElement;