@govtechsg/sgds-web-component 2.0.1 → 2.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-stepper.cjs.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\";\nexport interface IStepMetaData {\n  component: unknown;\n  stepHeader: string;\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 *\n * @cssproperty --stepper-default-color - Sets the theme color for default stepper marker.\n * @cssproperty --stepper-theme-color - Sets the theme color for active, completed and clickable stepper marker.\n * @cssproperty --stepper-theme-hover-color - Sets the theme hover color for clickable stepper marker.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepperStyle];\n\n  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `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   */\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  /**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 class=\"sgds stepper\">\n        ${this.steps.map(({ stepHeader: step }, index) => {\n          return html`\n            <div\n              class=\"stepper-item ${classMap({\n                \"is-active\": this.activeStep === index,\n                \"is-completed\": this.activeStep > index,\n                \"is-clickable\": this.activeStep > index\n              })}\"\n              tabindex=\"0\"\n              aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n              aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n              @click=\"${() => this._onStepperItemClick(index)}\"\n              @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, index)}\n            >\n              <div class=\"stepper-marker\">${index + 1}</div>\n              <div class=\"stepper-detail\">${step}</div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsStepper;\n"],"names":["SgdsElement","html","classMap","stepperStyle","__decorate","property","defaultValue","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-stepper.cjs.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\";\nexport interface IStepMetaData {\n  component: unknown;\n  stepHeader: string;\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 *\n * @cssproperty --stepper-default-color - Sets the theme color for default stepper marker.\n * @cssproperty --stepper-theme-color - Sets the theme color for active, completed and clickable stepper marker.\n * @cssproperty --stepper-theme-hover-color - Sets the theme hover color for clickable stepper marker.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepperStyle];\n\n  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `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   */\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  /**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 class=\"sgds stepper\">\n        ${this.steps.map(({ stepHeader: step }, index) => {\n          return html`\n            <div\n              class=\"stepper-item ${classMap({\n                \"is-active\": this.activeStep === index,\n                \"is-completed\": this.activeStep > index,\n                \"is-clickable\": this.activeStep > index\n              })}\"\n              tabindex=\"0\"\n              aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n              aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n              @click=\"${() => this._onStepperItemClick(index)}\"\n              @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, index)}\n            >\n              <div class=\"stepper-marker\">${index + 1}</div>\n              <div class=\"stepper-detail\">${step}</div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsStepper;\n"],"names":["SgdsElement","html","classMap","stepperStyle","__decorate","property","defaultValue","watch"],"mappings":"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"}

package/components/Stepper/sgds-stepper.js

@@ -1,3 +1,4 @@
+'use client';
 import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';

package/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 } 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\";\nexport interface IStepMetaData {\n  component: unknown;\n  stepHeader: string;\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 *\n * @cssproperty --stepper-default-color - Sets the theme color for default stepper marker.\n * @cssproperty --stepper-theme-color - Sets the theme color for active, completed and clickable stepper marker.\n * @cssproperty --stepper-theme-hover-color - Sets the theme hover color for clickable stepper marker.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepperStyle];\n\n  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `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   */\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  /**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 class=\"sgds stepper\">\n        ${this.steps.map(({ stepHeader: step }, index) => {\n          return html`\n            <div\n              class=\"stepper-item ${classMap({\n                \"is-active\": this.activeStep === index,\n                \"is-completed\": this.activeStep > index,\n                \"is-clickable\": this.activeStep > index\n              })}\"\n              tabindex=\"0\"\n              aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n              aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n              @click=\"${() => this._onStepperItemClick(index)}\"\n              @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, index)}\n            >\n              <div class=\"stepper-marker\">${index + 1}</div>\n              <div class=\"stepper-detail\">${step}</div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\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\";\nexport interface IStepMetaData {\n  component: unknown;\n  stepHeader: string;\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 *\n * @cssproperty --stepper-default-color - Sets the theme color for default stepper marker.\n * @cssproperty --stepper-theme-color - Sets the theme color for active, completed and clickable stepper marker.\n * @cssproperty --stepper-theme-hover-color - Sets the theme hover color for clickable stepper marker.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepperStyle];\n\n  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `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   */\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  /**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 class=\"sgds stepper\">\n        ${this.steps.map(({ stepHeader: step }, index) => {\n          return html`\n            <div\n              class=\"stepper-item ${classMap({\n                \"is-active\": this.activeStep === index,\n                \"is-completed\": this.activeStep > index,\n                \"is-clickable\": this.activeStep > index\n              })}\"\n              tabindex=\"0\"\n              aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n              aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n              @click=\"${() => this._onStepperItemClick(index)}\"\n              @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, index)}\n            >\n              <div class=\"stepper-marker\">${index + 1}</div>\n              <div class=\"stepper-detail\">${step}</div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsStepper;\n"],"names":["stepperStyle"],"mappings":"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"}

package/components/Stepper/stepper.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

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

package/components/Stepper/stepper.js

@@ -1,3 +1,4 @@
+'use client';
 import { css } from 'lit';
 
 var css_248z = css`:host{--stepper-theme-color:var(--sgds-primary);--stepper-theme-hover-color:var(--sgds-primary-800);--stepper-default-color:var(--sgds-gray-400)}.sgds.stepper{display:flex;flex-wrap:wrap;font-size:var(--sgds-body-font-size)}.sgds.stepper .stepper-item{flex-basis:0;flex-grow:1;margin-top:0;position:relative}.sgds.stepper .stepper-item:not(:first-child){flex-basis:1em;flex-grow:1;flex-shrink:1}.sgds.stepper .stepper-item:not(:first-child):before{content:" ";position:absolute}.sgds.stepper .stepper-item.is-clickable{cursor:pointer}.sgds.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--stepper-theme-hover-color);border-color:var(--stepper-theme-hover-color)}.sgds.stepper .stepper-item.is-clickable:hover .stepper-detail,.sgds.stepper .stepper-item.is-clickable:hover .stepper-detail>*{color:var(--stepper-theme-hover-color);transition:all .5s ease}.sgds.stepper .stepper-item:before{background:linear-gradient(270deg,var(--stepper-default-color) 50%,var(--stepper-theme-color) 0);background-position:100% 100%;background-size:200% 100%}.sgds.stepper .stepper-item.is-active:before{background-position:0 100%}.sgds.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-white);border-color:var(--stepper-theme-color);color:var(--stepper-theme-color);font-weight:700}.sgds.stepper .stepper-item.is-completed:before{background-position:0 100%}.sgds.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--stepper-theme-color);border-color:var(--stepper-theme-color);color:var(--sgds-white);font-weight:700}.sgds.stepper .stepper-item>.stepper-marker{align-items:center;background:var(--stepper-default-color);border:.25rem solid var(--sgds-white);border-radius:50%;color:var(--sgds-white);display:flex;font-weight:400;height:2rem;justify-content:center;left:calc(50% - 1rem);position:absolute;width:2rem;z-index:1}.sgds.stepper .stepper-item:not(:first-child):before{bottom:0;height:.25rem;left:-50%;top:1rem;width:100%}.sgds.stepper .stepper-item .stepper-detail{font-weight:700;margin-left:.5rem;margin-right:.5rem;margin-top:2rem;text-align:center}`;

package/components/Stepper/stepper.js.map

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

