@sme.up/ketchup 11.0.0-SNAPSHOT-20241031093946 → 11.0.0-SNAPSHOT-20241031094059

package/dist/components/kup-autocomplete2.js

@@ -13793,7 +13793,20 @@ var KupTabBarProps;
     KupTabBarProps["data"] = "List of elements.";
     KupTabBarProps["ripple"] = "When enabled displays Material's ripple effect on item headers.";
     KupTabBarProps["toolbar"] = "when true, it will show the toolbar activation icon";
+    KupTabBarProps["variant"] = "Variant of the component. It is either flat or contained";
 })(KupTabBarProps || (KupTabBarProps = {}));
+/**
+ * Styling options for the f-button component.
+ * @enum {string}
+ * @property {string} FLAT - Flat style: no background nor borders.
+ * @property {string} CONTAINED - Background and active field as background.
+
+ */
+var KupTabbarStyling;
+(function (KupTabbarStyling) {
+    KupTabbarStyling["FLAT"] = "flat";
+    KupTabbarStyling["CONTAINED"] = "contained";
+})(KupTabbarStyling || (KupTabbarStyling = {}));
 
 /**
  * Props of the kup-radio component.
@@ -17269,7 +17282,7 @@ function defineCustomElement$n() {
     } });
 }
 
-const kupTabBarCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_tabindicator_border_bottom_color:var(\n    --kup-tab-indicator-border-bottom-color,\n    var(--kup-layer-2)\n  );--kup_tabindicator_border_bottom_color_active:var(\n    --kup-tabindicator-border-bottom-color-active,\n    var(--kup-border-interactive)\n  );--kup_tabbar_text_color:var(\n    --kup-tabbar-text-color,\n    var(--kup-text-secondary)\n  );--kup_tabbar_text_color_active:var(\n    --kup-tabbar-text-color-active,\n    var(--kup-text-primary)\n  );--kup_tabbar_border_color_dense:var(\n    --kup-tabbar-border-color-dense,\n    var(--kup-border-strong)\n  );--kup_tabbar_font_size:var(--kup-tabbar-font-size, var(--kup-font-size));--kup_tabbar_font_weight:var(--kup-tabbar-font-weight, 500);--kup_tabbar_height:var(--kup-tabbar-height, 36px);--kup_tabbar_tab_padding:var(\n    --kup-tabbar-tab-padding,\n    0 var(--kup-space-05)\n  );display:block;font-size:var(--kup_tabbar_font_size)}.tab-bar{width:100%}.tab-bar .tab-scroller{height:var(--kup_tabbar_height);overflow-y:hidden}.tab-bar .tab-scroller .tab-scroller__scroll-area{display:flex;overflow-x:hidden;overflow:auto}.tab-bar .tab-scroller .tab-scroller__scroll-area .tab-scroller__scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform;gap:2px}.tab-bar .tab-scroller .tab{-webkit-font-smoothing:antialiased;padding:var(--kup_tabbar_tab_padding);position:relative;display:flex;box-sizing:border-box;gap:8px;margin:0px;border:none;flex:1 0;outline:2px solid transparent;outline-offset:-2px;background:none;text-align:left;white-space:nowrap;cursor:pointer;appearance:none;z-index:1;height:var(--kup_tabbar_height)}.tab-bar .tab-scroller .tab:focus{outline:2px solid var(--kup_tabindicator_border_bottom_color_active)}.tab-bar .tab-scroller .tab .tab__icon+.tab__text-label{padding-left:8px;padding-right:0px;font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.tab-bar .tab-scroller .tab .tab__icon .f-image__icon{background:var(--kup_tabbar_text_color) !important}.tab-bar .tab-scroller .tab.kup-danger{--kup_tabbar_text_color:var(--kup-danger-color-60);--kup_tabindicator_border_bottom_color:var(--kup-danger-color-60);--kup_tabindicator_border_bottom_color:var(--kup-danger-color-60);--kup_tabindicator_border_bottom_color_active:var(\n    --kup-danger-color-60\n  )}.tab-bar .tab-scroller .tab.kup-danger:focus{outline:2px solid var(--kup-danger-color-60)}.tab-bar .tab-scroller .tab:hover{background-color:rgba(var(--kup_tabbar_primary_color_rgb), 0.075)}.tab-bar .tab-scroller .tab:hover .tab-indicator .tab-indicator__content--underline{--kup_tabindicator_border_bottom_color:var(--kup-border-strong)}.tab-bar .tab-scroller .tab.tab--active .tab__iconToolbar{opacity:0.3}.tab-bar .tab-scroller .tab.tab--active:hover .tab__iconToolbar:hover{opacity:1;background-color:var(--kup-gray-color-20-hover)}.tab-bar .tab-scroller .tab.tab--active .tab__content .tab__icon{transition-delay:100ms}.tab-bar .tab-scroller .tab.tab--active .tab__content .tab__text-label{transition-delay:100ms;font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.tab-bar .tab-scroller .tab[disabled]{--kup_tabindicator_border_bottom_color:var(--kup-border-disabled);--kup_tabbar_text_color:var(--kup-text-disabled);pointer-events:none}.tab-bar .tab-scroller .tab.kup-dense{background:var(--kup-layer-2);border-right:1px solid var(--kup_tabbar_border_color_dense)}.tab-bar .tab-scroller .tab.kup-dense.tab--active{background:var(--kup-layer-2-selected)}.tab-bar .tab-scroller .tab.kup-dense:hover{background:var(--kup-layer-2-hover)}.tab-bar .tab-scroller .tab.kup-dense .tab-indicator{height:2px;border-color:transparent}.tab-bar .tab-scroller .tab.kup-dense .tab-indicator--active .tab-indicator__content{border-color:var(--kup_tabindicator_border_bottom_color_active)}@media screen and (min-width: 678px){.tab-bar .tab-scroller .tab{flex:none}}.tab-bar .tab-scroller .tab__content{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;height:inherit;pointer-events:none;gap:var(--kup-space-03)}.tab-bar .tab-scroller .tab__content .tab__icon{transition:color 150ms linear 0s;width:16px;height:16px;font-size:16px;z-index:2;margin:0}.tab-bar .tab-scroller .tab__content .tab__icon.kup-icon{height:16px;width:16px}.tab-bar .tab-scroller .tab__content .tab__text-label{transition:color 150ms linear 0s;display:inline-block;line-height:1;z-index:2;color:var(--kup_tabbar_text_color);min-width:auto}@media screen and (min-width: 678px){.tab-bar .tab-scroller .tab__content .tab__text-label{min-width:150px}}.tab-bar .tab-scroller .tab__iconToolbar{opacity:0}.tab-bar .tab-scroller .tab-indicator{display:flex;position:absolute;top:0px;left:0px;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.tab-bar .tab-scroller .tab-indicator.tab-indicator--active .tab-indicator__content{opacity:1;border-color:var(--kup_tabindicator_border_bottom_color_active)}.tab-bar .tab-scroller .tab-indicator .tab-indicator__content{transform-origin:left center}.tab-bar .tab-scroller .tab-indicator .tab-indicator__content.tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid;border-top-width:2px;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s;color:var(--kup_tabindicator_border_bottom_color)}.mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_tabbar_primary_color)}";
+const kupTabBarCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_tabindicator_border_bottom_color:var(\n    --kup-tab-indicator-border-bottom-color,\n    var(--kup-layer-2)\n  );--kup_tabindicator_border_bottom_color_active:var(\n    --kup-tabindicator-border-bottom-color-active,\n    var(--kup-border-interactive)\n  );--kup_tabbar_text_color:var(\n    --kup-tabbar-text-color,\n    var(--kup-text-secondary)\n  );--kup_tabbar_text_color_active:var(\n    --kup-tabbar-text-color-active,\n    var(--kup-text-primary)\n  );--kup_tabbar_border_color_dense:var(\n    --kup-tabbar-border-color-dense,\n    var(--kup-border-strong)\n  );--kup_tabbar_font_size:var(--kup-tabbar-font-size, var(--kup-font-size));--kup_tabbar_font_weight:var(--kup-tabbar-font-weight, 500);--kup_tabbar_height:var(--kup-tabbar-height, 36px);--kup_tabbar_tab_padding:var(\n    --kup-tabbar-tab-padding,\n    0 var(--kup-space-05)\n  );display:block;font-size:var(--kup_tabbar_font_size)}.tab-bar{width:100%}.tab-bar .tab-scroller{height:var(--kup_tabbar_height);overflow-y:hidden}.tab-bar .tab-scroller .tab-scroller__scroll-area{display:flex;overflow-x:hidden;overflow:auto}.tab-bar .tab-scroller .tab-scroller__scroll-area .tab-scroller__scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform;gap:2px}.tab-bar .tab-scroller .tab{-webkit-font-smoothing:antialiased;padding:var(--kup_tabbar_tab_padding);position:relative;display:flex;box-sizing:border-box;gap:8px;margin:0px;border:none;flex:1 0;outline:2px solid transparent;outline-offset:-2px;background:none;text-align:left;white-space:nowrap;cursor:pointer;appearance:none;z-index:1;height:var(--kup_tabbar_height)}.tab-bar .tab-scroller .tab:focus{outline:2px solid var(--kup_tabindicator_border_bottom_color_active)}.tab-bar .tab-scroller .tab .tab__icon+.tab__text-label{padding-left:8px;padding-right:0px;font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.tab-bar .tab-scroller .tab .tab__icon .f-image__icon{background:var(--kup_tabbar_text_color) !important}.tab-bar .tab-scroller .tab.kup-danger{--kup_tabbar_text_color:var(--kup-danger-color-60);--kup_tabindicator_border_bottom_color:var(--kup-danger-color-60);--kup_tabindicator_border_bottom_color:var(--kup-danger-color-60);--kup_tabindicator_border_bottom_color_active:var(\n    --kup-danger-color-60\n  )}.tab-bar .tab-scroller .tab.kup-danger:focus{outline:2px solid var(--kup-danger-color-60)}.tab-bar .tab-scroller .tab:hover{background-color:rgba(var(--kup_tabbar_primary_color_rgb), 0.075)}.tab-bar .tab-scroller .tab:hover .tab-indicator .tab-indicator__content--underline{--kup_tabindicator_border_bottom_color:var(--kup-border-strong)}.tab-bar .tab-scroller .tab.tab--active .tab__iconToolbar{opacity:0.3;min-width:16px}.tab-bar .tab-scroller .tab.tab--active:hover .tab__iconToolbar:hover{opacity:1;background-color:var(--kup-gray-color-20-hover)}.tab-bar .tab-scroller .tab.tab--active .tab__content .tab__icon{transition-delay:100ms}.tab-bar .tab-scroller .tab.tab--active .tab__content .tab__text-label{transition-delay:100ms;font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.tab-bar .tab-scroller .tab[disabled]{--kup_tabindicator_border_bottom_color:var(--kup-border-disabled);--kup_tabbar_text_color:var(--kup-text-disabled);pointer-events:none}.tab-bar .tab-scroller .tab.kup-dense{background:var(--kup-layer-2);border-right:1px solid var(--kup_tabbar_border_color_dense)}.tab-bar .tab-scroller .tab.kup-dense.tab--active{background:var(--kup-layer-2-selected)}.tab-bar .tab-scroller .tab.kup-dense:hover{background:var(--kup-layer-2-hover)}.tab-bar .tab-scroller .tab.kup-dense .tab-indicator{height:2px;border-color:transparent}.tab-bar .tab-scroller .tab.kup-dense .tab-indicator--active .tab-indicator__content{border-color:var(--kup_tabindicator_border_bottom_color_active)}@media screen and (min-width: 678px){.tab-bar .tab-scroller .tab{flex:none}}.tab-bar .tab-scroller .tab__content{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;height:inherit;pointer-events:none;gap:var(--kup-space-03)}.tab-bar .tab-scroller .tab__content .tab__icon{transition:color 150ms linear 0s;width:16px;height:16px;font-size:16px;z-index:2;margin:0}.tab-bar .tab-scroller .tab__content .tab__icon.kup-icon{height:16px;width:16px}.tab-bar .tab-scroller .tab__content .tab__text-label{transition:color 150ms linear 0s;display:inline-block;line-height:1;z-index:2;color:var(--kup_tabbar_text_color);min-width:auto}@media screen and (min-width: 678px){.tab-bar .tab-scroller .tab__content .tab__text-label{min-width:150px}}.tab-bar .tab-scroller .tab__iconToolbar{opacity:0}.tab-bar .tab-scroller .tab-indicator{display:flex;position:absolute;top:0px;left:0px;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.tab-bar .tab-scroller .tab-indicator.tab-indicator--active .tab-indicator__content{opacity:1;border-color:var(--kup_tabindicator_border_bottom_color_active)}.tab-bar .tab-scroller .tab-indicator .tab-indicator__content{transform-origin:left center}.tab-bar .tab-scroller .tab-indicator .tab-indicator__content.tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid;border-top-width:2px;transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s;color:var(--kup_tabindicator_border_bottom_color)}.tab-bar.tab-bar--contained .tab-scroller .tab-scroller__scroll-content{gap:0px}.tab-bar.tab-bar--contained .tab{background-color:var(--kup-gray-color-10);border-right:1px solid var(--kup-gray-color-20)}.tab-bar.tab-bar--contained .tab:nth-last-child(1){border-right:none}.tab-bar.tab-bar--contained .tab:hover{background-color:var(--kup-gray-color-10-hover)}.tab-bar.tab-bar--contained .tab .tab-indicator{height:auto}.tab-bar.tab-bar--contained .tab--active{background-color:var(--kup-gray-color-0);border:none}.mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_tabbar_primary_color)}";
 const KupTabBarStyle0 = kupTabBarCss;
 
 var __classPrivateFieldSet$5 = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
@@ -17315,6 +17328,7 @@ const KupTabBar = /*@__PURE__*/ proxyCustomElement(class KupTabBar extends HTMLE
         this.value = '';
         this.customStyle = '';
         this.data = null;
+        this.variant = KupTabbarStyling.FLAT;
         this.dense = false;
         this.ripple = false;
         this.toolbar = true;
@@ -17521,7 +17535,11 @@ const KupTabBar = /*@__PURE__*/ proxyCustomElement(class KupTabBar extends HTMLE
                 }, wrapperClass: "tab__iconToolbar" })), h("span", { class: `tab-indicator ${node.active ? ' tab-indicator--active' : ''}` }, h("span", { class: "tab-indicator__content tab-indicator__content--underline" }))));
             tabBar.push(tabEl);
         }
-        return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: "tab-bar", role: "tablist" }, h("div", { class: "tab-scroller" }, h("div", { class: "tab-scroller__scroll-area", ref: (el) => (this.scrollArea =
+        const tabbarRole = {
+            'tab-bar': true,
+            [`tab-bar--${this.variant}`]: this.variant ? true : false,
+        };
+        return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: tabbarRole, role: "tablist" }, h("div", { class: "tab-scroller" }, h("div", { class: "tab-scroller__scroll-area", ref: (el) => (this.scrollArea =
                 el) }, h("div", { class: "tab-scroller__scroll-content" }, tabBar)))))));
     }
     disconnectedCallback() {
@@ -17536,6 +17554,7 @@ const KupTabBar = /*@__PURE__*/ proxyCustomElement(class KupTabBar extends HTMLE
 }, [1, "kup-tab-bar", {
         "customStyle": [1, "custom-style"],
         "data": [16],
+        "variant": [1],
         "dense": [4],
         "ripple": [4],
         "toolbar": [4],