udp-stencil-component-library 25.18.1-beta.5 → 25.18.1-beta.6

package/dist/collection/components/my-component/UI/data-display/cards/udp-card/udp-card.js

@@ -4,11 +4,7 @@ export class UdpCard {
         /**
          * The variant to use.
          */
-        this.variant = 'elevated';
-        /**
-         * The adornmentStatus of the card.
-         */
-        this.adornmentStatus = 'success';
+        this.variant = 'outlined';
         /**
          * If true, the header title and subheader won't be wrapped by Typography component
          */
@@ -30,10 +26,11 @@ export class UdpCard {
         const renderHeader = !this.hasSlottedContent('header') && (this.cardTitle || this.subheader || this.avatar || this.headerAction);
         const renderMedia = !this.hasSlottedContent('media') && this.mediaImage;
         // const hasDefaultContent = !!this.el.querySelector(':not([slot])');
-        const mainContent = (h(Fragment, { key: '1a13594f0eaa3194038e3681b0edd3b1623d035b' }, renderMedia ? h("udp-card-media", { image: this.mediaImage, title: this.mediaTitle }) : h("slot", { name: "media" }), renderHeader ? (h("udp-card-header", { cardTitle: this.cardTitle, subheader: this.subheader, avatar: this.avatar, action: this.headerAction, disableTypography: this.disableHeaderTypography, onTitleClick: this.onTitleClick })) : (h("slot", { name: "header" })), h("udp-card-content", { key: '7750ed102abd94ee3fe4c19e2274dee87b86dbc6', disableGutter: this.disableContentGutter, disablePadding: this.disableContentPadding }, h("slot", { key: '7c2d8419bad5a9d2aca603973839603465faceac' }))));
-        return (h(Host, { key: 'bd68bde73553f6e24fc488b69245f84150dfa3cb', class: {
-                [this.variant]: true,
-            } }, this.adornmentStatus && h("udp-adornment", { key: '63f16cfc648b2e218be705e32b64cfca5c5cee01', status: this.adornmentStatus }), mainContent, this.actions && h("udp-card-actions", { key: 'a9e4d0ef869a7b5d264a15b53b15077482b9fff5' }, this.actions)));
+        const mainContent = (h(Fragment, { key: 'b7fc40fddaccf8e1f7b065a1f10759a2f4395d84' }, renderMedia ? h("udp-card-media", { image: this.mediaImage, title: this.mediaTitle }) : h("slot", { name: "media" }), renderHeader ? (h("udp-card-header", { cardTitle: this.cardTitle, subheader: this.subheader, avatar: this.avatar, action: this.headerAction, disableTypography: this.disableHeaderTypography, onTitleClick: this.onTitleClick })) : (h("slot", { name: "header" })), h("udp-card-content", { key: 'a7380ff44692ad0123dc52def8b9b49e7b8c4617', disableGutter: this.disableContentGutter, disablePadding: this.disableContentPadding }, h("slot", { key: '156cfbd696987a827f44a6cd5e5be838592c242f' }))));
+        return (h(Host, { key: 'b2fcc1723f6cd77e67bd5280fef6ae935626afb5', class: {
+                [this.variant]: true, // This adds 'elevated' or 'outlined'
+                'elevation-1': this.variant === 'elevated', // This adds a default shadow
+            } }, this.adornmentStatus && h("udp-adornment", { key: '6355f98f462f2b8a7a300d52cc1d002834b00dae', status: this.adornmentStatus }), mainContent, this.actions && h("udp-card-actions", { key: '9843f998eae158c58e1c2fe04e6f0049f3034ff3' }, this.actions)));
     }
     static get is() { return "udp-card"; }
     static get encapsulation() { return "shadow"; }
@@ -67,7 +64,7 @@ export class UdpCard {
                 "setter": false,
                 "reflect": false,
                 "attribute": "variant",
-                "defaultValue": "'elevated'"
+                "defaultValue": "'outlined'"
             },
             "adornmentStatus": {
                 "type": "string",
@@ -86,8 +83,7 @@ export class UdpCard {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "adornment-status",
-                "defaultValue": "'success'"
+                "attribute": "adornment-status"
             },
             "cardTitle": {
                 "type": "string",

package/dist/collection/components/my-component/UI/data-display/cards/udp-card/udp-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"udp-card.js","sourceRoot":"","sources":["../../../../../../../src/components/my-component/UI/data-display/cards/udp-card/udp-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAS,OAAO,EAAE,MAAM,eAAe,CAAC;AAOnF,MAAM,OAAO,OAAO;IALpB;QAQE;;WAEG;QACK,YAAO,GAA4B,UAAU,CAAC;QAEtD;;WAEG;QACK,oBAAe,GAA6C,SAAS,CAAC;QAsB9E;;WAEG;QACK,4BAAuB,GAAa,KAAK,CAAC;QAiBlD;;WAEG;QACK,yBAAoB,GAAY,KAAK,CAAC;QAE9C;;WAEG;QACK,0BAAqB,GAAY,KAAK,CAAC;KAiEhD;IA9CS,iBAAiB,CAAC,QAAgB;QACxC,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,CAAC;IACzD,CAAC;IAED,MAAM;QACJ,4IAA4I;QAE5I,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;QACjI,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC;QACxE,qEAAqE;QAErE,MAAM,WAAW,GAAG,CAClB,EAAC,QAAQ;YACN,WAAW,CAAC,CAAC,CAAC,sBAAgB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,GAAmB,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,GAAQ;YAC5H,YAAY,CAAC,CAAC,CAAC,CACd,uBACE,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,iBAAiB,EAAE,IAAI,CAAC,uBAAuB,EAC/C,YAAY,EAAE,IAAI,CAAC,YAAY,GAC/B,CACH,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,QAAQ,GAAQ,CAC5B;YACD,yEAAkB,aAAa,EAAE,IAAI,CAAC,oBAAoB,EAAE,cAAc,EAAE,IAAI,CAAC,qBAAqB;gBACpG,8DAAa,CACI,CACV,CACZ,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI;aACrB;YAEA,IAAI,CAAC,eAAe,IAAI,sEAAe,MAAM,EAAE,IAAI,CAAC,eAAe,GAAI;YACvE,WAAW;YAGX,IAAI,CAAC,OAAO,IAAI,2EAAmB,IAAI,CAAC,OAAO,CAAoB,CAC/D,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Fragment, VNode, Element } from '@stencil/core';\n\n@Component({\n  tag: 'udp-card',\n  styleUrl: 'udp-card.css',\n  shadow: true,\n})\nexport class UdpCard {\n  @Element() el: HTMLElement;\n\n  /**\n   * The variant to use.\n   */\n  @Prop() variant: 'elevated' | 'outlined' = 'elevated';\n\n  /**\n   * The adornmentStatus of the card.\n   */\n  @Prop() adornmentStatus: 'success' | 'error' | 'warning' | 'info' = 'success';\n\n  /**\n   * The title for the card header\n   */\n  @Prop() cardTitle?: string;\n\n  /**\n   * The subheader for the card header\n   */\n  @Prop() subheader?: string | VNode | VNode[];\n\n  /**\n   * The avatar element to display in the card header\n   */\n  @Prop() avatar?: any;\n\n  /**\n   * The action to display in the card header\n   */\n  @Prop() headerAction?: any;\n\n  /**\n   * If true, the header title and subheader won't be wrapped by Typography component\n   */\n  @Prop() disableHeaderTypography?: boolean = false;\n\n  /**\n   * The image URL for the card media.\n   */\n  @Prop() mediaImage: string;\n\n  /**\n   * The title for the card media image, used for accessibility.\n   */\n  @Prop() mediaTitle: string;\n\n  /**\n   * The actions to display in the card footer\n   */\n  @Prop() actions?: any;\n\n  /**\n   * If `true`, the card content area will not have padding.\n   */\n  @Prop() disableContentGutter: boolean = false;\n\n  /**\n   * If `true`, the card content area will not have padding.\n   */\n  @Prop() disableContentPadding: boolean = false;\n\n  /**\n   * If `true`, the main content area of the card becomes a clickable action area.\n   * Not implemented yet.\n   */\n  // @Prop() actionArea: boolean = false;\n\n  /**\n   * Click handler for when actionArea is true\n   * Not implemented yet.\n   */\n  // @Prop() onClick?: (e: MouseEvent) => void;\n\n  /**\n   * Optional handler for when the title is clicked\n   */\n  @Prop() onTitleClick?: (e: CustomEvent) => void;\n\n  private hasSlottedContent(slotName: string): boolean {\n    return !!this.el.querySelector(`[slot=\"${slotName}\"]`);\n  }\n\n  render() {\n    // const elevationClass = this.variant === 'elevation' && this.elevation >= 1 && this.elevation <= 8 ? `elevation-${this.elevation}` : null;\n\n    const renderHeader = !this.hasSlottedContent('header') && (this.cardTitle || this.subheader || this.avatar || this.headerAction);\n    const renderMedia = !this.hasSlottedContent('media') && this.mediaImage;\n    // const hasDefaultContent = !!this.el.querySelector(':not([slot])');\n\n    const mainContent = (\n      <Fragment>\n        {renderMedia ? <udp-card-media image={this.mediaImage} title={this.mediaTitle}></udp-card-media> : <slot name=\"media\"></slot>}\n        {renderHeader ? (\n          <udp-card-header\n            cardTitle={this.cardTitle}\n            subheader={this.subheader}\n            avatar={this.avatar}\n            action={this.headerAction}\n            disableTypography={this.disableHeaderTypography}\n            onTitleClick={this.onTitleClick}\n          />\n        ) : (\n          <slot name=\"header\"></slot>\n        )}\n        <udp-card-content disableGutter={this.disableContentGutter} disablePadding={this.disableContentPadding}>\n          <slot></slot>\n        </udp-card-content>\n      </Fragment>\n    );\n\n    return (\n      <Host\n        class={{\n          [this.variant]: true,\n        }}\n      >\n        {this.adornmentStatus && <udp-adornment status={this.adornmentStatus} />}\n        {mainContent}\n        {/* TODO: Needs to be tested more before uncommenting */}\n        {/* {this.actionArea && <udp-card-action-area onClick={this.onClick} style={{ cursor: 'pointer' }} />} */}\n        {this.actions && <udp-card-actions>{this.actions}</udp-card-actions>}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"udp-card.js","sourceRoot":"","sources":["../../../../../../../src/components/my-component/UI/data-display/cards/udp-card/udp-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAS,OAAO,EAAE,MAAM,eAAe,CAAC;AAOnF,MAAM,OAAO,OAAO;IALpB;QAQE;;WAEG;QACK,YAAO,GAA4B,UAAU,CAAC;QA2BtD;;WAEG;QACK,4BAAuB,GAAa,KAAK,CAAC;QAiBlD;;WAEG;QACK,yBAAoB,GAAY,KAAK,CAAC;QAE9C;;WAEG;QACK,0BAAqB,GAAY,KAAK,CAAC;KAkEhD;IA/CS,iBAAiB,CAAC,QAAgB;QACxC,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,CAAC;IACzD,CAAC;IAED,MAAM;QACJ,4IAA4I;QAE5I,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;QACjI,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC;QACxE,qEAAqE;QAErE,MAAM,WAAW,GAAG,CAClB,EAAC,QAAQ;YACN,WAAW,CAAC,CAAC,CAAC,sBAAgB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,GAAmB,CAAC,CAAC,CAAC,YAAM,IAAI,EAAC,OAAO,GAAQ;YAC5H,YAAY,CAAC,CAAC,CAAC,CACd,uBACE,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,iBAAiB,EAAE,IAAI,CAAC,uBAAuB,EAC/C,YAAY,EAAE,IAAI,CAAC,YAAY,GAC/B,CACH,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,QAAQ,GAAQ,CAC5B;YACD,yEAAkB,aAAa,EAAE,IAAI,CAAC,oBAAoB,EAAE,cAAc,EAAE,IAAI,CAAC,qBAAqB;gBACpG,8DAAa,CACI,CACV,CACZ,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACP,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,qCAAqC;gBAC3D,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE,6BAA6B;aAC1E;YAEE,IAAI,CAAC,eAAe,IAAI,sEAAe,MAAM,EAAE,IAAI,CAAC,eAAe,GAAI;YACvE,WAAW;YAGX,IAAI,CAAC,OAAO,IAAI,2EAAmB,IAAI,CAAC,OAAO,CAAoB,CAC/D,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Fragment, VNode, Element } from '@stencil/core';\n\n@Component({\n  tag: 'udp-card',\n  styleUrl: 'udp-card.css',\n  shadow: true,\n})\nexport class UdpCard {\n  @Element() el: HTMLElement;\n\n  /**\n   * The variant to use.\n   */\n  @Prop() variant: 'elevated' | 'outlined' = 'outlined';\n\n  /**\n   * The adornmentStatus of the card.\n   */\n  @Prop() adornmentStatus: 'success' | 'error' | 'warning' | 'info';\n\n  /**\n   * The title for the card header\n   */\n  @Prop() cardTitle?: string;\n\n  /**\n   * The subheader for the card header\n   */\n  @Prop() subheader?: string | VNode | VNode[];\n\n  /**\n   * The avatar element to display in the card header\n   */\n  @Prop() avatar?: any;\n\n  /**\n   * The action to display in the card header\n   */\n  @Prop() headerAction?: any;\n\n  /**\n   * If true, the header title and subheader won't be wrapped by Typography component\n   */\n  @Prop() disableHeaderTypography?: boolean = false;\n\n  /**\n   * The image URL for the card media.\n   */\n  @Prop() mediaImage: string;\n\n  /**\n   * The title for the card media image, used for accessibility.\n   */\n  @Prop() mediaTitle: string;\n\n  /**\n   * The actions to display in the card footer\n   */\n  @Prop() actions?: any;\n\n  /**\n   * If `true`, the card content area will not have padding.\n   */\n  @Prop() disableContentGutter: boolean = false;\n\n  /**\n   * If `true`, the card content area will not have padding.\n   */\n  @Prop() disableContentPadding: boolean = false;\n\n  /**\n   * If `true`, the main content area of the card becomes a clickable action area.\n   * Not implemented yet.\n   */\n  // @Prop() actionArea: boolean = false;\n\n  /**\n   * Click handler for when actionArea is true\n   * Not implemented yet.\n   */\n  // @Prop() onClick?: (e: MouseEvent) => void;\n\n  /**\n   * Optional handler for when the title is clicked\n   */\n  @Prop() onTitleClick?: (e: CustomEvent) => void;\n\n  private hasSlottedContent(slotName: string): boolean {\n    return !!this.el.querySelector(`[slot=\"${slotName}\"]`);\n  }\n\n  render() {\n    // const elevationClass = this.variant === 'elevation' && this.elevation >= 1 && this.elevation <= 8 ? `elevation-${this.elevation}` : null;\n\n    const renderHeader = !this.hasSlottedContent('header') && (this.cardTitle || this.subheader || this.avatar || this.headerAction);\n    const renderMedia = !this.hasSlottedContent('media') && this.mediaImage;\n    // const hasDefaultContent = !!this.el.querySelector(':not([slot])');\n\n    const mainContent = (\n      <Fragment>\n        {renderMedia ? <udp-card-media image={this.mediaImage} title={this.mediaTitle}></udp-card-media> : <slot name=\"media\"></slot>}\n        {renderHeader ? (\n          <udp-card-header\n            cardTitle={this.cardTitle}\n            subheader={this.subheader}\n            avatar={this.avatar}\n            action={this.headerAction}\n            disableTypography={this.disableHeaderTypography}\n            onTitleClick={this.onTitleClick}\n          />\n        ) : (\n          <slot name=\"header\"></slot>\n        )}\n        <udp-card-content disableGutter={this.disableContentGutter} disablePadding={this.disableContentPadding}>\n          <slot></slot>\n        </udp-card-content>\n      </Fragment>\n    );\n\n    return (\n      <Host\n        class={{\n        [this.variant]: true, // This adds 'elevated' or 'outlined'\n        'elevation-1': this.variant === 'elevated', // This adds a default shadow\n      }}\n      >\n        {this.adornmentStatus && <udp-adornment status={this.adornmentStatus} />}\n        {mainContent}\n        {/* TODO: Needs to be tested more before uncommenting */}\n        {/* {this.actionArea && <udp-card-action-area onClick={this.onClick} style={{ cursor: 'pointer' }} />} */}\n        {this.actions && <udp-card-actions>{this.actions}</udp-card-actions>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/tabs/tab/tabs/udp-tabs.css

@@ -1,44 +1,187 @@
+.tab-container {
+  display: flex;
+  flex-direction: column;
+}
+
 .tab-header {
-    display: flex;
-    background-color: #ffffff;
-    border-bottom: 1px solid #e0e0e0;
-  }
-  
-  .tab-header button {
-    flex-grow: 1;
-    padding: 16px;
-    font-size: 14px;
-    text-align: center;
-    border: none;
-    background: none;
-    cursor: pointer;
-    outline: none;
-    transition: all 0.3s ease;
-  }
-  
-  .tab-header button.active {
-    border-bottom: 2px solid 'var(--secondary-color)';
-    font-weight: 600;
-  }
-  
-  .tab-content {
-    display: flex;
-    flex-direction: column;
-    padding: 16px;
-    background-color: #ffffff;
-  }
-  
-  .tab-header button {
-    cursor: pointer;
-    border: none;
-    padding: 16px;
-    background-color: transparent;
-    color: #757575;
-  }
-  
-  .tab-header button.active {
-    border-bottom: 2px solid #344861;
-    color: #344861;
-    font-weight: 600;
-  }
-  
+  background-color: #ffffff;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.tab-scroll-container {
+  display: flex;
+  position: relative;
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex: 1;
+  min-width: 0;
+}
+
+.tab-scroll-container::-webkit-scrollbar {
+  height: 4px;
+}
+.tab-scroll-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+.tab-scroll-container::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+.tab-scroll-container::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.tab-header::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--divider-color, #e0e0e0);
+}
+
+/* This is the base style for tab buttons */
+.tab-header button {
+  padding: 16px;
+  font-size: 14px;
+  text-align: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.22s ease;
+  color: #555555;;
+  font-weight: 600;
+  opacity: 0.9;
+  white-space: nowrap;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.tab-header.fill .tab-scroll-container {
+  width: 100%;
+}
+.tab-header.fill .tab-scroll-container button {
+  flex-grow: 1;
+}
+
+.tab-header button.active {
+  color: var(--secondary-color, #344861);
+  opacity: 1.0;
+}
+
+.tab-header button.scroll-arrow {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 40px;
+  padding: 0;
+
+  background: #ffffff;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: bold;
+  color: #757575;
+  z-index: 2;
+  transition: color 0.2s ease;
+
+  flex-shrink: 0;
+  opacity: 1;
+  gap: 0;
+}
+
+.tab-header button.scroll-arrow:hover {
+  color: #000;
+}
+
+.tab-header button.scroll-arrow.left {
+  left: 0;
+}
+
+.tab-header button.scroll-arrow.right {
+  right: 0;
+
+}
+
+.scroll-fade {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 30px;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.scroll-fade.left {
+  left: 40px;
+  background: linear-gradient(
+    to right,
+    #ffffff,
+    rgba(255, 255, 255, 0)
+  );
+}
+
+.scroll-fade.right {
+  right: 40px;
+  background: linear-gradient(
+    to left,
+    #ffffff,
+    rgba(255, 255, 255, 0)
+  );
+}
+
+.tab-header button udp-icon {
+  font-size: 1.2em;
+  line-height: 1;
+}
+
+.tab-header button.icon-start {
+  flex-direction: row;
+}
+.tab-header button.icon-end {
+  flex-direction: row-reverse;
+}
+.tab-header button.icon-top {
+  flex-direction: column;
+  gap: 4px;
+}
+.tab-header button.icon-bottom {
+  flex-direction: column-reverse;
+  gap: 4px;
+}
+
+.tab-content {
+  padding: 16px;
+  background-color: #ffffff;
+}
+
+.slider {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background-color: var(--secondary-color, #344861);
+
+  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
+    width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
+}
+
+.tab-header button.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.tab-header button.disabled.active {
+  color: #757575;
+  opacity: 0.5;
+}

package/dist/collection/components/my-component/UI/tabs/tab/tabs/udp-tabs.js

@@ -1,15 +1,160 @@
 import { h } from "@stencil/core";
 export class UdpTabs {
     constructor() {
+        /**
+         * Specifies the layout variant of the tab header.
+         *
+         * - `'standard'`: Tabs will be sized based on their content.
+         * - `'fill'`: Tabs will stretch to fill the available horizontal space.
+         */
+        this.variant = 'fill';
         this.activeTab = 0;
+        this.tabDetails = []; // Uses new interface
+        this.sliderStyle = {
+            width: '0',
+            transform: 'translateX(0)',
+        };
+        this.showScrollLeft = false;
+        this.showScrollRight = false;
+        this.tabs = [];
+        this.buttonRefs = [];
+    }
+    handleSlotChange() {
+        this.initializeTabs();
+    }
+    handleResize() {
+        requestAnimationFrame(() => {
+            this.updateSliderPosition();
+            this.checkScroll();
+        });
+    }
+    componentDidLoad() {
+        this.initializeTabs();
+    }
+    onActiveTabChange() {
+        this.updateActiveTabs();
+        this.updateSliderPosition();
+    }
+    onVariantChange() {
+        requestAnimationFrame(() => {
+            this.updateSliderPosition();
+            this.checkScroll();
+        });
+    }
+    initializeTabs() {
+        var _a, _b;
+        this.buttonRefs = [];
+        // Get ALL tabs from the slot
+        this.tabs = Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'udp-tab');
+        this.tabDetails = this.tabs.map(tab => ({
+            title: tab.title,
+            icon: tab.icon,
+            iconPlacement: tab.iconPlacement,
+            hidden: tab.hidden,
+            disabled: tab.disabled,
+        }));
+        // Check if the current activeTab (default 0) is invalid
+        if (((_a = this.tabDetails[this.activeTab]) === null || _a === void 0 ? void 0 : _a.hidden) || ((_b = this.tabDetails[this.activeTab]) === null || _b === void 0 ? void 0 : _b.disabled)) {
+            // If it is, find the first valid tab to select
+            const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);
+            // If we found one, set it. If not (all tabs invalid), set to -1
+            this.activeTab = firstValidIndex;
+        }
+        this.updateActiveTabs();
+        requestAnimationFrame(() => {
+            this.updateSliderPosition();
+            this.checkScroll();
+        });
+    }
+    updateActiveTabs() {
+        this.tabs.forEach((tab, index) => {
+            tab.active = index === this.activeTab;
+        });
+    }
+    updateSliderPosition() {
+        const activeButton = this.buttonRefs[this.activeTab];
+        if (!activeButton) {
+            this.sliderStyle = { width: '0px', transform: 'translateX(0px)' };
+            return;
+        }
+        this.sliderStyle = {
+            width: `${activeButton.offsetWidth}px`,
+            transform: `translateX(${activeButton.offsetLeft}px)`,
+        };
+    }
+    checkScroll() {
+        if (!this.scrollContainerRef)
+            return;
+        const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainerRef;
+        const isOverflowing = scrollWidth > clientWidth;
+        this.showScrollLeft = isOverflowing && scrollLeft > 1;
+        this.showScrollRight = isOverflowing && scrollLeft < scrollWidth - clientWidth - 1;
     }
     tabClicked(tabIndex) {
+        var _a;
+        if ((_a = this.tabDetails[tabIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+            return;
+        }
         this.activeTab = tabIndex;
+        const tabButton = this.buttonRefs[tabIndex];
+        const container = this.scrollContainerRef;
+        if (!tabButton || !container)
+            return;
+        const { scrollLeft, clientWidth } = container;
+        const tabLeft = tabButton.offsetLeft;
+        const tabRight = tabLeft + tabButton.offsetWidth;
+        const safeZonePadding = 70;
+        const safeZoneLeft = scrollLeft + safeZonePadding;
+        const safeZoneRight = scrollLeft + clientWidth - safeZonePadding;
+        // Check if the tab's left edge is hidden by the left fade
+        if (tabLeft < safeZoneLeft) {
+            // Scroll to position the tab's left edge at the start of the safe zone
+            container.scrollTo({
+                left: tabLeft - safeZonePadding,
+                behavior: 'smooth'
+            });
+        }
+        // Check if the tab's right edge is hidden by the right fade
+        else if (tabRight > safeZoneRight) {
+            // Scroll to position the tab's right edge at the end of the safe zone
+            container.scrollTo({
+                left: tabRight - clientWidth + safeZonePadding,
+                behavior: 'smooth'
+            });
+        }
+    }
+    scrollToStart() {
+        if (!this.scrollContainerRef)
+            return;
+        this.scrollContainerRef.scrollTo({ left: 0, behavior: 'smooth' });
+    }
+    scrollToEnd() {
+        if (!this.scrollContainerRef)
+            return;
+        const container = this.scrollContainerRef;
+        const { scrollWidth, clientWidth } = container;
+        const maxScrollLeft = scrollWidth - clientWidth;
+        container.scrollTo({ left: maxScrollLeft, behavior: 'smooth' });
     }
     render() {
-        return (h("div", { key: '11b569eb074151f849159aa15af92129c8992929' }, h("div", { key: '3c6d9178dd37fd5fd5b91ec44e287241ee256e1c', class: "tab-header" }, h("slot", { key: 'e9289d5d3fa6e2da92b81de71e55276b3455f37c', name: "tab-title" })), h("div", { key: 'ed2038f48697251f5dfd3856d26711313376af10' }, h("slot", { key: '2b6d109cef169e2f50fb876387efc334464dc9da' }))));
+        return (h("div", { key: '173d42a32bb4ed0cbd57950e38bb75ab216efda1', class: "tab-container" }, h("div", { key: '369754b2aeed74f35f5e7be39b6617081c41cad2', class: `tab-header ${this.variant}` }, this.showScrollLeft && (h("button", { key: '68fefbbb9e8c95f54b3a78d700698d61b1c0b8bc', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, h("udp-icon", { key: 'f2230bcf77a4ef6cfc972f3219023c8da4607e2e', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && h("div", { key: '69476b6d664f2b42b7a102275999f131e1b397f0', class: "scroll-fade left" }), h("div", { key: 'a12d5b22ec762e52091770b1ed276a7df8267437', class: "tab-scroll-container", ref: el => (this.scrollContainerRef = el), onScroll: () => this.checkScroll() }, this.tabDetails.map((tab, index) => {
+            if (tab.hidden) {
+                return null;
+            }
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const iconEl = tab.icon ? h("udp-icon", { iconName: tab.icon, color: 'inherit' }) : null;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            const titleEl = h("span", null, tab.title);
+            return (h("button", { class: {
+                    'active': index === this.activeTab,
+                    'has-icon': !!tab.icon,
+                    [`icon-${tab.iconPlacement}`]: !!tab.icon,
+                    'disabled': tab.disabled,
+                }, disabled: tab.disabled, onClick: () => this.tabClicked(index), role: "tab", "aria-selected": index === this.activeTab ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', ref: el => (this.buttonRefs[index] = el) }, iconEl, titleEl));
+        }), h("div", { key: '6726c5fd74d32e9385aa83aaf88ab92e9d83d858', class: "slider", style: this.sliderStyle })), this.showScrollRight && h("div", { key: 'ce175b2bb6465211587af95995375d315a0e6fed', class: "scroll-fade right" }), this.showScrollRight && (h("button", { key: '63dbc5cd40921b7b39c75377986ba37b5d69c93a', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, h("udp-icon", { key: 'b191a3a90cdecf10abf94dc98fbf16bd973ee1e1', iconName: "chevronRight16", color: "inherit" })))), h("div", { key: '3ffe241125e1fa6969cf9fcce49350d63f82bee6', class: "tab-content" }, h("slot", { key: 'a6fe2932604e485e85f0a860ee58633f8bf161b6' }))));
     }
     static get is() { return "udp-tabs"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["udp-tabs.css"]
@@ -20,10 +165,63 @@ export class UdpTabs {
             "$": ["udp-tabs.css"]
         };
     }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'fill' | 'standard'",
+                    "resolved": "\"fill\" | \"standard\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the layout variant of the tab header.\n\n- `'standard'`: Tabs will be sized based on their content.\n- `'fill'`: Tabs will stretch to fill the available horizontal space."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'fill'"
+            }
+        };
+    }
     static get states() {
         return {
-            "activeTab": {}
+            "activeTab": {},
+            "tabDetails": {},
+            "sliderStyle": {},
+            "showScrollLeft": {},
+            "showScrollRight": {}
         };
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "activeTab",
+                "methodName": "onActiveTabChange"
+            }, {
+                "propName": "variant",
+                "methodName": "onVariantChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "slotchange",
+                "method": "handleSlotChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }
 //# sourceMappingURL=udp-tabs.js.map

package/dist/collection/components/my-component/UI/tabs/tab/tabs/udp-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"udp-tabs.js","sourceRoot":"","sources":["../../../../../../../src/components/my-component/UI/tabs/tab/tabs/udp-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAMpD,MAAM,OAAO,OAAO;IAJpB;QAKW,cAAS,GAAW,CAAC,CAAC;KAoBhC;IAlBC,UAAU,CAAC,QAAgB;QACzB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;IAC5B,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACE,4DAAK,KAAK,EAAC,YAAY;gBACrB,6DAAM,IAAI,EAAC,WAAW,GAEf,CACH;YACN;gBACE,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'udp-tabs',\n  styleUrl: 'udp-tabs.css',\n})\nexport class UdpTabs {\n  @State() activeTab: number = 0;\n\n  tabClicked(tabIndex: number) {\n    this.activeTab = tabIndex;\n  }\n\n  render() {\n    return (\n      <div>\n        <div class=\"tab-header\">\n          <slot name=\"tab-title\">\n            {/* Titles go here */}\n          </slot>\n        </div>\n        <div>\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"udp-tabs.js","sourceRoot":"","sources":["../../../../../../../src/components/my-component/UI/tabs/tab/tabs/udp-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAelF,MAAM,OAAO,OAAO;IALpB;QAQE;;;;;WAKG;QACK,YAAO,GAAwB,MAAM,CAAC;QAErC,cAAS,GAAW,CAAC,CAAC;QACtB,eAAU,GAAgB,EAAE,CAAC,CAAC,qBAAqB;QACnD,gBAAW,GAAyC;YAC3D,KAAK,EAAE,GAAG;YACV,SAAS,EAAE,eAAe;SAC3B,CAAC;QACO,mBAAc,GAAY,KAAK,CAAC;QAChC,oBAAe,GAAY,KAAK,CAAC;QAElC,SAAI,GAAwB,EAAE,CAAC;QAC/B,eAAU,GAAwB,EAAE,CAAC;KAyN9C;IArNC,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGD,YAAY;QACV,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAGD,eAAe;QACb,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,cAAc;;QACpB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,6BAA6B;QAC7B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,MAAM,CAC7C,CAAC,KAAK,EAA8B,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS,CACjF,CAAC;QAEF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YACtC,KAAK,EAAE,GAAG,CAAC,KAAK;YAChB,IAAI,EAAE,GAAG,CAAC,IAAI;YACd,aAAa,EAAE,GAAG,CAAC,aAAa;YAChC,MAAM,EAAE,GAAG,CAAC,MAAM;YAClB,QAAQ,EAAE,GAAG,CAAC,QAAQ;SACvB,CAAC,CAAC,CAAC;QAEJ,wDAAwD;QACxD,IAAI,CAAA,MAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,0CAAE,MAAM,MAAI,MAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,0CAAE,QAAQ,CAAA,EAAE,CAAC;YACzF,+CAA+C;YAC/C,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YACvF,gEAAgE;YAChE,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC;QACnC,CAAC;QAED,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAC/B,GAAG,CAAC,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,oBAAoB;QAC1B,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACrD,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,IAAI,CAAC,WAAW,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;YAClE,OAAO;QACT,CAAC;QAED,IAAI,CAAC,WAAW,GAAG;YACjB,KAAK,EAAE,GAAG,YAAY,CAAC,WAAW,IAAI;YACtC,SAAS,EAAE,cAAc,YAAY,CAAC,UAAU,KAAK;SACtD,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,kBAAkB;YAAE,OAAO;QACrC,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,kBAAkB,CAAC;QACzE,MAAM,aAAa,GAAG,WAAW,GAAG,WAAW,CAAC;QAChD,IAAI,CAAC,cAAc,GAAG,aAAa,IAAI,UAAU,GAAG,CAAC,CAAC;QACtD,IAAI,CAAC,eAAe,GAAG,aAAa,IAAI,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,CAAC,CAAC;IACrF,CAAC;IAEO,UAAU,CAAC,QAAgB;;QACjC,IAAI,MAAA,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,0CAAE,QAAQ,EAAE,CAAC;YACxC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAE1B,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC;QAE1C,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS;YAAE,OAAO;QAErC,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC;QAC9C,MAAM,OAAO,GAAG,SAAS,CAAC,UAAU,CAAC;QACrC,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,WAAW,CAAC;QAEjD,MAAM,eAAe,GAAG,EAAE,CAAC;QAE3B,MAAM,YAAY,GAAG,UAAU,GAAG,eAAe,CAAC;QAClD,MAAM,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,eAAe,CAAC;QAEjE,0DAA0D;QAC1D,IAAI,OAAO,GAAG,YAAY,EAAE,CAAC;YAC3B,uEAAuE;YACvE,SAAS,CAAC,QAAQ,CAAC;gBACjB,IAAI,EAAE,OAAO,GAAG,eAAe;gBAC/B,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;QACL,CAAC;QACD,4DAA4D;aACvD,IAAI,QAAQ,GAAG,aAAa,EAAE,CAAC;YAClC,sEAAsE;YACtE,SAAS,CAAC,QAAQ,CAAC;gBACjB,IAAI,EAAE,QAAQ,GAAG,WAAW,GAAG,eAAe;gBAC9C,QAAQ,EAAE,QAAQ;aACnB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,kBAAkB;YAAE,OAAO;QACrC,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IACpE,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,kBAAkB;YAAE,OAAO;QACrC,MAAM,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC;QAC1C,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,SAAS,CAAC;QAC/C,MAAM,aAAa,GAAG,WAAW,GAAG,WAAW,CAAC;QAChD,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAClE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,eAAe;YACxB,4DAAK,KAAK,EAAE,cAAc,IAAI,CAAC,OAAO,EAAE;gBACrC,IAAI,CAAC,cAAc,IAAI,CACtB,+DACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,gBACxB,qBAAqB;oBAE/B,iEAAU,QAAQ,EAAC,eAAe,EAAC,KAAK,EAAC,SAAS,GAAG,CAC/C,CACV;gBAEA,IAAI,CAAC,cAAc,IAAI,4DAAK,KAAK,EAAC,kBAAkB,GAAO;gBAE5D,4DACE,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC,EACzC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;oBAEjC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;wBAClC,IAAI,GAAG,CAAC,MAAM,EAAE,CAAC;4BACf,OAAO,IAAI,CAAC;wBACd,CAAC;wBAED,mEAAmE;wBACnE,MAAM,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAU,QAAQ,EAAE,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC;wBACpF,mEAAmE;wBACnE,MAAM,OAAO,GAAG,gBAAO,GAAG,CAAC,KAAK,CAAQ,CAAC;wBAEzC,OAAO,CACL,cACE,KAAK,EAAE;gCACL,QAAQ,EAAE,KAAK,KAAK,IAAI,CAAC,SAAS;gCAClC,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI;gCACtB,CAAC,QAAQ,GAAG,CAAC,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI;gCACzC,UAAU,EAAE,GAAG,CAAC,QAAQ;6BACzB,EACD,QAAQ,EAAE,GAAG,CAAC,QAAQ,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACrC,IAAI,EAAC,KAAK,mBACK,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC3C,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC9C,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;4BAEvC,MAAM;4BACN,OAAO,CACD,CACV,CAAC;oBACJ,CAAC,CAAC;oBAEF,4DAAK,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,GAAQ,CAC/C;gBAEL,IAAI,CAAC,eAAe,IAAI,4DAAK,KAAK,EAAC,mBAAmB,GAAO;gBAE7D,IAAI,CAAC,eAAe,IAAI,CACvB,+DACE,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,gBACtB,oBAAoB;oBAE/B,iEAAU,QAAQ,EAAC,gBAAgB,EAAC,KAAK,EAAC,SAAS,GAAG,CAC/C,CACV,CACG;YACN,4DAAK,KAAK,EAAC,aAAa;gBACtB,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, State, Element, Watch, Listen, Prop } from '@stencil/core';\n\ninterface TabDetail {\n  title: string;\n  icon?: string;\n  iconPlacement?: 'start' | 'end' | 'top' | 'bottom';\n  hidden?: boolean;\n  disabled?: boolean;\n}\n\n@Component({\n  tag: 'udp-tabs',\n  styleUrl: 'udp-tabs.css',\n  shadow: true,\n})\nexport class UdpTabs {\n  @Element() el: HTMLElement;\n\n  /**\n   * Specifies the layout variant of the tab header.\n   *\n   * - `'standard'`: Tabs will be sized based on their content.\n   * - `'fill'`: Tabs will stretch to fill the available horizontal space.\n   */\n  @Prop() variant: 'fill' | 'standard' = 'fill';\n\n  @State() activeTab: number = 0;\n  @State() tabDetails: TabDetail[] = []; // Uses new interface\n  @State() sliderStyle: { width: string; transform: string } = {\n    width: '0',\n    transform: 'translateX(0)',\n  };\n  @State() showScrollLeft: boolean = false;\n  @State() showScrollRight: boolean = false;\n\n  private tabs: HTMLUdpTabElement[] = [];\n  private buttonRefs: HTMLButtonElement[] = [];\n  private scrollContainerRef?: HTMLDivElement;\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.initializeTabs();\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    requestAnimationFrame(() => {\n      this.updateSliderPosition();\n      this.checkScroll();\n    });\n  }\n\n  componentDidLoad() {\n    this.initializeTabs();\n  }\n\n  @Watch('activeTab')\n  onActiveTabChange() {\n    this.updateActiveTabs();\n    this.updateSliderPosition();\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    requestAnimationFrame(() => {\n      this.updateSliderPosition();\n      this.checkScroll();\n    });\n  }\n\n  private initializeTabs() {\n    this.buttonRefs = [];\n    // Get ALL tabs from the slot\n    this.tabs = Array.from(this.el.children).filter(\n      (child): child is HTMLUdpTabElement => child.tagName.toLowerCase() === 'udp-tab',\n    );\n\n    this.tabDetails = this.tabs.map(tab => ({\n      title: tab.title,\n      icon: tab.icon,\n      iconPlacement: tab.iconPlacement,\n      hidden: tab.hidden,\n      disabled: tab.disabled,\n    }));\n\n    // Check if the current activeTab (default 0) is invalid\n    if (this.tabDetails[this.activeTab]?.hidden || this.tabDetails[this.activeTab]?.disabled) {\n      // If it is, find the first valid tab to select\n      const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);\n      // If we found one, set it. If not (all tabs invalid), set to -1\n      this.activeTab = firstValidIndex;\n    }\n\n    this.updateActiveTabs();\n\n    requestAnimationFrame(() => {\n      this.updateSliderPosition();\n      this.checkScroll();\n    });\n  }\n\n  private updateActiveTabs() {\n    this.tabs.forEach((tab, index) => {\n      tab.active = index === this.activeTab;\n    });\n  }\n\n  private updateSliderPosition() {\n    const activeButton = this.buttonRefs[this.activeTab];\n    if (!activeButton) {\n      this.sliderStyle = { width: '0px', transform: 'translateX(0px)' };\n      return;\n    }\n\n    this.sliderStyle = {\n      width: `${activeButton.offsetWidth}px`,\n      transform: `translateX(${activeButton.offsetLeft}px)`,\n    };\n  }\n\n  private checkScroll() {\n    if (!this.scrollContainerRef) return;\n    const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainerRef;\n    const isOverflowing = scrollWidth > clientWidth;\n    this.showScrollLeft = isOverflowing && scrollLeft > 1;\n    this.showScrollRight = isOverflowing && scrollLeft < scrollWidth - clientWidth - 1;\n  }\n\n  private tabClicked(tabIndex: number) {\n    if (this.tabDetails[tabIndex]?.disabled) {\n      return;\n    }\n\n    this.activeTab = tabIndex;\n\n    const tabButton = this.buttonRefs[tabIndex];\n    const container = this.scrollContainerRef;\n\n    if (!tabButton || !container) return;\n\n    const { scrollLeft, clientWidth } = container;\n    const tabLeft = tabButton.offsetLeft;\n    const tabRight = tabLeft + tabButton.offsetWidth;\n\n    const safeZonePadding = 70;\n\n    const safeZoneLeft = scrollLeft + safeZonePadding;\n    const safeZoneRight = scrollLeft + clientWidth - safeZonePadding;\n\n    // Check if the tab's left edge is hidden by the left fade\n    if (tabLeft < safeZoneLeft) {\n      // Scroll to position the tab's left edge at the start of the safe zone\n      container.scrollTo({\n        left: tabLeft - safeZonePadding,\n        behavior: 'smooth'\n      });\n    }\n    // Check if the tab's right edge is hidden by the right fade\n    else if (tabRight > safeZoneRight) {\n      // Scroll to position the tab's right edge at the end of the safe zone\n      container.scrollTo({\n        left: tabRight - clientWidth + safeZonePadding,\n        behavior: 'smooth'\n      });\n    }\n  }\n\n  private scrollToStart() {\n    if (!this.scrollContainerRef) return;\n    this.scrollContainerRef.scrollTo({ left: 0, behavior: 'smooth' });\n  }\n\n  private scrollToEnd() {\n    if (!this.scrollContainerRef) return;\n    const container = this.scrollContainerRef;\n    const { scrollWidth, clientWidth } = container;\n    const maxScrollLeft = scrollWidth - clientWidth;\n    container.scrollTo({ left: maxScrollLeft, behavior: 'smooth' });\n  }\n\n  render() {\n    return (\n      <div class=\"tab-container\">\n        <div class={`tab-header ${this.variant}`}>\n          {this.showScrollLeft && (\n            <button\n              class=\"scroll-arrow left\"\n              onClick={() => this.scrollToStart()}\n              aria-label=\"Scroll to first tab\"\n            >\n               <udp-icon iconName=\"chevronLeft16\" color=\"inherit\" />\n            </button>\n          )}\n\n          {this.showScrollLeft && <div class=\"scroll-fade left\"></div>}\n\n          <div\n            class=\"tab-scroll-container\"\n            ref={el => (this.scrollContainerRef = el)}\n            onScroll={() => this.checkScroll()}\n          >\n            {this.tabDetails.map((tab, index) => {\n              if (tab.hidden) {\n                return null;\n              }\n\n              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n              const iconEl = tab.icon ? <udp-icon iconName={tab.icon} color={'inherit'} /> : null;\n              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n              const titleEl = <span>{tab.title}</span>;\n\n              return (\n                <button\n                  class={{\n                    'active': index === this.activeTab,\n                    'has-icon': !!tab.icon,\n                    [`icon-${tab.iconPlacement}`]: !!tab.icon,\n                    'disabled': tab.disabled,\n                  }}\n                  disabled={tab.disabled}\n                  onClick={() => this.tabClicked(index)}\n                  role=\"tab\"\n                  aria-selected={index === this.activeTab ? 'true' : 'false'}\n                  aria-disabled={tab.disabled ? 'true' : 'false'}\n                  ref={el => (this.buttonRefs[index] = el)}\n                >\n                  {iconEl}\n                  {titleEl}\n                </button>\n              );\n            })}\n\n            <div class=\"slider\" style={this.sliderStyle}></div>\n          </div>\n\n          {this.showScrollRight && <div class=\"scroll-fade right\"></div>}\n\n          {this.showScrollRight && (\n            <button\n              class=\"scroll-arrow right\"\n              onClick={() => this.scrollToEnd()}\n              aria-label=\"Scroll to last tab\"\n            >\n              <udp-icon iconName=\"chevronRight16\" color=\"inherit\" />\n            </button>\n          )}\n        </div>\n        <div class=\"tab-content\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"]}