package/components/Tab/sgds-tab-group.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Tab/sgds-tab-group.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-tab-group.cjs.js","sources":["../../../src/components/Tab/sgds-tab-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } 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 { SgdsTab } from \"./sgds-tab\";\nimport { SgdsTabPanel } from \"./sgds-tab-panel\";\nimport tabGroupStyle from \"./tab-group.css\";\n/**\n * @summary Tab Group organizes content into a container with the syncing of tab and their corresponding panels.\n * Each tab must be slotted into the nav slot and its `panel` must refer to a tab panel of the same name.\n *\n * @slot default - The slot for `sgds-tab-panel`\n * @slot nav - The slot for `sgds-tab`\n *\n * @event sgds-tab-show  Emitted when a tab and its panels are shown\n * @event sgds-tab-hide  Emitted when a tab and its panels are hidden.\n *\n * @csspart body - The container wrapping the default slot where all `sgds-tab-panel`s are slotted.\n * @csspart nav - The container wrapping the default slot where all `sgds-tab`s are slotted.\n *\n */\nexport class SgdsTabGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, tabGroupStyle];\n  /**@internal */\n  @query(\".tab-group\") tabGroup: HTMLElement;\n  /**@internal */\n  @query(\".tab-group__body\") body: HTMLSlotElement;\n  /**@internal */\n  @query(\".tab-group__nav\") nav: HTMLElement;\n  /**@internal */\n  private activeTab?: SgdsTab;\n  /**@internal */\n  private mutationObserver: MutationObserver;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**@internal */\n  private tabs: SgdsTab[] = [];\n  /**@internal */\n  private panels: SgdsTabPanel[] = [];\n  /** The variant types of tabs. Controls the visual stylesof all `sgds-tabs` in its slot. It also dynamically changes the slots of `sgds-tab` */\n  @property({ reflect: true, attribute: true }) variant: \"tabs-basic-toggle\" | \"tabs-info-toggle\";\n\n  connectedCallback() {\n    const whenAllDefined = Promise.all([\n      customElements.whenDefined(\"sgds-tab\"),\n      customElements.whenDefined(\"sgds-tab-panel\")\n    ]);\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => {\n      return;\n    });\n\n    this.mutationObserver = new MutationObserver(mutations => {\n      // Update aria labels when the DOM changes\n      if (mutations.some(m => ![\"aria-labelledby\", \"aria-controls\"].includes(m.attributeName))) {\n        setTimeout(() => this.setAriaLabels());\n      }\n\n      // Sync tabs when disabled states change\n      if (mutations.some(m => m.attributeName === \"disabled\")) {\n        this.syncTabsAndPanels();\n      }\n    });\n\n    this.updateComplete.then(() => {\n      this.syncTabsAndPanels();\n      this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });\n      this.resizeObserver.observe(this.nav);\n      whenAllDefined.then(() => {\n        // Set initial tab state when the tabs first become visible\n        const intersectionObserver = new IntersectionObserver((entries, observer) => {\n          if (entries[0].intersectionRatio > 0) {\n            this.setAriaLabels();\n            // this.setTabVariant();\n            this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });\n            observer.unobserve(entries[0].target);\n          }\n        });\n        intersectionObserver.observe(this.tabGroup);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver.disconnect();\n    this.resizeObserver.unobserve(this.nav);\n  }\n\n  /** Shows the specified tab panel. */\n  public show(panel: string) {\n    const tab = this.tabs.find(el => el.panel === panel);\n\n    if (tab) {\n      this.setActiveTab(tab);\n    }\n  }\n  /** @internal */\n  private getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {\n    const slot = this.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"nav\"]');\n\n    return [...(slot.assignedElements() as SgdsTab[])].filter(el => {\n      return options.includeDisabled\n        ? el.tagName.toLowerCase() === \"sgds-tab\"\n        : el.tagName.toLowerCase() === \"sgds-tab\" && !el.disabled;\n    });\n  }\n  /** @internal */\n  private getAllPanels() {\n    return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === \"sgds-tab-panel\") as [\n      SgdsTabPanel\n    ];\n  }\n  /** @internal */\n  private getActiveTab() {\n    return this.tabs.find(el => el.active);\n  }\n  /** @internal */\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    if (tab !== null) {\n      this.setActiveTab(tab);\n    }\n  }\n  /** @internal */\n  private handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    // Activate a tab\n    if ([\"Enter\", \" \"].includes(event.key)) {\n      if (tab !== null) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if ([\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\", \"Home\", \"End\"].includes(event.key)) {\n      const activeEl = this.tabs.find(t => t.matches(\":focus\"));\n\n      if (activeEl?.tagName.toLowerCase() === \"sgds-tab\") {\n        let index = this.tabs.indexOf(activeEl);\n\n        if (event.key === \"Home\") {\n          index = 0;\n        } else if (event.key === \"End\") {\n          index = this.tabs.length - 1;\n        } else if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n          index--;\n        } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n          index++;\n        }\n\n        if (index < 0) {\n          index = this.tabs.length - 1;\n        }\n\n        if (index > this.tabs.length - 1) {\n          index = 0;\n        }\n\n        this.tabs[index].focus({ preventScroll: true });\n\n        this.setActiveTab(this.tabs[index] /** , { scrollBehavior: \"smooth\" }*/);\n\n        event.preventDefault();\n      }\n    }\n  }\n  /** @internal */\n  private setActiveTab(tab: SgdsTab, options?: { emitEvents?: boolean }) {\n    options = {\n      emitEvents: true,\n      ...options\n    };\n\n    if (tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n\n      // Sync active tab and panel\n      this.tabs.map(el => (el.active = el === this.activeTab));\n      this.panels.map(el => (el.active = el.name === this.activeTab?.panel));\n\n      // Emit events\n      if (options.emitEvents) {\n        if (previousTab) {\n          this.emit(\"sgds-tab-hide\", { detail: { name: previousTab.panel } });\n        }\n\n        this.emit(\"sgds-tab-show\", { detail: { name: this.activeTab.panel } });\n      }\n    }\n  }\n  /** @internal */\n  private setAriaLabels() {\n    // Link each tab with its corresponding panel\n    this.tabs.forEach(tab => {\n      const panel = this.panels.find(el => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute(\"aria-controls\", panel.getAttribute(\"id\"));\n        panel.setAttribute(\"aria-labelledby\", tab.getAttribute(\"id\"));\n      }\n    });\n  }\n\n  // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n  /** @internal */\n  private syncTabsAndPanels() {\n    this.tabs = this.getAllTabs({ includeDisabled: false });\n    this.panels = this.getAllPanels();\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"tab-group\"\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n        variant=${ifDefined(this.variant)}\n      >\n        <div part=\"nav\" class=\"tab-group__nav\" role=\"tablist\">\n          <slot\n            name=\"nav\"\n            class=${classMap({\n              sgds: true,\n              \"nav-tabs\": true,\n              nav: true\n            })}\n            variant=${ifDefined(this.variant)}\n            @slotchange=${this.syncTabsAndPanels}\n          ></slot>\n        </div>\n        <div part=\"body\">\n          <slot class=\"tab-group__body\" @slotchange=${this.syncTabsAndPanels}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTabGroup;\n"],"names":["SgdsElement","html","ifDefined","classMap","tabGroupStyle","__decorate","query","property"],"mappings":"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"}
+{"version":3,"file":"sgds-tab-group.cjs.js","sources":["../../../src/components/Tab/sgds-tab-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } 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 { SgdsTab } from \"./sgds-tab\";\nimport { SgdsTabPanel } from \"./sgds-tab-panel\";\nimport tabGroupStyle from \"./tab-group.css\";\n/**\n * @summary Tab Group organizes content into a container with the syncing of tab and their corresponding panels.\n * Each tab must be slotted into the nav slot and its `panel` must refer to a tab panel of the same name.\n *\n * @slot default - The slot for `sgds-tab-panel`\n * @slot nav - The slot for `sgds-tab`\n *\n * @event sgds-tab-show  Emitted when a tab and its panels are shown\n * @event sgds-tab-hide  Emitted when a tab and its panels are hidden.\n *\n * @csspart body - The container wrapping the default slot where all `sgds-tab-panel`s are slotted.\n * @csspart nav - The container wrapping the default slot where all `sgds-tab`s are slotted.\n *\n */\nexport class SgdsTabGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, tabGroupStyle];\n  /**@internal */\n  @query(\".tab-group\") tabGroup: HTMLElement;\n  /**@internal */\n  @query(\".tab-group__body\") body: HTMLSlotElement;\n  /**@internal */\n  @query(\".tab-group__nav\") nav: HTMLElement;\n  /**@internal */\n  private activeTab?: SgdsTab;\n  /**@internal */\n  private mutationObserver: MutationObserver;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**@internal */\n  private tabs: SgdsTab[] = [];\n  /**@internal */\n  private panels: SgdsTabPanel[] = [];\n  /** The variant types of tabs. Controls the visual stylesof all `sgds-tabs` in its slot. It also dynamically changes the slots of `sgds-tab` */\n  @property({ reflect: true, attribute: true }) variant: \"tabs-basic-toggle\" | \"tabs-info-toggle\";\n\n  connectedCallback() {\n    const whenAllDefined = Promise.all([\n      customElements.whenDefined(\"sgds-tab\"),\n      customElements.whenDefined(\"sgds-tab-panel\")\n    ]);\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => {\n      return;\n    });\n\n    this.mutationObserver = new MutationObserver(mutations => {\n      // Update aria labels when the DOM changes\n      if (mutations.some(m => ![\"aria-labelledby\", \"aria-controls\"].includes(m.attributeName))) {\n        setTimeout(() => this.setAriaLabels());\n      }\n\n      // Sync tabs when disabled states change\n      if (mutations.some(m => m.attributeName === \"disabled\")) {\n        this.syncTabsAndPanels();\n      }\n    });\n\n    this.updateComplete.then(() => {\n      this.syncTabsAndPanels();\n      this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });\n      this.resizeObserver.observe(this.nav);\n      whenAllDefined.then(() => {\n        // Set initial tab state when the tabs first become visible\n        const intersectionObserver = new IntersectionObserver((entries, observer) => {\n          if (entries[0].intersectionRatio > 0) {\n            this.setAriaLabels();\n            // this.setTabVariant();\n            this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });\n            observer.unobserve(entries[0].target);\n          }\n        });\n        intersectionObserver.observe(this.tabGroup);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver.disconnect();\n    this.resizeObserver.unobserve(this.nav);\n  }\n\n  /** Shows the specified tab panel. */\n  public show(panel: string) {\n    const tab = this.tabs.find(el => el.panel === panel);\n\n    if (tab) {\n      this.setActiveTab(tab);\n    }\n  }\n  /** @internal */\n  private getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {\n    const slot = this.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"nav\"]');\n\n    return [...(slot.assignedElements() as SgdsTab[])].filter(el => {\n      return options.includeDisabled\n        ? el.tagName.toLowerCase() === \"sgds-tab\"\n        : el.tagName.toLowerCase() === \"sgds-tab\" && !el.disabled;\n    });\n  }\n  /** @internal */\n  private getAllPanels() {\n    return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === \"sgds-tab-panel\") as [\n      SgdsTabPanel\n    ];\n  }\n  /** @internal */\n  private getActiveTab() {\n    return this.tabs.find(el => el.active);\n  }\n  /** @internal */\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    if (tab !== null) {\n      this.setActiveTab(tab);\n    }\n  }\n  /** @internal */\n  private handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    // Activate a tab\n    if ([\"Enter\", \" \"].includes(event.key)) {\n      if (tab !== null) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if ([\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\", \"Home\", \"End\"].includes(event.key)) {\n      const activeEl = this.tabs.find(t => t.matches(\":focus\"));\n\n      if (activeEl?.tagName.toLowerCase() === \"sgds-tab\") {\n        let index = this.tabs.indexOf(activeEl);\n\n        if (event.key === \"Home\") {\n          index = 0;\n        } else if (event.key === \"End\") {\n          index = this.tabs.length - 1;\n        } else if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n          index--;\n        } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n          index++;\n        }\n\n        if (index < 0) {\n          index = this.tabs.length - 1;\n        }\n\n        if (index > this.tabs.length - 1) {\n          index = 0;\n        }\n\n        this.tabs[index].focus({ preventScroll: true });\n\n        this.setActiveTab(this.tabs[index] /** , { scrollBehavior: \"smooth\" }*/);\n\n        event.preventDefault();\n      }\n    }\n  }\n  /** @internal */\n  private setActiveTab(tab: SgdsTab, options?: { emitEvents?: boolean }) {\n    options = {\n      emitEvents: true,\n      ...options\n    };\n\n    if (tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n\n      // Sync active tab and panel\n      this.tabs.map(el => (el.active = el === this.activeTab));\n      this.panels.map(el => (el.active = el.name === this.activeTab?.panel));\n\n      // Emit events\n      if (options.emitEvents) {\n        if (previousTab) {\n          this.emit(\"sgds-tab-hide\", { detail: { name: previousTab.panel } });\n        }\n\n        this.emit(\"sgds-tab-show\", { detail: { name: this.activeTab.panel } });\n      }\n    }\n  }\n  /** @internal */\n  private setAriaLabels() {\n    // Link each tab with its corresponding panel\n    this.tabs.forEach(tab => {\n      const panel = this.panels.find(el => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute(\"aria-controls\", panel.getAttribute(\"id\"));\n        panel.setAttribute(\"aria-labelledby\", tab.getAttribute(\"id\"));\n      }\n    });\n  }\n\n  // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n  /** @internal */\n  private syncTabsAndPanels() {\n    this.tabs = this.getAllTabs({ includeDisabled: false });\n    this.panels = this.getAllPanels();\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"tab-group\"\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n        variant=${ifDefined(this.variant)}\n      >\n        <div part=\"nav\" class=\"tab-group__nav\" role=\"tablist\">\n          <slot\n            name=\"nav\"\n            class=${classMap({\n              sgds: true,\n              \"nav-tabs\": true,\n              nav: true\n            })}\n            variant=${ifDefined(this.variant)}\n            @slotchange=${this.syncTabsAndPanels}\n          ></slot>\n        </div>\n        <div part=\"body\">\n          <slot class=\"tab-group__body\" @slotchange=${this.syncTabsAndPanels}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTabGroup;\n"],"names":["SgdsElement","html","ifDefined","classMap","tabGroupStyle","__decorate","query","property"],"mappings":"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"}

