@kyndryl-design-system/shidoka-applications 1.2.4 → 1.3.0

package/components/reusable/tabs/index.d.ts

@@ -0,0 +1,4 @@
+export { Tabs } from './tabs';
+export { Tab } from './tab';
+export { TabPanel } from './tabPanel';
+//# sourceMappingURL=index.d.ts.map

package/components/reusable/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/components/reusable/tabs/index.js

@@ -0,0 +1,2 @@
+export{Tabs}from"./tabs.js";export{Tab}from"./tab.js";export{TabPanel}from"./tabPanel.js";
+//# sourceMappingURL=index.js.map

package/components/reusable/tabs/index.js.map

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

package/components/reusable/tabs/tab.d.ts

@@ -0,0 +1,66 @@
+import { LitElement } from 'lit';
+/**
+ * Tabs.
+ * @slot unnamed - Slot for tab button text.
+ */
+export declare class Tab extends LitElement {
+    static styles: import("lit").CSSResultGroup;
+    /** Tab ID, required. */
+    id: string;
+    /** Tab selected state. Must match Tab Panel visible state. */
+    selected: boolean;
+    /** Tab disabled state. */
+    disabled: boolean;
+    /** Size of the tab buttons. Inherited.
+     * @internal
+     */
+    private _size;
+    /** Vertical orientation. Inherited.
+     * @internal
+     */
+    private _vertical;
+    /** Tab style. Inherited.
+     * @internal
+     */
+    private _tabStyle;
+    /** aria role.
+     * @internal
+     */
+    role: string;
+    /** Make host tabbable.
+     * @internal
+     */
+    tabIndex: number;
+    /** aria-controls.
+     * @internal
+     */
+    'aria-selected': string;
+    /** aria-controls.
+     * @internal
+     */
+    'aria-controls': string;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Updates the 'aria-controls' and 'aria-selected' attributes based on changes to the
+     * 'id' and 'selected' properties, respectively.
+     * @param {any} changedProps - The `changedProps` parameter is an object that contains the properties
+     * that have changed in the component. It is used to determine which properties have been updated and
+     * perform specific actions based on those changes.
+     */
+    willUpdate(changedProps: any): void;
+    /**
+     * Dispatches a custom event called 'tab-activated' with the original event and tabId as details,
+     * if the tab is not selected.
+     * @param {any} e - The parameter "e" is an event object that represents the event that triggered the
+     * click event handler.
+     */
+    private _handleClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kyn-tab': Tab;
+    }
+}
+//# sourceMappingURL=tab.d.ts.map

package/components/reusable/tabs/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;GAGG;AACH,qBACa,GAAI,SAAQ,UAAU;IACjC,OAAgB,MAAM,+BAAW;IAEjC,wBAAwB;IAEf,EAAE,SAAM;IAEjB,8DAA8D;IAE9D,QAAQ,UAAS;IAEjB,0BAA0B;IAE1B,QAAQ,UAAS;IAEjB;;OAEG;IAEH,OAAO,CAAC,KAAK,CAAQ;IAErB;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAS;IAE1B;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAe;IAEhC;;OAEG;IAEM,IAAI,SAAS;IAEtB;;OAEG;IAEM,QAAQ,SAAK;IAEtB;;OAEG;IAEH,eAAe,SAAW;IAE1B;;OAEG;IAEH,eAAe,SAAM;IAEZ,MAAM;IAgBN,iBAAiB;IAKjB,oBAAoB;IAK7B;;;;;;OAMG;IACM,UAAU,CAAC,YAAY,EAAE,GAAG;IAWrC;;;;;OAKG;IACH,OAAO,CAAC,YAAY;CAUrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,GAAG,CAAC;KAChB;CACF"}

package/components/reusable/tabs/tab.js

@@ -0,0 +1,2 @@
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as s}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as o}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as l}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import d from"./tab.scss.js";let a=class extends s{constructor(){super(...arguments),this.id="",this.selected=!1,this.disabled=!1,this._size="md",this._vertical=!1,this._tabStyle="contained",this.role="tab",this.tabIndex=0,this["aria-selected"]="false",this["aria-controls"]=""}render(){const e={tab:!0,contained:"contained"===this._tabStyle,line:"line"===this._tabStyle,"size--sm":"sm"===this._size,"size--md":"md"===this._size,vertical:this._vertical,selected:this.selected,disabled:this.disabled};return t` <div class=${r(e)}><slot></slot></div> `}connectedCallback(){super.connectedCallback(),this.addEventListener("click",(e=>this._handleClick(e)))}disconnectedCallback(){this.removeEventListener("click",(e=>this._handleClick(e))),super.disconnectedCallback()}willUpdate(e){e.has("id")&&(this["aria-controls"]=this.id+"-panel"),e.has("selected")&&(this["aria-selected"]=this.selected.toString(),this.tabIndex=this.selected?0:-1)}_handleClick(e){if(!this.selected&&!this.disabled){const t=new CustomEvent("tab-activated",{bubbles:!0,composed:!0,detail:{origEvent:e,tabId:this.id}});this.dispatchEvent(t)}}};a.styles=d,e([o({type:String,reflect:!0})],a.prototype,"id",void 0),e([o({type:Boolean,reflect:!0})],a.prototype,"selected",void 0),e([o({type:Boolean})],a.prototype,"disabled",void 0),e([l()],a.prototype,"_size",void 0),e([l()],a.prototype,"_vertical",void 0),e([l()],a.prototype,"_tabStyle",void 0),e([o({type:String,reflect:!0})],a.prototype,"role",void 0),e([o({type:Number,reflect:!0})],a.prototype,"tabIndex",void 0),e([o({type:String,reflect:!0})],a.prototype,"aria-selected",void 0),e([o({type:String,reflect:!0})],a.prototype,"aria-controls",void 0),a=e([i("kyn-tab")],a);export{a as Tab};
+//# sourceMappingURL=tab.js.map

