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

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

@@ -7,26 +7,24 @@
   font-size: var(--body2-font-size);
   font-weight: var(--body2-font-weight);
   line-height: var(--body2-line-height);
-  position: relative; /* For absolute positioning of adornment */
+  position: relative;
+  border-radius: var(--border-radius);
 }
 
-/* Position adornment as a border */
 :host udp-adornment {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
-  width: 4px; /* Match the width in udp-adornment.tsx */
+  width: 4px;
   z-index: 1;
 }
 
-/* Ensure card content doesn't overlap with adornment */
 :host udp-card-content {
   position: relative;
   z-index: 0;
 }
 
-/* Action area styles - positioned as overlay */
 :host udp-card-action-area {
   position: absolute;
   top: 0;
@@ -42,19 +40,17 @@
   background: rgba(0, 0, 0, 0.04);
 }
 
-/* Keep actions above the action area */
 :host udp-card-actions {
   position: relative;
   z-index: 2;
 }
 
-/* Ensure buttons and interactive elements within actions are clickable */
 :host udp-card-actions ::slotted(*) {
   pointer-events: auto !important;
 }
 
 :host(.outlined) {
-  border: 1px solid var(--divider-color, 'red');
+  border: 1px solid var(--divider-color);
 }
 
 :host(.elevation-1) { box-shadow: var(--elevation-01); }
@@ -64,4 +60,4 @@
 :host(.elevation-5) { box-shadow: var(--elevation-05); }
 :host(.elevation-6) { box-shadow: var(--elevation-06); }
 :host(.elevation-7) { box-shadow: var(--elevation-07); }
-:host(.elevation-8) { box-shadow: var(--elevation-08); } 
+:host(.elevation-8) { box-shadow: var(--elevation-08); }

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,182 @@
+.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;
+}
+
+.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;
+}