package/components/Tab/sgds-tab-group.js

@@ -1,3 +1,4 @@
+'use client';
 import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { query, property } from 'lit/decorators.js';

package/components/Tab/sgds-tab-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-tab-group.js","sources":["../../../src/components/Tab/sgds-tab-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } 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 { SgdsTab } from \"./sgds-tab\";\nimport { SgdsTabPanel } from \"./sgds-tab-panel\";\nimport tabGroupStyle from \"./tab-group.css\";\n/**\n * @summary Tab Group organizes content into a container with the syncing of tab and their corresponding panels.\n * Each tab must be slotted into the nav slot and its `panel` must refer to a tab panel of the same name.\n *\n * @slot default - The slot for `sgds-tab-panel`\n * @slot nav - The slot for `sgds-tab`\n *\n * @event sgds-tab-show  Emitted when a tab and its panels are shown\n * @event sgds-tab-hide  Emitted when a tab and its panels are hidden.\n *\n * @csspart body - The container wrapping the default slot where all `sgds-tab-panel`s are slotted.\n * @csspart nav - The container wrapping the default slot where all `sgds-tab`s are slotted.\n *\n */\nexport class SgdsTabGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, tabGroupStyle];\n  /**@internal */\n  @query(\".tab-group\") tabGroup: HTMLElement;\n  /**@internal */\n  @query(\".tab-group__body\") body: HTMLSlotElement;\n  /**@internal */\n  @query(\".tab-group__nav\") nav: HTMLElement;\n  /**@internal */\n  private activeTab?: SgdsTab;\n  /**@internal */\n  private mutationObserver: MutationObserver;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**@internal */\n  private tabs: SgdsTab[] = [];\n  /**@internal */\n  private panels: SgdsTabPanel[] = [];\n  /** The variant types of tabs. Controls the visual stylesof all `sgds-tabs` in its slot. It also dynamically changes the slots of `sgds-tab` */\n  @property({ reflect: true, attribute: true }) variant: \"tabs-basic-toggle\" | \"tabs-info-toggle\";\n\n  connectedCallback() {\n    const whenAllDefined = Promise.all([\n      customElements.whenDefined(\"sgds-tab\"),\n      customElements.whenDefined(\"sgds-tab-panel\")\n    ]);\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => {\n      return;\n    });\n\n    this.mutationObserver = new MutationObserver(mutations => {\n      // Update aria labels when the DOM changes\n      if (mutations.some(m => ![\"aria-labelledby\", \"aria-controls\"].includes(m.attributeName))) {\n        setTimeout(() => this.setAriaLabels());\n      }\n\n      // Sync tabs when disabled states change\n      if (mutations.some(m => m.attributeName === \"disabled\")) {\n        this.syncTabsAndPanels();\n      }\n    });\n\n    this.updateComplete.then(() => {\n      this.syncTabsAndPanels();\n      this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });\n      this.resizeObserver.observe(this.nav);\n      whenAllDefined.then(() => {\n        // Set initial tab state when the tabs first become visible\n        const intersectionObserver = new IntersectionObserver((entries, observer) => {\n          if (entries[0].intersectionRatio > 0) {\n            this.setAriaLabels();\n            // this.setTabVariant();\n            this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });\n            observer.unobserve(entries[0].target);\n          }\n        });\n        intersectionObserver.observe(this.tabGroup);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver.disconnect();\n    this.resizeObserver.unobserve(this.nav);\n  }\n\n  /** Shows the specified tab panel. */\n  public show(panel: string) {\n    const tab = this.tabs.find(el => el.panel === panel);\n\n    if (tab) {\n      this.setActiveTab(tab);\n    }\n  }\n  /** @internal */\n  private getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {\n    const slot = this.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"nav\"]');\n\n    return [...(slot.assignedElements() as SgdsTab[])].filter(el => {\n      return options.includeDisabled\n        ? el.tagName.toLowerCase() === \"sgds-tab\"\n        : el.tagName.toLowerCase() === \"sgds-tab\" && !el.disabled;\n    });\n  }\n  /** @internal */\n  private getAllPanels() {\n    return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === \"sgds-tab-panel\") as [\n      SgdsTabPanel\n    ];\n  }\n  /** @internal */\n  private getActiveTab() {\n    return this.tabs.find(el => el.active);\n  }\n  /** @internal */\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    if (tab !== null) {\n      this.setActiveTab(tab);\n    }\n  }\n  /** @internal */\n  private handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    // Activate a tab\n    if ([\"Enter\", \" \"].includes(event.key)) {\n      if (tab !== null) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if ([\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\", \"Home\", \"End\"].includes(event.key)) {\n      const activeEl = this.tabs.find(t => t.matches(\":focus\"));\n\n      if (activeEl?.tagName.toLowerCase() === \"sgds-tab\") {\n        let index = this.tabs.indexOf(activeEl);\n\n        if (event.key === \"Home\") {\n          index = 0;\n        } else if (event.key === \"End\") {\n          index = this.tabs.length - 1;\n        } else if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n          index--;\n        } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n          index++;\n        }\n\n        if (index < 0) {\n          index = this.tabs.length - 1;\n        }\n\n        if (index > this.tabs.length - 1) {\n          index = 0;\n        }\n\n        this.tabs[index].focus({ preventScroll: true });\n\n        this.setActiveTab(this.tabs[index] /** , { scrollBehavior: \"smooth\" }*/);\n\n        event.preventDefault();\n      }\n    }\n  }\n  /** @internal */\n  private setActiveTab(tab: SgdsTab, options?: { emitEvents?: boolean }) {\n    options = {\n      emitEvents: true,\n      ...options\n    };\n\n    if (tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n\n      // Sync active tab and panel\n      this.tabs.map(el => (el.active = el === this.activeTab));\n      this.panels.map(el => (el.active = el.name === this.activeTab?.panel));\n\n      // Emit events\n      if (options.emitEvents) {\n        if (previousTab) {\n          this.emit(\"sgds-tab-hide\", { detail: { name: previousTab.panel } });\n        }\n\n        this.emit(\"sgds-tab-show\", { detail: { name: this.activeTab.panel } });\n      }\n    }\n  }\n  /** @internal */\n  private setAriaLabels() {\n    // Link each tab with its corresponding panel\n    this.tabs.forEach(tab => {\n      const panel = this.panels.find(el => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute(\"aria-controls\", panel.getAttribute(\"id\"));\n        panel.setAttribute(\"aria-labelledby\", tab.getAttribute(\"id\"));\n      }\n    });\n  }\n\n  // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n  /** @internal */\n  private syncTabsAndPanels() {\n    this.tabs = this.getAllTabs({ includeDisabled: false });\n    this.panels = this.getAllPanels();\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"tab-group\"\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n        variant=${ifDefined(this.variant)}\n      >\n        <div part=\"nav\" class=\"tab-group__nav\" role=\"tablist\">\n          <slot\n            name=\"nav\"\n            class=${classMap({\n              sgds: true,\n              \"nav-tabs\": true,\n              nav: true\n            })}\n            variant=${ifDefined(this.variant)}\n            @slotchange=${this.syncTabsAndPanels}\n          ></slot>\n        </div>\n        <div part=\"body\">\n          <slot class=\"tab-group__body\" @slotchange=${this.syncTabsAndPanels}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTabGroup;\n"],"names":["tabGroupStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-tab-group.js","sources":["../../../src/components/Tab/sgds-tab-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } 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 { SgdsTab } from \"./sgds-tab\";\nimport { SgdsTabPanel } from \"./sgds-tab-panel\";\nimport tabGroupStyle from \"./tab-group.css\";\n/**\n * @summary Tab Group organizes content into a container with the syncing of tab and their corresponding panels.\n * Each tab must be slotted into the nav slot and its `panel` must refer to a tab panel of the same name.\n *\n * @slot default - The slot for `sgds-tab-panel`\n * @slot nav - The slot for `sgds-tab`\n *\n * @event sgds-tab-show  Emitted when a tab and its panels are shown\n * @event sgds-tab-hide  Emitted when a tab and its panels are hidden.\n *\n * @csspart body - The container wrapping the default slot where all `sgds-tab-panel`s are slotted.\n * @csspart nav - The container wrapping the default slot where all `sgds-tab`s are slotted.\n *\n */\nexport class SgdsTabGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, tabGroupStyle];\n  /**@internal */\n  @query(\".tab-group\") tabGroup: HTMLElement;\n  /**@internal */\n  @query(\".tab-group__body\") body: HTMLSlotElement;\n  /**@internal */\n  @query(\".tab-group__nav\") nav: HTMLElement;\n  /**@internal */\n  private activeTab?: SgdsTab;\n  /**@internal */\n  private mutationObserver: MutationObserver;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**@internal */\n  private tabs: SgdsTab[] = [];\n  /**@internal */\n  private panels: SgdsTabPanel[] = [];\n  /** The variant types of tabs. Controls the visual stylesof all `sgds-tabs` in its slot. It also dynamically changes the slots of `sgds-tab` */\n  @property({ reflect: true, attribute: true }) variant: \"tabs-basic-toggle\" | \"tabs-info-toggle\";\n\n  connectedCallback() {\n    const whenAllDefined = Promise.all([\n      customElements.whenDefined(\"sgds-tab\"),\n      customElements.whenDefined(\"sgds-tab-panel\")\n    ]);\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => {\n      return;\n    });\n\n    this.mutationObserver = new MutationObserver(mutations => {\n      // Update aria labels when the DOM changes\n      if (mutations.some(m => ![\"aria-labelledby\", \"aria-controls\"].includes(m.attributeName))) {\n        setTimeout(() => this.setAriaLabels());\n      }\n\n      // Sync tabs when disabled states change\n      if (mutations.some(m => m.attributeName === \"disabled\")) {\n        this.syncTabsAndPanels();\n      }\n    });\n\n    this.updateComplete.then(() => {\n      this.syncTabsAndPanels();\n      this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });\n      this.resizeObserver.observe(this.nav);\n      whenAllDefined.then(() => {\n        // Set initial tab state when the tabs first become visible\n        const intersectionObserver = new IntersectionObserver((entries, observer) => {\n          if (entries[0].intersectionRatio > 0) {\n            this.setAriaLabels();\n            // this.setTabVariant();\n            this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });\n            observer.unobserve(entries[0].target);\n          }\n        });\n        intersectionObserver.observe(this.tabGroup);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver.disconnect();\n    this.resizeObserver.unobserve(this.nav);\n  }\n\n  /** Shows the specified tab panel. */\n  public show(panel: string) {\n    const tab = this.tabs.find(el => el.panel === panel);\n\n    if (tab) {\n      this.setActiveTab(tab);\n    }\n  }\n  /** @internal */\n  private getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {\n    const slot = this.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"nav\"]');\n\n    return [...(slot.assignedElements() as SgdsTab[])].filter(el => {\n      return options.includeDisabled\n        ? el.tagName.toLowerCase() === \"sgds-tab\"\n        : el.tagName.toLowerCase() === \"sgds-tab\" && !el.disabled;\n    });\n  }\n  /** @internal */\n  private getAllPanels() {\n    return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === \"sgds-tab-panel\") as [\n      SgdsTabPanel\n    ];\n  }\n  /** @internal */\n  private getActiveTab() {\n    return this.tabs.find(el => el.active);\n  }\n  /** @internal */\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    if (tab !== null) {\n      this.setActiveTab(tab);\n    }\n  }\n  /** @internal */\n  private handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    // Activate a tab\n    if ([\"Enter\", \" \"].includes(event.key)) {\n      if (tab !== null) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if ([\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\", \"Home\", \"End\"].includes(event.key)) {\n      const activeEl = this.tabs.find(t => t.matches(\":focus\"));\n\n      if (activeEl?.tagName.toLowerCase() === \"sgds-tab\") {\n        let index = this.tabs.indexOf(activeEl);\n\n        if (event.key === \"Home\") {\n          index = 0;\n        } else if (event.key === \"End\") {\n          index = this.tabs.length - 1;\n        } else if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n          index--;\n        } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n          index++;\n        }\n\n        if (index < 0) {\n          index = this.tabs.length - 1;\n        }\n\n        if (index > this.tabs.length - 1) {\n          index = 0;\n        }\n\n        this.tabs[index].focus({ preventScroll: true });\n\n        this.setActiveTab(this.tabs[index] /** , { scrollBehavior: \"smooth\" }*/);\n\n        event.preventDefault();\n      }\n    }\n  }\n  /** @internal */\n  private setActiveTab(tab: SgdsTab, options?: { emitEvents?: boolean }) {\n    options = {\n      emitEvents: true,\n      ...options\n    };\n\n    if (tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n\n      // Sync active tab and panel\n      this.tabs.map(el => (el.active = el === this.activeTab));\n      this.panels.map(el => (el.active = el.name === this.activeTab?.panel));\n\n      // Emit events\n      if (options.emitEvents) {\n        if (previousTab) {\n          this.emit(\"sgds-tab-hide\", { detail: { name: previousTab.panel } });\n        }\n\n        this.emit(\"sgds-tab-show\", { detail: { name: this.activeTab.panel } });\n      }\n    }\n  }\n  /** @internal */\n  private setAriaLabels() {\n    // Link each tab with its corresponding panel\n    this.tabs.forEach(tab => {\n      const panel = this.panels.find(el => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute(\"aria-controls\", panel.getAttribute(\"id\"));\n        panel.setAttribute(\"aria-labelledby\", tab.getAttribute(\"id\"));\n      }\n    });\n  }\n\n  // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n  /** @internal */\n  private syncTabsAndPanels() {\n    this.tabs = this.getAllTabs({ includeDisabled: false });\n    this.panels = this.getAllPanels();\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"tab-group\"\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n        variant=${ifDefined(this.variant)}\n      >\n        <div part=\"nav\" class=\"tab-group__nav\" role=\"tablist\">\n          <slot\n            name=\"nav\"\n            class=${classMap({\n              sgds: true,\n              \"nav-tabs\": true,\n              nav: true\n            })}\n            variant=${ifDefined(this.variant)}\n            @slotchange=${this.syncTabsAndPanels}\n          ></slot>\n        </div>\n        <div part=\"body\">\n          <slot class=\"tab-group__body\" @slotchange=${this.syncTabsAndPanels}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTabGroup;\n"],"names":["tabGroupStyle"],"mappings":"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"}