package/components/reusable/tabs/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sources":["../../../../src/components/reusable/tabs/tab.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabScss from './tab.scss';\n\n/**\n * Tabs.\n * @slot unnamed - Slot for tab button text.\n */\n@customElement('kyn-tab')\nexport class Tab extends LitElement {\n  static override styles = TabScss;\n\n  /** Tab ID, required. */\n  @property({ type: String, reflect: true })\n  override id = '';\n\n  /** Tab selected state. Must match Tab Panel visible state. */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /** Tab disabled state. */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Size of the tab buttons. Inherited.\n   * @internal\n   */\n  @state()\n  private _size = 'md';\n\n  /** Vertical orientation. Inherited.\n   * @internal\n   */\n  @state()\n  private _vertical = false;\n\n  /** Tab style. Inherited.\n   * @internal\n   */\n  @state()\n  private _tabStyle = 'contained';\n\n  /** aria role.\n   * @internal\n   */\n  @property({ type: String, reflect: true })\n  override role = 'tab';\n\n  /** Make host tabbable.\n   * @internal\n   */\n  @property({ type: Number, reflect: true })\n  override tabIndex = 0;\n\n  /** aria-controls.\n   * @internal\n   */\n  @property({ type: String, reflect: true })\n  'aria-selected' = 'false';\n\n  /** aria-controls.\n   * @internal\n   */\n  @property({ type: String, reflect: true })\n  'aria-controls' = '';\n\n  override render() {\n    const classes = {\n      tab: true,\n      contained: this._tabStyle === 'contained',\n      line: this._tabStyle === 'line',\n      'size--sm': this._size === 'sm',\n      'size--md': this._size === 'md',\n      // 'size--lg': this._size === 'lg',\n      vertical: this._vertical,\n      selected: this.selected,\n      disabled: this.disabled,\n    };\n\n    return html` <div class=${classMap(classes)}><slot></slot></div> `;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', (e) => this._handleClick(e));\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('click', (e) => this._handleClick(e));\n    super.disconnectedCallback();\n  }\n\n  /**\n   * Updates the 'aria-controls' and 'aria-selected' attributes based on changes to the\n   * 'id' and 'selected' properties, respectively.\n   * @param {any} changedProps - The `changedProps` parameter is an object that contains the properties\n   * that have changed in the component. It is used to determine which properties have been updated and\n   * perform specific actions based on those changes.\n   */\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('id')) {\n      this['aria-controls'] = this.id + '-panel';\n    }\n\n    if (changedProps.has('selected')) {\n      this['aria-selected'] = this.selected.toString();\n      this.tabIndex = this.selected ? 0 : -1;\n    }\n  }\n\n  /**\n   * Dispatches a custom event called 'tab-activated' with the original event and tabId as details,\n   * if the tab is not selected.\n   * @param {any} e - The parameter \"e\" is an event object that represents the event that triggered the\n   * click event handler.\n   */\n  private _handleClick(e: any) {\n    if (!this.selected && !this.disabled) {\n      const event = new CustomEvent('tab-activated', {\n        bubbles: true,\n        composed: true,\n        detail: { origEvent: e, tabId: this.id },\n      });\n      this.dispatchEvent(event);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-tab': Tab;\n  }\n}\n"],"names":["Tab","LitElement","constructor","this","id","selected","disabled","_size","_vertical","_tabStyle","role","tabIndex","render","classes","tab","contained","line","vertical","html","classMap","connectedCallback","super","addEventListener","e","_handleClick","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","toString","event","CustomEvent","bubbles","composed","detail","origEvent","tabId","dispatchEvent","styles","TabScss","__decorate","property","type","String","reflect","prototype","Boolean","state","Number","customElement"],"mappings":"yvBAUO,IAAMA,EAAN,cAAkBC,EAAlBC,kCAKIC,KAAEC,GAAG,GAIdD,KAAQE,UAAG,EAIXF,KAAQG,UAAG,EAMHH,KAAKI,MAAG,KAMRJ,KAASK,WAAG,EAMZL,KAASM,UAAG,YAMXN,KAAIO,KAAG,MAMPP,KAAQQ,SAAG,EAMpBR,KAAe,iBAAG,QAMlBA,KAAe,iBAAG,EA8DnB,CA5DUS,SACP,MAAMC,EAAU,CACdC,KAAK,EACLC,UAA8B,cAAnBZ,KAAKM,UAChBO,KAAyB,SAAnBb,KAAKM,UACX,WAA2B,OAAfN,KAAKI,MACjB,WAA2B,OAAfJ,KAAKI,MAEjBU,SAAUd,KAAKK,UACfH,SAAUF,KAAKE,SACfC,SAAUH,KAAKG,UAGjB,OAAOY,CAAI,eAAeC,EAASN,yBACpC,CAEQO,oBACPC,MAAMD,oBACNjB,KAAKmB,iBAAiB,SAAUC,GAAMpB,KAAKqB,aAAaD,IACzD,CAEQE,uBACPtB,KAAKuB,oBAAoB,SAAUH,GAAMpB,KAAKqB,aAAaD,KAC3DF,MAAMI,sBACP,CASQE,WAAWC,GACdA,EAAaC,IAAI,QACnB1B,KAAK,iBAAmBA,KAAKC,GAAK,UAGhCwB,EAAaC,IAAI,cACnB1B,KAAK,iBAAmBA,KAAKE,SAASyB,WACtC3B,KAAKQ,SAAWR,KAAKE,SAAW,GAAK,EAExC,CAQOmB,aAAaD,GACnB,IAAKpB,KAAKE,WAAaF,KAAKG,SAAU,CACpC,MAAMyB,EAAQ,IAAIC,YAAY,gBAAiB,CAC7CC,SAAS,EACTC,UAAU,EACVC,OAAQ,CAAEC,UAAWb,EAAGc,MAAOlC,KAAKC,MAEtCD,KAAKmC,cAAcP,EACpB,CACF,GAnHe/B,EAAMuC,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KAClB7C,EAAA8C,UAAA,UAAA,GAIjBL,EAAA,CADCC,EAAS,CAAEC,KAAMI,QAASF,SAAS,KACnB7C,EAAA8C,UAAA,gBAAA,GAIjBL,EAAA,CADCC,EAAS,CAAEC,KAAMI,WACD/C,EAAA8C,UAAA,gBAAA,GAMjBL,EAAA,CADCO,KACoBhD,EAAA8C,UAAA,aAAA,GAMrBL,EAAA,CADCO,KACyBhD,EAAA8C,UAAA,iBAAA,GAM1BL,EAAA,CADCO,KAC+BhD,EAAA8C,UAAA,iBAAA,GAMhCL,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KACb7C,EAAA8C,UAAA,YAAA,GAMtBL,EAAA,CADCC,EAAS,CAAEC,KAAMM,OAAQJ,SAAS,KACb7C,EAAA8C,UAAA,gBAAA,GAMtBL,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KACT7C,EAAA8C,UAAA,qBAAA,GAM1BL,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,KACd7C,EAAA8C,UAAA,qBAAA,GAvDV9C,EAAGyC,EAAA,CADfS,EAAc,YACFlD"}

package/components/reusable/tabs/tab.scss.js

@@ -0,0 +1,190 @@
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var r=e`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:root {
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
+}
+
+:host {
+  display: block;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  transition: outline-color 150ms ease-out;
+}
+
+:host(:focus) {
+  outline-color: var(--kd-color-border-focus);
+}
+
+:host([disabled]:focus) {
+  outline-color: transparent;
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  white-space: nowrap;
+  text-align: center;
+  border-bottom: 2px solid var(--kd-color-border-default);
+  background: var(--kd-color-background-ui-default);
+  transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
+}
+.tab.size--sm {
+  font-family: var(--kd-font-family-secondary);
+  font-size: var(--kd-font-size-utility-2-sm);
+  line-height: var(--kd-line-height-utility-2-sm);
+  font-weight: var(--kd-font-weight-regular);
+  letter-spacing: var(--kd-letter-spacing-5);
+  height: 32px;
+  padding: 7px 16px;
+}
+@media (min-width: 42rem) {
+  .tab.size--sm {
+    font-size: var(--kd-font-size-utility-2-md);
+    line-height: var(--kd-line-height-utility-2-md);
+  }
+}
+@media (min-width: 74rem) {
+  .tab.size--sm {
+    font-size: var(--kd-font-size-utility-2-lg);
+    line-height: var(--kd-line-height-utility-2-lg);
+  }
+}
+@media (min-width: 82rem) {
+  .tab.size--sm {
+    font-size: var(--kd-font-size-utility-2-xlg);
+    line-height: var(--kd-line-height-utility-2-xlg);
+  }
+}
+@media (min-width: 99rem) {
+  .tab.size--sm {
+    font-size: var(--kd-font-size-utility-2-max);
+    line-height: var(--kd-line-height-utility-2-max);
+  }
+}
+.tab.size--md {
+  height: 48px;
+  padding: 12px;
+}
+.tab.size--lg {
+  font-family: var(--kd-font-family-primary);
+  font-size: var(--kd-font-size-headline-8-sm);
+  line-height: var(--kd-line-height-headline-8-sm);
+  font-weight: var(--kd-font-weight-regular);
+  letter-spacing: var(--kd-letter-spacing-3);
+  font-weight: 300;
+  height: 56px;
+  padding: 14px 12px;
+}
+@media (min-width: 42rem) {
+  .tab.size--lg {
+    font-size: var(--kd-font-size-headline-8-md);
+    line-height: var(--kd-line-height-headline-8-md);
+  }
+}
+@media (min-width: 74rem) {
+  .tab.size--lg {
+    font-size: var(--kd-font-size-headline-8-lg);
+    line-height: var(--kd-line-height-headline-8-lg);
+  }
+}
+@media (min-width: 82rem) {
+  .tab.size--lg {
+    font-size: var(--kd-font-size-headline-8-xlg);
+    line-height: var(--kd-line-height-headline-8-xlg);
+  }
+}
+@media (min-width: 99rem) {
+  .tab.size--lg {
+    font-size: var(--kd-font-size-headline-8-max);
+    line-height: var(--kd-line-height-headline-8-max);
+  }
+}
+@media (min-width: 42rem) {
+  .tab.vertical {
+    border-bottom: none;
+    border-left: 2px solid var(--kd-color-border-default);
+    white-space: initial;
+    text-align: left;
+  }
+}
+.tab.contained {
+  border-bottom: none;
+  border-top: 2px solid transparent;
+  background: var(--kd-color-background-ui-soft);
+}
+@media (min-width: 42rem) {
+  .tab.contained.vertical {
+    border-top: none;
+    border-color: transparent;
+  }
+}
+.tab:hover {
+  color: var(--kd-color-text-link-hover);
+  border-color: var(--kd-color-border-ui-hover);
+  background-color: var(--kd-color-background-inverse-hover);
+}
+.tab:hover.contained {
+  border-color: transparent;
+}
+.tab:active {
+  color: var(--kd-color-text-pressed);
+  border-color: var(--kd-color-border-ui-hover);
+  background-color: var(--kd-color-background-inverse-hover);
+}
+.tab:active.contained {
+  border-color: transparent;
+}
+.tab.selected {
+  font-weight: 500;
+  color: var(--kd-color-text-link);
+  border-color: var(--kd-color-border-tertiary);
+}
+.tab.selected.size--lg {
+  font-weight: 400;
+}
+.tab.selected.contained {
+  background: var(--kd-color-background-ui-default);
+  border-color: var(--kd-color-border-tertiary);
+}
+.tab.selected.contained:hover {
+  background: var(--kd-color-background-inverse-hover);
+}
+.tab.disabled {
+  color: var(--kd-color-text-disabled);
+  cursor: not-allowed;
+  border-color: var(--kd-color-border-ui-disabled);
+}
+.tab.disabled:hover {
+  background: var(--kd-color-background-ui-default);
+}
+.tab.disabled.contained {
+  background: var(--kd-color-background-disabled);
+  border-color: transparent;
+}`;export{r as default};
+//# sourceMappingURL=tab.scss.js.map

package/components/reusable/tabs/tab.scss.js.map

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

package/components/reusable/tabs/tabPanel.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+/**
+ * Tabs.
+ * @slot unnamed - Slot for tab content.
+ */
+export declare class TabPanel extends LitElement {
+    static styles: import("lit").CSSResultGroup;
+    /** Matching Tab ID, required. */
+    tabId: string;
+    /** Tab Panel visible state.  Must match Tab selected state. */
+    visible: boolean;
+    /** Remove side padding (left/right) on tab panel. */
+    noPadding: boolean;
+    /** Vertical orientation. Inherited.
+     * @internal
+     */
+    private _vertical;
+    /** Tab Panel ID.
+     * @internal
+     */
+    id: string;
+    /** aria role.
+     * @internal
+     */
+    role: string;
+    /** aria-labelledby, derived from tabId.
+     * @internal
+     */
+    'aria-labelledby': string;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Updates the id and aria-labelledby properties based on the changed tabId property.
+     * @param {any} changedProps - The `changedProps` parameter is an object that contains the properties
+     * that have changed in the component. It is used to determine which properties have been updated and
+     * perform specific actions based on those changes.
+     */
+    willUpdate(changedProps: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kyn-tab-panel': TabPanel;
+    }
+}
+//# sourceMappingURL=tabPanel.d.ts.map

package/components/reusable/tabs/tabPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tabPanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;GAGG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,+BAAgB;IAEtC,iCAAiC;IAEjC,KAAK,SAAM;IAEX,+DAA+D;IAE/D,OAAO,UAAS;IAEhB,qDAAqD;IAErD,SAAS,UAAS;IAElB;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAS;IAE1B;;OAEG;IAEM,EAAE,SAAM;IAEjB;;OAEG;IAEM,IAAI,SAAc;IAE3B;;OAEG;IAEH,iBAAiB,SAAM;IAEd,MAAM;IAUf;;;;;OAKG;IACM,UAAU,CAAC,YAAY,EAAE,GAAG;CAMtC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,QAAQ,CAAC;KAC3B;CACF"}

package/components/reusable/tabs/tabPanel.js

@@ -0,0 +1,2 @@
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../../external/lit-element/lit-element.js';import{customElement as i}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as l}from'./../../../external/@lit/reactive-element/decorators/property.js';import{state as s}from'./../../../external/@lit/reactive-element/decorators/state.js';import'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as r}from'./../../../external/lit-html/directives/class-map.js';import a from"./tabPanel.scss.js";let d=class extends o{constructor(){super(...arguments),this.tabId="",this.visible=!1,this.noPadding=!1,this._vertical=!1,this.id="",this.role="tabpanel",this["aria-labelledby"]=""}render(){const e={"tab-panel":!0,vertical:this._vertical,"no-padding":this.noPadding};return t` <div class=${r(e)}><slot></slot></div> `}willUpdate(e){e.has("tabId")&&(this.id=this.tabId+"-panel",this["aria-labelledby"]=this.tabId)}};d.styles=a,e([l({type:String})],d.prototype,"tabId",void 0),e([l({type:Boolean,reflect:!0})],d.prototype,"visible",void 0),e([l({type:Boolean})],d.prototype,"noPadding",void 0),e([s()],d.prototype,"_vertical",void 0),e([l({type:String,reflect:!0})],d.prototype,"id",void 0),e([l({type:String,reflect:!0})],d.prototype,"role",void 0),e([l({type:String,reflect:!0})],d.prototype,"aria-labelledby",void 0),d=e([i("kyn-tab-panel")],d);export{d as TabPanel};
+//# sourceMappingURL=tabPanel.js.map

package/components/reusable/tabs/tabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabPanel.js","sources":["../../../../src/components/reusable/tabs/tabPanel.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabPanelScss from './tabPanel.scss';\n\n/**\n * Tabs.\n * @slot unnamed - Slot for tab content.\n */\n@customElement('kyn-tab-panel')\nexport class TabPanel extends LitElement {\n  static override styles = TabPanelScss;\n\n  /** Matching Tab ID, required. */\n  @property({ type: String })\n  tabId = '';\n\n  /** Tab Panel visible state.  Must match Tab selected state. */\n  @property({ type: Boolean, reflect: true })\n  visible = false;\n\n  /** Remove side padding (left/right) on tab panel. */\n  @property({ type: Boolean })\n  noPadding = false;\n\n  /** Vertical orientation. Inherited.\n   * @internal\n   */\n  @state()\n  private _vertical = false;\n\n  /** Tab Panel ID.\n   * @internal\n   */\n  @property({ type: String, reflect: true })\n  override id = '';\n\n  /** aria role.\n   * @internal\n   */\n  @property({ type: String, reflect: true })\n  override role = 'tabpanel';\n\n  /** aria-labelledby, derived from tabId.\n   * @internal\n   */\n  @property({ type: String, reflect: true })\n  'aria-labelledby' = '';\n\n  override render() {\n    const classes = {\n      'tab-panel': true,\n      vertical: this._vertical,\n      'no-padding': this.noPadding,\n    };\n\n    return html` <div class=${classMap(classes)}><slot></slot></div> `;\n  }\n\n  /**\n   * Updates the id and aria-labelledby properties based on the changed tabId property.\n   * @param {any} changedProps - The `changedProps` parameter is an object that contains the properties\n   * that have changed in the component. It is used to determine which properties have been updated and\n   * perform specific actions based on those changes.\n   */\n  override willUpdate(changedProps: any) {\n    if (changedProps.has('tabId')) {\n      this.id = this.tabId + '-panel';\n      this['aria-labelledby'] = this.tabId;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-tab-panel': TabPanel;\n  }\n}\n"],"names":["TabPanel","LitElement","constructor","this","tabId","visible","noPadding","_vertical","id","role","render","classes","vertical","html","classMap","willUpdate","changedProps","has","styles","TabPanelScss","__decorate","property","type","String","prototype","Boolean","reflect","state","customElement"],"mappings":"8vBAUO,IAAMA,EAAN,cAAuBC,EAAvBC,kCAKLC,KAAKC,MAAG,GAIRD,KAAOE,SAAG,EAIVF,KAASG,WAAG,EAMJH,KAASI,WAAG,EAMXJ,KAAEK,GAAG,GAMLL,KAAIM,KAAG,WAMhBN,KAAiB,mBAAG,EAwBrB,CAtBUO,SACP,MAAMC,EAAU,CACd,aAAa,EACbC,SAAUT,KAAKI,UACf,aAAcJ,KAAKG,WAGrB,OAAOO,CAAI,eAAeC,EAASH,yBACpC,CAQQI,WAAWC,GACdA,EAAaC,IAAI,WACnBd,KAAKK,GAAKL,KAAKC,MAAQ,SACvBD,KAAK,mBAAqBA,KAAKC,MAElC,GA3DeJ,EAAMkB,OAAGC,EAIzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UACPvB,EAAAwB,UAAA,aAAA,GAIXJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,QAASC,SAAS,KACpB1B,EAAAwB,UAAA,eAAA,GAIhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WACAzB,EAAAwB,UAAA,iBAAA,GAMlBJ,EAAA,CADCO,KACyB3B,EAAAwB,UAAA,iBAAA,GAM1BJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQG,SAAS,KAClB1B,EAAAwB,UAAA,UAAA,GAMjBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQG,SAAS,KACR1B,EAAAwB,UAAA,YAAA,GAM3BJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQG,SAAS,KACZ1B,EAAAwB,UAAA,uBAAA,GArCZxB,EAAQoB,EAAA,CADpBQ,EAAc,kBACF5B"}

package/components/reusable/tabs/tabPanel.scss.js

@@ -0,0 +1,27 @@
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var t=e`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: none;
+}
+
+:host([visible]) {
+  display: block;
+}
+
+.tab-panel {
+  padding: 24px 12px;
+}
+.tab-panel.no-padding {
+  padding: 24px 0;
+}
+.tab-panel.vertical {
+  padding: 12px 24px;
+}
+.tab-panel.vertical.no-padding {
+  padding: 12px 24px;
+}`;export{t as default};
+//# sourceMappingURL=tabPanel.scss.js.map

package/components/reusable/tabs/tabPanel.scss.js.map

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

package/components/reusable/tabs/tabs.d.ts

@@ -0,0 +1,67 @@
+import { LitElement } from 'lit';
+/**
+ * Tabs.
+ * @slot unnamed - Slot for kyn-tab-panel components.
+ * @slot tabs - Slot for kyn-tab components.
+ * @fires on-change - Emits the new selected Tab ID when switching tabs.
+ */
+export declare class Tabs extends LitElement {
+    static styles: import("lit").CSSResultGroup;
+    /** Tab style. `'contained'` or `'line'`. */
+    tabStyle: string;
+    /** Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px. */
+    tabSize: string;
+    /** Vertical orientation. */
+    vertical: boolean;
+    /** Queries for slotted tabs.
+     * @internal
+     */
+    _tabs: any;
+    /** Queries for slotted tab panels.
+     * @internal
+     */
+    _tabPanels: any;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changedProps: any): void;
+    private _handleSlotChangeTabs;
+    private _updateChildren;
+    /**
+     * Updates children and emits a change event based on the provided
+     * event details when a child kyn-tab is clicked.
+     * @param {any} e - The parameter "e" is an event object that contains information about the event
+     * that triggered the handleChange function.
+     */
+    private _handleChange;
+    /**
+     * Updates the selected property of tabs and the visible property of tab panels based on
+     * the selected tab ID.
+     * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of
+     * the tab that is currently selected.
+     */
+    private _updateChildrenSelection;
+    /**
+     * Creates and dispatches a custom event called 'on-change' with the provided original event and
+     * selected tab ID as details.
+     * @param {any} origEvent - The origEvent parameter is the original event object that triggered the
+     * change event. It could be any type of event object, such as a click event or a keydown event.
+     * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of
+     * the selected tab.
+     */
+    private _emitChangeEvent;
+    /**
+     * Handles keyboard events for navigating between tabs.
+     * @param {any} e - The parameter `e` is an event object that represents the keyboard event. It
+     * contains information about the keyboard event, such as the key code of the pressed key.
+     * @returns In this code, the function `_handleKeyboard` returns nothing in all cases
+     * except when the `keyCode` matches the left or right arrow key codes.
+     */
+    private _handleKeyboard;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kyn-tabs': Tabs;
+    }
+}
+//# sourceMappingURL=tabs.d.ts.map

package/components/reusable/tabs/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC;;;;;GAKG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,+BAAY;IAElC,4CAA4C;IAE5C,QAAQ,SAAe;IAEvB,kEAAkE;IAElE,OAAO,SAAQ;IAEf,4BAA4B;IAE5B,QAAQ,UAAS;IAEjB;;OAEG;IAEH,KAAK,EAAG,GAAG,CAAC;IAEZ;;OAEG;IAEH,UAAU,EAAG,GAAG,CAAC;IAER,MAAM;IA6BN,iBAAiB;IAKjB,oBAAoB;IAKpB,UAAU,CAAC,YAAY,EAAE,GAAG;IAUrC,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,eAAe;IAYvB;;;;;OAKG;IACH,OAAO,CAAC,aAAa;IAMrB;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB;IAYhC;;;;;;;OAOG;IACH,OAAO,CAAC,gBAAgB;IAOxB;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;CAoDxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,IAAI,CAAC;KAClB;CACF"}

package/components/reusable/tabs/tabs.js

@@ -0,0 +1,16 @@
+import{__decorate as e}from"../../../_virtual/_tslib.js";import'./../../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../../external/lit-html/lit-html.js';import{LitElement as s}from'./../../../external/lit-element/lit-element.js';import{customElement as a}from'./../../../external/@lit/reactive-element/decorators/custom-element.js';import{property as i}from'./../../../external/@lit/reactive-element/decorators/property.js';import{queryAssignedElements as l}from'./../../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as n}from'./../../../external/lit-html/directives/class-map.js';import o from"./tabs.scss.js";let d=class extends s{constructor(){super(...arguments),this.tabStyle="contained",this.tabSize="md",this.vertical=!1}render(){const e={wrapper:!0,vertical:this.vertical},s={tabs:!0,contained:"contained"===this.tabStyle,line:"line"===this.tabStyle};return t`
+      <div class=${n(e)}>
+        <div
+          class=${n(s)}
+          role="tablist"
+          @keydown=${e=>this._handleKeyboard(e)}
+        >
+          <slot name="tabs" @slotchange=${this._handleSlotChangeTabs}></slot>
+        </div>
+
+        <div class="panels">
+          <slot></slot>
+        </div>
+      </div>
+    `}connectedCallback(){super.connectedCallback(),this.addEventListener("tab-activated",(e=>this._handleChange(e)))}disconnectedCallback(){this.removeEventListener("tab-activated",(e=>this._handleChange(e))),super.disconnectedCallback()}willUpdate(e){(e.has("tabSize")||e.has("vertical")||e.has("tabStyle"))&&this._updateChildren()}_handleSlotChangeTabs(){this._updateChildren()}_updateChildren(){this._tabs.forEach((e=>{e._size=this.tabSize,e._vertical=this.vertical,e._tabStyle=this.tabStyle})),this._tabPanels.forEach((e=>{e._vertical=this.vertical}))}_handleChange(e){e.stopPropagation(),this._updateChildrenSelection(e.detail.tabId),this._emitChangeEvent(e.detail.origEvent,e.detail.tabId)}_updateChildrenSelection(e){this._tabs.forEach((t=>{t.selected=t.id===e})),this._tabPanels.forEach((t=>{t.visible=t.tabId===e}))}_emitChangeEvent(e,t){const s=new CustomEvent("on-change",{detail:{origEvent:e,selectedTabId:t}});this.dispatchEvent(s)}_handleKeyboard(e){const t=this._tabs.length,s=this._tabs.findIndex((e=>e.selected));switch(e.keyCode){case 37:case 38:{let a=0===s?t-1:s-1,i=this._tabs[a];return i.disabled&&(a=0===a?t-1:a-1,i=this._tabs[a]),i.focus(),this._updateChildrenSelection(i.id),void this._emitChangeEvent(e,i.id)}case 39:case 40:{let a=s===t-1?0:s+1,i=this._tabs[a];return i.disabled&&(a=a===t-1?0:a+1,i=this._tabs[a]),i.focus(),this._updateChildrenSelection(i.id),void this._emitChangeEvent(e,i.id)}default:return}}};d.styles=o,e([i({type:String})],d.prototype,"tabStyle",void 0),e([i({type:String})],d.prototype,"tabSize",void 0),e([i({type:Boolean})],d.prototype,"vertical",void 0),e([l({slot:"tabs",selector:"kyn-tab"})],d.prototype,"_tabs",void 0),e([l({selector:"kyn-tab-panel"})],d.prototype,"_tabPanels",void 0),d=e([a("kyn-tabs")],d);export{d as Tabs};
+//# sourceMappingURL=tabs.js.map

package/components/reusable/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../../src/components/reusable/tabs/tabs.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport {\n  customElement,\n  property,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabsScss from './tabs.scss';\n\n/**\n * Tabs.\n * @slot unnamed - Slot for kyn-tab-panel components.\n * @slot tabs - Slot for kyn-tab components.\n * @fires on-change - Emits the new selected Tab ID when switching tabs.\n */\n@customElement('kyn-tabs')\nexport class Tabs extends LitElement {\n  static override styles = TabsScss;\n\n  /** Tab style. `'contained'` or `'line'`. */\n  @property({ type: String })\n  tabStyle = 'contained';\n\n  /** Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px. */\n  @property({ type: String })\n  tabSize = 'md';\n\n  /** Vertical orientation. */\n  @property({ type: Boolean })\n  vertical = false;\n\n  /** Queries for slotted tabs.\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'tabs', selector: 'kyn-tab' })\n  _tabs!: any;\n\n  /** Queries for slotted tab panels.\n   * @internal\n   */\n  @queryAssignedElements({ selector: 'kyn-tab-panel' })\n  _tabPanels!: any;\n\n  override render() {\n    const wrapperClasses = {\n      wrapper: true,\n      vertical: this.vertical,\n    };\n\n    const tabsClasses = {\n      tabs: true,\n      contained: this.tabStyle === 'contained',\n      line: this.tabStyle === 'line',\n    };\n\n    return html`\n      <div class=${classMap(wrapperClasses)}>\n        <div\n          class=${classMap(tabsClasses)}\n          role=\"tablist\"\n          @keydown=${(e: any) => this._handleKeyboard(e)}\n        >\n          <slot name=\"tabs\" @slotchange=${this._handleSlotChangeTabs}></slot>\n        </div>\n\n        <div class=\"panels\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('tab-activated', (e) => this._handleChange(e));\n  }\n\n  override disconnectedCallback() {\n    this.removeEventListener('tab-activated', (e) => this._handleChange(e));\n    super.disconnectedCallback();\n  }\n\n  override willUpdate(changedProps: any) {\n    if (\n      changedProps.has('tabSize') ||\n      changedProps.has('vertical') ||\n      changedProps.has('tabStyle')\n    ) {\n      this._updateChildren();\n    }\n  }\n\n  private _handleSlotChangeTabs() {\n    this._updateChildren();\n  }\n\n  private _updateChildren() {\n    this._tabs.forEach((tab: any) => {\n      tab._size = this.tabSize;\n      tab._vertical = this.vertical;\n      tab._tabStyle = this.tabStyle;\n    });\n\n    this._tabPanels.forEach((tabPanel: any) => {\n      tabPanel._vertical = this.vertical;\n    });\n  }\n\n  /**\n   * Updates children and emits a change event based on the provided\n   * event details when a child kyn-tab is clicked.\n   * @param {any} e - The parameter \"e\" is an event object that contains information about the event\n   * that triggered the handleChange function.\n   */\n  private _handleChange(e: any) {\n    e.stopPropagation();\n    this._updateChildrenSelection(e.detail.tabId);\n    this._emitChangeEvent(e.detail.origEvent, e.detail.tabId);\n  }\n\n  /**\n   * Updates the selected property of tabs and the visible property of tab panels based on\n   * the selected tab ID.\n   * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n   * the tab that is currently selected.\n   */\n  private _updateChildrenSelection(selectedTabId: string) {\n    // update tabs selected prop\n    this._tabs.forEach((tab: any) => {\n      tab.selected = tab.id === selectedTabId;\n    });\n\n    // update tab-panels visible prop\n    this._tabPanels.forEach((tabPanel: any) => {\n      tabPanel.visible = tabPanel.tabId === selectedTabId;\n    });\n  }\n\n  /**\n   * Creates and dispatches a custom event called 'on-change' with the provided original event and\n   * selected tab ID as details.\n   * @param {any} origEvent - The origEvent parameter is the original event object that triggered the\n   * change event. It could be any type of event object, such as a click event or a keydown event.\n   * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n   * the selected tab.\n   */\n  private _emitChangeEvent(origEvent: any, selectedTabId: string) {\n    const event = new CustomEvent('on-change', {\n      detail: { origEvent: origEvent, selectedTabId: selectedTabId },\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Handles keyboard events for navigating between tabs.\n   * @param {any} e - The parameter `e` is an event object that represents the keyboard event. It\n   * contains information about the keyboard event, such as the key code of the pressed key.\n   * @returns In this code, the function `_handleKeyboard` returns nothing in all cases\n   * except when the `keyCode` matches the left or right arrow key codes.\n   */\n  private _handleKeyboard(e: any) {\n    const LEFT_ARROW_KEY_CODE = 37;\n    const UP_ARROW_KEY_CODE = 38;\n    const RIGHT_ARROW_KEY_CODE = 39;\n    const DOWN_ARROW_KEY_CODE = 40;\n    const TabCount = this._tabs.length;\n    const SelectedTabIndex = this._tabs.findIndex((tab: any) => tab.selected);\n\n    switch (e.keyCode) {\n      case LEFT_ARROW_KEY_CODE:\n      case UP_ARROW_KEY_CODE: {\n        // activate previous tab\n        let prevIndex =\n          SelectedTabIndex === 0 ? TabCount - 1 : SelectedTabIndex - 1;\n        let prevTab = this._tabs[prevIndex];\n\n        if (prevTab.disabled) {\n          prevIndex = prevIndex === 0 ? TabCount - 1 : prevIndex - 1;\n          prevTab = this._tabs[prevIndex];\n        }\n\n        prevTab.focus();\n\n        this._updateChildrenSelection(prevTab.id);\n        this._emitChangeEvent(e, prevTab.id);\n\n        return;\n      }\n      case RIGHT_ARROW_KEY_CODE:\n      case DOWN_ARROW_KEY_CODE: {\n        // activate next tab\n        let nextIndex =\n          SelectedTabIndex === TabCount - 1 ? 0 : SelectedTabIndex + 1;\n        let nextTab = this._tabs[nextIndex];\n\n        if (nextTab.disabled) {\n          nextIndex = nextIndex === TabCount - 1 ? 0 : nextIndex + 1;\n          nextTab = this._tabs[nextIndex];\n        }\n\n        nextTab.focus();\n\n        this._updateChildrenSelection(nextTab.id);\n        this._emitChangeEvent(e, nextTab.id);\n\n        return;\n      }\n      default: {\n        return;\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-tabs': Tabs;\n  }\n}\n"],"names":["Tabs","LitElement","constructor","this","tabStyle","tabSize","vertical","render","wrapperClasses","wrapper","tabsClasses","tabs","contained","line","html","classMap","e","_handleKeyboard","_handleSlotChangeTabs","connectedCallback","super","addEventListener","_handleChange","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","_updateChildren","_tabs","forEach","tab","_size","_vertical","_tabStyle","_tabPanels","tabPanel","stopPropagation","_updateChildrenSelection","detail","tabId","_emitChangeEvent","origEvent","selectedTabId","selected","id","visible","event","CustomEvent","dispatchEvent","TabCount","length","SelectedTabIndex","findIndex","keyCode","prevIndex","prevTab","disabled","focus","nextIndex","nextTab","styles","TabsScss","__decorate","property","type","String","prototype","Boolean","queryAssignedElements","slot","selector","customElement"],"mappings":"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"}

package/components/reusable/tabs/tabs.scss.js

@@ -0,0 +1,74 @@
+import'./../../../external/@lit/reactive-element/reactive-element.js';import'./../../../external/lit-html/lit-html.js';import'./../../../external/lit-element/lit-element.js';import{css as e}from'./../../../external/@lit/reactive-element/css-tag.js';var t=e`*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:root {
+  --kd-current-breakpoint: sm;
+}
+@media (min-width: 42rem) {
+  :root {
+    --kd-current-breakpoint: md;
+  }
+}
+@media (min-width: 74rem) {
+  :root {
+    --kd-current-breakpoint: lg;
+  }
+}
+@media (min-width: 82rem) {
+  :root {
+    --kd-current-breakpoint: xl;
+  }
+}
+@media (min-width: 99rem) {
+  :root {
+    --kd-current-breakpoint: max;
+  }
+}
+
+:host {
+  display: block;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+}
+@media (min-width: 42rem) {
+  .wrapper.vertical {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+}
+
+.tabs {
+  display: flex;
+  gap: 2px;
+  overflow-x: auto;
+}
+.tabs.contained::after {
+  content: "";
+  background: var(--kd-color-background-ui-soft);
+  flex-grow: 1;
+}
+.tabs.line::after {
+  content: "";
+  border-bottom: 2px solid var(--kd-color-border-default);
+  flex-grow: 1;
+}
+@media (min-width: 42rem) {
+  .vertical .tabs {
+    flex-direction: column;
+    overflow-x: initial;
+  }
+  .vertical .tabs.line::after {
+    content: none;
+  }
+}
+
+.panels {
+  flex-grow: 1;
+}`;export{t as default};
+//# sourceMappingURL=tabs.scss.js.map

package/components/reusable/tabs/tabs.scss.js.map

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

package/index.d.ts

@@ -16,6 +16,7 @@ export { Table } from './components/reusable/table';
 export { DataTable } from './components/reusable/table/data-table';
 export { Pagination } from './components/reusable/pagination';
 export { OverflowMenu, OverflowMenuItem, } from './components/reusable/overflowMenu';
+export { Tabs, Tab, TabPanel } from './components/reusable/tabs';
 export { Modal } from './components/reusable/modal';
 export { Tooltip } from './components/reusable/tooltip';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,SAAS,EACT,UAAU,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,GAChB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EACL,WAAW,EACX,gBAAgB,GACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EACL,YAAY,EACZ,gBAAgB,GACjB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,SAAS,EACT,UAAU,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,GAChB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EACL,WAAW,EACX,gBAAgB,GACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAChF,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EACL,YAAY,EACZ,gBAAgB,GACjB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC"}

package/index.js

@@ -1,2 +1,2 @@
-export{Header}from"./components/global/header/header.js";export{HeaderNav}from"./components/global/header/headerNav.js";export{HeaderLink}from"./components/global/header/headerLink.js";export{HeaderFlyouts}from"./components/global/header/headerFlyouts.js";export{HeaderFlyout}from"./components/global/header/headerFlyout.js";export{HeaderAvatar}from"./components/global/header/headerAvatar.js";export{HeaderPanel}from"./components/global/header/headerPanel.js";export{HeaderPanelLink}from"./components/global/header/headerPanelLink.js";export{LocalNav}from"./components/global/localNav/localNav.js";export{LocalNavLink}from"./components/global/localNav/localNavLink.js";export{Footer}from"./components/global/footer/footer.js";export{FooterNav}from"./components/global/footer/footerNav.js";export{FooterNavLink}from"./components/global/footer/footerLink.js";export{UiShell}from"./components/global/uiShell/uiShell.js";export{RadioButton}from"./components/reusable/radioButton/radioButton.js";export{RadioButtonGroup}from"./components/reusable/radioButton/radioButtonGroup.js";export{Checkbox}from"./components/reusable/checkbox/checkbox.js";export{CheckboxGroup}from"./components/reusable/checkbox/checkboxGroup.js";export{TextInput}from"./components/reusable/textInput/textInput.js";export{TextArea}from"./components/reusable/textArea/textArea.js";export{ToggleButton}from"./components/reusable/toggleButton/toggleButton.js";export{TimePicker}from"./components/reusable/timepicker/timepicker.js";export{Dropdown}from"./components/reusable/dropdown/dropdown.js";export{DropdownOption}from"./components/reusable/dropdown/dropdownOption.js";export{DatePicker}from"./components/reusable/datePicker/datepicker.js";export{DateRangePicker}from"./components/reusable/daterangepicker/daterangepicker.js";export{BreadcrumbItem}from"./components/reusable/breadcrumbs/breadcrumbItem.js";export{Breadcrumbs}from"./components/reusable/breadcrumbs/breadcrumbs.js";export{Table}from"./components/reusable/table/Table.js";import"./components/reusable/table/table-cell.js";import"./components/reusable/table/table-row.js";import"./components/reusable/table/table-body.js";import"./components/reusable/table/table-head.js";import"./components/reusable/table/table-header.js";import"./components/reusable/table/table-footer.js";import"./components/reusable/table/table-toolbar.js";import"./components/reusable/table/table-container.js";export{Pagination}from"./components/reusable/pagination/Pagination.js";import"./components/reusable/pagination/pagination-items-range.js";import"./components/reusable/pagination/pagination-page-size-dropdown.js";import"./components/reusable/pagination/pagination-navigation-buttons.js";export{DataTable}from"./components/reusable/table/data-table.js";export{OverflowMenu}from"./components/reusable/overflowMenu/overflowMenu.js";export{OverflowMenuItem}from"./components/reusable/overflowMenu/overflowMenuItem.js";export{Modal}from"./components/reusable/modal/modal.js";export{Tooltip}from"./components/reusable/tooltip/tooltip.js";
+export{Header}from"./components/global/header/header.js";export{HeaderNav}from"./components/global/header/headerNav.js";export{HeaderLink}from"./components/global/header/headerLink.js";export{HeaderFlyouts}from"./components/global/header/headerFlyouts.js";export{HeaderFlyout}from"./components/global/header/headerFlyout.js";export{HeaderAvatar}from"./components/global/header/headerAvatar.js";export{HeaderPanel}from"./components/global/header/headerPanel.js";export{HeaderPanelLink}from"./components/global/header/headerPanelLink.js";export{LocalNav}from"./components/global/localNav/localNav.js";export{LocalNavLink}from"./components/global/localNav/localNavLink.js";export{Footer}from"./components/global/footer/footer.js";export{FooterNav}from"./components/global/footer/footerNav.js";export{FooterNavLink}from"./components/global/footer/footerLink.js";export{UiShell}from"./components/global/uiShell/uiShell.js";export{RadioButton}from"./components/reusable/radioButton/radioButton.js";export{RadioButtonGroup}from"./components/reusable/radioButton/radioButtonGroup.js";export{Checkbox}from"./components/reusable/checkbox/checkbox.js";export{CheckboxGroup}from"./components/reusable/checkbox/checkboxGroup.js";export{TextInput}from"./components/reusable/textInput/textInput.js";export{TextArea}from"./components/reusable/textArea/textArea.js";export{ToggleButton}from"./components/reusable/toggleButton/toggleButton.js";export{TimePicker}from"./components/reusable/timepicker/timepicker.js";export{Dropdown}from"./components/reusable/dropdown/dropdown.js";export{DropdownOption}from"./components/reusable/dropdown/dropdownOption.js";export{DatePicker}from"./components/reusable/datePicker/datepicker.js";export{DateRangePicker}from"./components/reusable/daterangepicker/daterangepicker.js";export{BreadcrumbItem}from"./components/reusable/breadcrumbs/breadcrumbItem.js";export{Breadcrumbs}from"./components/reusable/breadcrumbs/breadcrumbs.js";export{Table}from"./components/reusable/table/Table.js";import"./components/reusable/table/table-cell.js";import"./components/reusable/table/table-row.js";import"./components/reusable/table/table-body.js";import"./components/reusable/table/table-head.js";import"./components/reusable/table/table-header.js";import"./components/reusable/table/table-footer.js";import"./components/reusable/table/table-toolbar.js";import"./components/reusable/table/table-container.js";export{Pagination}from"./components/reusable/pagination/Pagination.js";import"./components/reusable/pagination/pagination-items-range.js";import"./components/reusable/pagination/pagination-page-size-dropdown.js";import"./components/reusable/pagination/pagination-navigation-buttons.js";export{DataTable}from"./components/reusable/table/data-table.js";export{OverflowMenu}from"./components/reusable/overflowMenu/overflowMenu.js";export{OverflowMenuItem}from"./components/reusable/overflowMenu/overflowMenuItem.js";export{Tabs}from"./components/reusable/tabs/tabs.js";export{Tab}from"./components/reusable/tabs/tab.js";export{TabPanel}from"./components/reusable/tabs/tabPanel.js";export{Modal}from"./components/reusable/modal/modal.js";export{Tooltip}from"./components/reusable/tooltip/tooltip.js";
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "Shidoka Web Components for Applications",
   "main": "index.js",
   "type": "module",
@@ -33,7 +33,7 @@
     "query-selector-shadow-dom": "^1.0.1"
   },
   "peerDependencies": {
-    "@kyndryl-design-system/shidoka-foundation": "^1.3.4"
+    "@kyndryl-design-system/shidoka-foundation": "^1.3.5"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -44,7 +44,7 @@
     "@commitlint/cli": "^17.4.4",
     "@commitlint/config-conventional": "^17.4.4",
     "@custom-elements-manifest/analyzer": "^0.6.8",
-    "@kyndryl-design-system/shidoka-foundation": "^1.3.4",
+    "@kyndryl-design-system/shidoka-foundation": "^1.3.5",
     "@open-wc/testing": "^3.1.7",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^11.0.0",