package/components/Tab/sgds-tab-panel.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Tab/sgds-tab-panel.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-tab-panel.cjs.js","sources":["../../../src/components/Tab/sgds-tab-panel.ts"],"sourcesContent":["import { LitElement, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport tabPanelStyles from \"./tab-panel.css\";\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside tab groups to display tabbed content.\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --tab-panel-padding-y - The y-axis padding of tab panel.\n *\n */\nexport class SgdsTabPanel extends LitElement {\n  static styles = tabPanelStyles;\n  /**@internal */\n  private readonly attrId = ++id;\n  /**@internal */\n  private readonly componentId = `sgds-tab-panel-${this.attrId}`;\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = \"\";\n\n  /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute(\"role\", \"tabpanel\");\n  }\n\n  @watch(\"active\")\n  handleActiveChange() {\n    this.setAttribute(\"aria-hidden\", this.active ? \"false\" : \"true\");\n  }\n\n  render() {\n    return html`\n      <slot\n        part=\"base\"\n        class=${classMap({\n          \"tab-panel\": true,\n          \"tab-panel--active\": this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n\nexport default SgdsTabPanel;\n"],"names":["LitElement","html","classMap","tabPanelStyles","__decorate","property","watch"],"mappings":";;;;;;;;;;;AAMA,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;AAQG;AACG,MAAO,YAAa,SAAQA,cAAU,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAGmB,IAAM,CAAA,MAAA,GAAG,EAAE,EAAE,CAAC;;AAEd,QAAA,IAAA,CAAA,WAAW,GAAG,CAAkB,eAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;;QAElC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;;QAGK,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAwB5D;IAtBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAC1D,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACvC;IAGD,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;KAClE;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;;AAGC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,MAAM;SACjC,CAAC,CAAA;;KAEL,CAAC;KACH;;AAhCM,YAAM,CAAA,MAAA,GAAGC,mBAAH,CAAkB;AAMFC,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGKD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS3DD,gBAAA,CAAA;IADCE,WAAK,CAAC,QAAQ,CAAC;AAGf,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-tab-panel.cjs.js","sources":["../../../src/components/Tab/sgds-tab-panel.ts"],"sourcesContent":["import { LitElement, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport tabPanelStyles from \"./tab-panel.css\";\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside tab groups to display tabbed content.\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --tab-panel-padding-y - The y-axis padding of tab panel.\n *\n */\nexport class SgdsTabPanel extends LitElement {\n  static styles = tabPanelStyles;\n  /**@internal */\n  private readonly attrId = ++id;\n  /**@internal */\n  private readonly componentId = `sgds-tab-panel-${this.attrId}`;\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = \"\";\n\n  /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute(\"role\", \"tabpanel\");\n  }\n\n  @watch(\"active\")\n  handleActiveChange() {\n    this.setAttribute(\"aria-hidden\", this.active ? \"false\" : \"true\");\n  }\n\n  render() {\n    return html`\n      <slot\n        part=\"base\"\n        class=${classMap({\n          \"tab-panel\": true,\n          \"tab-panel--active\": this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n\nexport default SgdsTabPanel;\n"],"names":["LitElement","html","classMap","tabPanelStyles","__decorate","property","watch"],"mappings":";;;;;;;;;;;;AAMA,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;AAQG;AACG,MAAO,YAAa,SAAQA,cAAU,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAGmB,IAAM,CAAA,MAAA,GAAG,EAAE,EAAE,CAAC;;AAEd,QAAA,IAAA,CAAA,WAAW,GAAG,CAAkB,eAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;;QAElC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;;QAGK,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAwB5D;IAtBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAC1D,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACvC;IAGD,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;KAClE;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;;AAGC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,MAAM;SACjC,CAAC,CAAA;;KAEL,CAAC;KACH;;AAhCM,YAAM,CAAA,MAAA,GAAGC,mBAAH,CAAkB;AAMFC,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGKD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS3DD,gBAAA,CAAA;IADCE,WAAK,CAAC,QAAQ,CAAC;AAGf,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA;;;;;"}

package/components/Tab/sgds-tab-panel.js

@@ -1,3 +1,4 @@
+'use client';
 import { __decorate } from 'tslib';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';

package/components/Tab/sgds-tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-tab-panel.js","sources":["../../../src/components/Tab/sgds-tab-panel.ts"],"sourcesContent":["import { LitElement, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport tabPanelStyles from \"./tab-panel.css\";\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside tab groups to display tabbed content.\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --tab-panel-padding-y - The y-axis padding of tab panel.\n *\n */\nexport class SgdsTabPanel extends LitElement {\n  static styles = tabPanelStyles;\n  /**@internal */\n  private readonly attrId = ++id;\n  /**@internal */\n  private readonly componentId = `sgds-tab-panel-${this.attrId}`;\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = \"\";\n\n  /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute(\"role\", \"tabpanel\");\n  }\n\n  @watch(\"active\")\n  handleActiveChange() {\n    this.setAttribute(\"aria-hidden\", this.active ? \"false\" : \"true\");\n  }\n\n  render() {\n    return html`\n      <slot\n        part=\"base\"\n        class=${classMap({\n          \"tab-panel\": true,\n          \"tab-panel--active\": this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n\nexport default SgdsTabPanel;\n"],"names":["tabPanelStyles"],"mappings":";;;;;;;AAMA,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;AAQG;AACG,MAAO,YAAa,SAAQ,UAAU,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAGmB,IAAM,CAAA,MAAA,GAAG,EAAE,EAAE,CAAC;;AAEd,QAAA,IAAA,CAAA,WAAW,GAAG,CAAkB,eAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;;QAElC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;;QAGK,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAwB5D;IAtBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAC1D,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACvC;IAGD,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;KAClE;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,MAAM;SACjC,CAAC,CAAA;;KAEL,CAAC;KACH;;AAhCM,YAAM,CAAA,MAAA,GAAGA,QAAH,CAAkB;AAMF,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGK,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS3D,UAAA,CAAA;IADC,KAAK,CAAC,QAAQ,CAAC;AAGf,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-tab-panel.js","sources":["../../../src/components/Tab/sgds-tab-panel.ts"],"sourcesContent":["import { LitElement, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport tabPanelStyles from \"./tab-panel.css\";\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside tab groups to display tabbed content.\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --tab-panel-padding-y - The y-axis padding of tab panel.\n *\n */\nexport class SgdsTabPanel extends LitElement {\n  static styles = tabPanelStyles;\n  /**@internal */\n  private readonly attrId = ++id;\n  /**@internal */\n  private readonly componentId = `sgds-tab-panel-${this.attrId}`;\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = \"\";\n\n  /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute(\"role\", \"tabpanel\");\n  }\n\n  @watch(\"active\")\n  handleActiveChange() {\n    this.setAttribute(\"aria-hidden\", this.active ? \"false\" : \"true\");\n  }\n\n  render() {\n    return html`\n      <slot\n        part=\"base\"\n        class=${classMap({\n          \"tab-panel\": true,\n          \"tab-panel--active\": this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n\nexport default SgdsTabPanel;\n"],"names":["tabPanelStyles"],"mappings":";;;;;;;;AAMA,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;AAQG;AACG,MAAO,YAAa,SAAQ,UAAU,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAGmB,IAAM,CAAA,MAAA,GAAG,EAAE,EAAE,CAAC;;AAEd,QAAA,IAAA,CAAA,WAAW,GAAG,CAAkB,eAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;;QAElC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;;QAGK,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAwB5D;IAtBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAC1D,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACvC;IAGD,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;KAClE;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,MAAM;SACjC,CAAC,CAAA;;KAEL,CAAC;KACH;;AAhCM,YAAM,CAAA,MAAA,GAAGA,QAAH,CAAkB;AAMF,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGK,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS3D,UAAA,CAAA;IADC,KAAK,CAAC,QAAQ,CAAC;AAGf,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA;;;;"}

package/components/Tab/sgds-tab.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Tab/sgds-tab.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-tab.cjs.js","sources":["../../../src/components/Tab/sgds-tab.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport tabStyle from \"./tab.css\";\n\nlet id = 0;\n/**\n * @summary Tabs are used within tab group to activate the tab panels\n *\n * @slot default - The content of the tab. This is  available when variant attribute of `sgds-tab-group` is not specified or when it is `tabs-basic-toggle`\n *\n * @slot icon - The slot to place svg icons. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n * @slot count - The slot for count. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n * @slot label - The slot for label of tab. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n *\n * @csspart base - The base wrapper of tab\n *\n *\n */\nexport class SgdsTab extends SgdsElement {\n  static styles = [tabStyle];\n  /**@internal */\n  @query(\".nav-item\") tab: HTMLElement;\n  /**@internal */\n  private readonly attrId = ++id;\n  /**@internal */\n  private readonly componentId = `sgds-tab-${this.attrId}`;\n\n  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */\n  @property({ reflect: true }) panel = \"\";\n\n  /** Draws the tab in an active state. When used with tab group, this state is already managed. Use it to set the initial active tab on first load of page */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Disables the tab and prevents selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"tab\");\n  }\n\n  /** Sets focus to the tab. */\n  public focus(options?: FocusOptions) {\n    this.tab.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  public blur() {\n    this.tab.blur();\n  }\n  /**@internal */\n  @watch(\"active\")\n  handleActiveChange() {\n    this.setAttribute(\"aria-selected\", this.active ? \"true\" : \"false\");\n  }\n  /**@internal */\n  @watch(\"disabled\")\n  handleDisabledChange() {\n    this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n    if (this.disabled) this.active = false;\n  }\n\n  render() {\n    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    const parentVariantAttr = this.closest(\"sgds-tab-group\").getAttribute(\"variant\");\n    const tabsInfo = html`\n      <div class=\"tabs-info-label\">\n        <div><slot name=\"icon\"></slot></div>\n        <div><slot name=\"label\"></slot></div>\n      </div>\n      <div class=\"tabs-info-count\"><slot name=\"count\"></slot></div>\n    `;\n    return html`\n      <ul class=\"list-unstyled\">\n        <li part=\"base\" class=\"nav-item\" tabindex=${this.disabled ? \"-1\" : \"0\"}>\n          <div\n            class=\"${classMap({\n              \"nav-link\": true,\n              [`${parentVariantAttr}`]: parentVariantAttr,\n              active: this.active,\n              disabled: this.disabled\n            })}\"\n          >\n            ${parentVariantAttr === \"tabs-info-toggle\" ? tabsInfo : html`<slot></slot>`}\n          </div>\n        </li>\n      </ul>\n    `;\n  }\n}\n\nexport default SgdsTab;\n"],"names":["SgdsElement","html","classMap","tabStyle","__decorate","query","property","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-tab.cjs.js","sources":["../../../src/components/Tab/sgds-tab.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport tabStyle from \"./tab.css\";\n\nlet id = 0;\n/**\n * @summary Tabs are used within tab group to activate the tab panels\n *\n * @slot default - The content of the tab. This is  available when variant attribute of `sgds-tab-group` is not specified or when it is `tabs-basic-toggle`\n *\n * @slot icon - The slot to place svg icons. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n * @slot count - The slot for count. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n * @slot label - The slot for label of tab. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n *\n * @csspart base - The base wrapper of tab\n *\n *\n */\nexport class SgdsTab extends SgdsElement {\n  static styles = [tabStyle];\n  /**@internal */\n  @query(\".nav-item\") tab: HTMLElement;\n  /**@internal */\n  private readonly attrId = ++id;\n  /**@internal */\n  private readonly componentId = `sgds-tab-${this.attrId}`;\n\n  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */\n  @property({ reflect: true }) panel = \"\";\n\n  /** Draws the tab in an active state. When used with tab group, this state is already managed. Use it to set the initial active tab on first load of page */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Disables the tab and prevents selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"tab\");\n  }\n\n  /** Sets focus to the tab. */\n  public focus(options?: FocusOptions) {\n    this.tab.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  public blur() {\n    this.tab.blur();\n  }\n  /**@internal */\n  @watch(\"active\")\n  handleActiveChange() {\n    this.setAttribute(\"aria-selected\", this.active ? \"true\" : \"false\");\n  }\n  /**@internal */\n  @watch(\"disabled\")\n  handleDisabledChange() {\n    this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n    if (this.disabled) this.active = false;\n  }\n\n  render() {\n    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    const parentVariantAttr = this.closest(\"sgds-tab-group\").getAttribute(\"variant\");\n    const tabsInfo = html`\n      <div class=\"tabs-info-label\">\n        <div><slot name=\"icon\"></slot></div>\n        <div><slot name=\"label\"></slot></div>\n      </div>\n      <div class=\"tabs-info-count\"><slot name=\"count\"></slot></div>\n    `;\n    return html`\n      <ul class=\"list-unstyled\">\n        <li part=\"base\" class=\"nav-item\" tabindex=${this.disabled ? \"-1\" : \"0\"}>\n          <div\n            class=\"${classMap({\n              \"nav-link\": true,\n              [`${parentVariantAttr}`]: parentVariantAttr,\n              active: this.active,\n              disabled: this.disabled\n            })}\"\n          >\n            ${parentVariantAttr === \"tabs-info-toggle\" ? tabsInfo : html`<slot></slot>`}\n          </div>\n        </li>\n      </ul>\n    `;\n  }\n}\n\nexport default SgdsTab;\n"],"names":["SgdsElement","html","classMap","tabStyle","__decorate","query","property","watch"],"mappings":";;;;;;;;;;;;;AAOA,IAAI,EAAE,GAAG,CAAC,CAAC;AACX;;;;;;;;;;;;AAYG;AACG,MAAO,OAAQ,SAAQA,sBAAW,CAAA;AAAxC,IAAA,WAAA,GAAA;;;QAKmB,IAAM,CAAA,MAAA,GAAG,EAAE,EAAE,CAAC;;AAEd,QAAA,IAAA,CAAA,WAAW,GAAG,CAAY,SAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;;QAG5B,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAGI,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAGf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KAwD9D;IAtDC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;KAClC;;AAGM,IAAA,KAAK,CAAC,OAAsB,EAAA;AACjC,QAAA,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KACzB;;IAGM,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;KACjB;;IAGD,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;KACpE;;IAGD,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;QACrE,IAAI,IAAI,CAAC,QAAQ;AAAE,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACxC;IAED,MAAM,GAAA;;QAEJ,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAC1D,QAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACjF,MAAM,QAAQ,GAAGC,QAAI,CAAA,CAAA;;;;;;KAMpB,CAAC;AACF,QAAA,OAAOA,QAAI,CAAA,CAAA;;oDAEqC,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;;AAEzD,mBAAA,EAAAC,oBAAQ,CAAC;AAChB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,CAAG,EAAA,iBAAiB,CAAE,CAAA,GAAG,iBAAiB;YAC3C,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;;cAEA,iBAAiB,KAAK,kBAAkB,GAAG,QAAQ,GAAGD,QAAI,CAAA,CAAe,aAAA,CAAA,CAAA;;;;KAIlF,CAAC;KACH;;AAtEM,OAAA,CAAA,MAAM,GAAG,CAACE,cAAQ,CAAC,CAAC;AAEPC,gBAAA,CAAA;IAAnBC,mBAAK,CAAC,WAAW,CAAC;AAAkB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAORD,gBAAA,CAAA;AAA5B,IAAAE,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGIF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGfF,gBAAA,CAAA;IAA3CE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAkB7DF,gBAAA,CAAA;IADCG,WAAK,CAAC,QAAQ,CAAC;AAGf,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA,CAAA;AAGDH,gBAAA,CAAA;IADCG,WAAK,CAAC,UAAU,CAAC;AAIjB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,sBAAA,EAAA,IAAA,CAAA;;;;;"}

package/components/Tab/sgds-tab.js

@@ -1,3 +1,4 @@
+'use client';
 import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { query, property } from 'lit/decorators.js';

package/components/Tab/sgds-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-tab.js","sources":["../../../src/components/Tab/sgds-tab.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport tabStyle from \"./tab.css\";\n\nlet id = 0;\n/**\n * @summary Tabs are used within tab group to activate the tab panels\n *\n * @slot default - The content of the tab. This is  available when variant attribute of `sgds-tab-group` is not specified or when it is `tabs-basic-toggle`\n *\n * @slot icon - The slot to place svg icons. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n * @slot count - The slot for count. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n * @slot label - The slot for label of tab. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n *\n * @csspart base - The base wrapper of tab\n *\n *\n */\nexport class SgdsTab extends SgdsElement {\n  static styles = [tabStyle];\n  /**@internal */\n  @query(\".nav-item\") tab: HTMLElement;\n  /**@internal */\n  private readonly attrId = ++id;\n  /**@internal */\n  private readonly componentId = `sgds-tab-${this.attrId}`;\n\n  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */\n  @property({ reflect: true }) panel = \"\";\n\n  /** Draws the tab in an active state. When used with tab group, this state is already managed. Use it to set the initial active tab on first load of page */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Disables the tab and prevents selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"tab\");\n  }\n\n  /** Sets focus to the tab. */\n  public focus(options?: FocusOptions) {\n    this.tab.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  public blur() {\n    this.tab.blur();\n  }\n  /**@internal */\n  @watch(\"active\")\n  handleActiveChange() {\n    this.setAttribute(\"aria-selected\", this.active ? \"true\" : \"false\");\n  }\n  /**@internal */\n  @watch(\"disabled\")\n  handleDisabledChange() {\n    this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n    if (this.disabled) this.active = false;\n  }\n\n  render() {\n    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    const parentVariantAttr = this.closest(\"sgds-tab-group\").getAttribute(\"variant\");\n    const tabsInfo = html`\n      <div class=\"tabs-info-label\">\n        <div><slot name=\"icon\"></slot></div>\n        <div><slot name=\"label\"></slot></div>\n      </div>\n      <div class=\"tabs-info-count\"><slot name=\"count\"></slot></div>\n    `;\n    return html`\n      <ul class=\"list-unstyled\">\n        <li part=\"base\" class=\"nav-item\" tabindex=${this.disabled ? \"-1\" : \"0\"}>\n          <div\n            class=\"${classMap({\n              \"nav-link\": true,\n              [`${parentVariantAttr}`]: parentVariantAttr,\n              active: this.active,\n              disabled: this.disabled\n            })}\"\n          >\n            ${parentVariantAttr === \"tabs-info-toggle\" ? tabsInfo : html`<slot></slot>`}\n          </div>\n        </li>\n      </ul>\n    `;\n  }\n}\n\nexport default SgdsTab;\n"],"names":["tabStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-tab.js","sources":["../../../src/components/Tab/sgds-tab.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport tabStyle from \"./tab.css\";\n\nlet id = 0;\n/**\n * @summary Tabs are used within tab group to activate the tab panels\n *\n * @slot default - The content of the tab. This is  available when variant attribute of `sgds-tab-group` is not specified or when it is `tabs-basic-toggle`\n *\n * @slot icon - The slot to place svg icons. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n * @slot count - The slot for count. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n * @slot label - The slot for label of tab. This is only available when variant attribute of `sgds-tab-group` is `tabs-info-toggle`\n *\n * @csspart base - The base wrapper of tab\n *\n *\n */\nexport class SgdsTab extends SgdsElement {\n  static styles = [tabStyle];\n  /**@internal */\n  @query(\".nav-item\") tab: HTMLElement;\n  /**@internal */\n  private readonly attrId = ++id;\n  /**@internal */\n  private readonly componentId = `sgds-tab-${this.attrId}`;\n\n  /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */\n  @property({ reflect: true }) panel = \"\";\n\n  /** Draws the tab in an active state. When used with tab group, this state is already managed. Use it to set the initial active tab on first load of page */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Disables the tab and prevents selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"tab\");\n  }\n\n  /** Sets focus to the tab. */\n  public focus(options?: FocusOptions) {\n    this.tab.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  public blur() {\n    this.tab.blur();\n  }\n  /**@internal */\n  @watch(\"active\")\n  handleActiveChange() {\n    this.setAttribute(\"aria-selected\", this.active ? \"true\" : \"false\");\n  }\n  /**@internal */\n  @watch(\"disabled\")\n  handleDisabledChange() {\n    this.setAttribute(\"aria-disabled\", this.disabled ? \"true\" : \"false\");\n    if (this.disabled) this.active = false;\n  }\n\n  render() {\n    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    const parentVariantAttr = this.closest(\"sgds-tab-group\").getAttribute(\"variant\");\n    const tabsInfo = html`\n      <div class=\"tabs-info-label\">\n        <div><slot name=\"icon\"></slot></div>\n        <div><slot name=\"label\"></slot></div>\n      </div>\n      <div class=\"tabs-info-count\"><slot name=\"count\"></slot></div>\n    `;\n    return html`\n      <ul class=\"list-unstyled\">\n        <li part=\"base\" class=\"nav-item\" tabindex=${this.disabled ? \"-1\" : \"0\"}>\n          <div\n            class=\"${classMap({\n              \"nav-link\": true,\n              [`${parentVariantAttr}`]: parentVariantAttr,\n              active: this.active,\n              disabled: this.disabled\n            })}\"\n          >\n            ${parentVariantAttr === \"tabs-info-toggle\" ? tabsInfo : html`<slot></slot>`}\n          </div>\n        </li>\n      </ul>\n    `;\n  }\n}\n\nexport default SgdsTab;\n"],"names":["tabStyle"],"mappings":";;;;;;;;;AAOA,IAAI,EAAE,GAAG,CAAC,CAAC;AACX;;;;;;;;;;;;AAYG;AACG,MAAO,OAAQ,SAAQ,WAAW,CAAA;AAAxC,IAAA,WAAA,GAAA;;;QAKmB,IAAM,CAAA,MAAA,GAAG,EAAE,EAAE,CAAC;;AAEd,QAAA,IAAA,CAAA,WAAW,GAAG,CAAY,SAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;;QAG5B,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAGI,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAGf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KAwD9D;IAtDC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;KAClC;;AAGM,IAAA,KAAK,CAAC,OAAsB,EAAA;AACjC,QAAA,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KACzB;;IAGM,IAAI,GAAA;AACT,QAAA,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;KACjB;;IAGD,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;KACpE;;IAGD,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;QACrE,IAAI,IAAI,CAAC,QAAQ;AAAE,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACxC;IAED,MAAM,GAAA;;QAEJ,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAC1D,QAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACjF,MAAM,QAAQ,GAAG,IAAI,CAAA,CAAA;;;;;;KAMpB,CAAC;AACF,QAAA,OAAO,IAAI,CAAA,CAAA;;oDAEqC,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;;AAEzD,mBAAA,EAAA,QAAQ,CAAC;AAChB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,CAAG,EAAA,iBAAiB,CAAE,CAAA,GAAG,iBAAiB;YAC3C,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;;cAEA,iBAAiB,KAAK,kBAAkB,GAAG,QAAQ,GAAG,IAAI,CAAA,CAAe,aAAA,CAAA,CAAA;;;;KAIlF,CAAC;KACH;;AAtEM,OAAA,CAAA,MAAM,GAAG,CAACA,QAAQ,CAAC,CAAC;AAEP,UAAA,CAAA;IAAnB,KAAK,CAAC,WAAW,CAAC;AAAkB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOR,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGI,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGf,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAkB7D,UAAA,CAAA;IADC,KAAK,CAAC,QAAQ,CAAC;AAGf,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA,CAAA;AAGD,UAAA,CAAA;IADC,KAAK,CAAC,UAAU,CAAC;AAIjB,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,sBAAA,EAAA,IAAA,CAAA;;;;"}

package/components/Tab/tab-group.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Tab/tab-group.cjs.js.map

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

package/components/Tab/tab-group.js

@@ -1,3 +1,4 @@
+'use client';
 import { css } from 'lit';
 
 var css_248z = css`.nav{display:flex;flex-wrap:wrap;list-style:none;margin-bottom:0;padding-left:0}.nav-tabs{border-bottom:none;gap:2rem}.sgds.nav-tabs[variant=tabs-basic-toggle]{gap:0}slot[name=nav][variant=tabs-basic-toggle]::slotted(sgds-tab){margin-left:-2px}`;

package/components/Tab/tab-group.js.map

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

package/components/Tab/tab-panel.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Tab/tab-panel.cjs.js.map

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

package/components/Tab/tab-panel.js

@@ -1,3 +1,4 @@
+'use client';
 import { css } from 'lit';
 
 var css_248z = css`:host{--tab-panel-padding-y:1rem;display:block}.tab-panel{display:block;padding:var(--tab-panel-padding-y) 0}.tab-panel:not(.tab-panel--active){display:none}`;

package/components/Tab/tab-panel.js.map

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

package/components/Tab/tab.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/components/Tab/tab.cjs.js.map

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

package/components/Tab/tab.js

@@ -1,3 +1,4 @@
+'use client';
 import { css } from 'lit';
 
 var css_248z = css`:host{display:inline-block}ul{margin-bottom:1rem;margin-top:0;padding-left:0}.list-unstyled{list-style:none}.nav-link{color:var(--sgds-body-color);cursor:pointer;display:block;padding:.5rem 1rem;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link.tabs-info-toggle{background-color:var(--sgds-body-bg);border:1px solid var(--sgds-gray-400);border-radius:.3125rem;min-width:11.875rem;padding:.75rem}.nav-link:not(.disabled).tabs-info-toggle.active,.nav-link:not(.disabled).tabs-info-toggle:hover{border-color:var(--sgds-primary);color:var(--sgds-primary);font-weight:700}.nav-link.tabs-info-toggle .tabs-info-label{display:flex;justify-content:space-between;text-align:right}.nav-link.tabs-info-toggle .tabs-info-count{text-align:right}.nav-link.tabs-basic-toggle{background-color:var(--sgds-body-bg);border:1px solid var(--sgds-gray-400);border-radius:0;padding:.5rem 1.5rem}.nav-link.tabs-basic-toggle slot{align-items:center;display:flex;gap:1rem}.nav-link:not(.disabled).tabs-basic-toggle.active,.nav-link:not(.disabled).tabs-basic-toggle:hover{background-color:var(--sgds-info);color:var(--sgds-white)}.nav-link.disabled{background-color:var(--sgds-gray-200);border-color:var(--sgds-gray-400);color:var(--sgds-gray-400);cursor:not-allowed}.nav-link:not(.tabs-basic-toggle):not(.tabs-info-toggle){background-color:transparent;border:none;padding-left:0;padding-right:0;padding-top:0}.nav-link:not(.disabled):not(.tabs-basic-toggle):not(.tabs-info-toggle).active,.nav-link:not(.disabled):not(.tabs-basic-toggle):not(.tabs-info-toggle):hover{background-color:transparent;border-bottom:.125rem solid var(--sgds-info);font-weight:700}.nav-link:not(.tabs-basic-toggle):not(.tabs-info-toggle).disabled{background-color:var(--sgds-gray-200);background-color:transparent;border-color:var(--sgds-gray-400);color:var(--sgds-gray-400);cursor:not-allowed}`;

package/components/Tab/tab.js.map

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

package/components/Table/sgds-table.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });