npm - @jumpgroup/jump-design-system - Versions diffs - 0.3.69 → 0.3.71 - Mend

@jumpgroup/jump-design-system 0.3.69 → 0.3.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (165) hide show

package/dist/cjs/jump-side-cart.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"jump-side-cart.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/jump-side-cart/jump-side-cart.scss?tag=jump-side-cart&encapsulation=shadow","src/components/jump-side-cart/jump-side-cart.tsx"],"sourcesContent":[":host {\n --cart-width: 400px;\n --cart-bg: #ffffff;\n --overlay-bg: rgba(0, 0, 0, 0.5);\n --border-color: #e5e5e5;\n --text-primary: #333333;\n --text-secondary: #666666;\n --primary-color: #80bb55;\n --secondary-color: #f5f5f5;\n --error-color: #dc3545;\n --success-color: #28a745;\n}\n\n.side-cart {\n position: fixed;\n top: 0;\n bottom: 0;\n width: 100%;\n z-index: 1000;\n pointer-events: none;\n\n &--open {\n pointer-events: all;\n }\n\n &--right {\n right: 0;\n\n .side-cart__content {\n right: 0;\n transform: translateX(100%);\n }\n\n &.side-cart--open .side-cart__content {\n transform: translateX(0);\n }\n }\n\n &--left {\n left: 0;\n\n .side-cart__content {\n left: 0;\n transform: translateX(-100%);\n }\n\n &.side-cart--open .side-cart__content {\n transform: translateX(0);\n }\n }\n}\n\n.side-cart__overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--overlay-bg);\n opacity: 0;\n transition: opacity 0.3s ease;\n\n .side-cart--open & {\n opacity: 1;\n }\n}\n\n.side-cart__content {\n position: absolute;\n top: 0;\n bottom: 0;\n width: var(--cart-width);\n max-width: 90vw;\n background: var(--cart-bg);\n box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s ease;\n display: flex;\n flex-direction: column;\n\n .side-cart--left & {\n box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);\n }\n}\n\n.side-cart__header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem;\n border-bottom: 1px solid var(--border-color);\n\n h2 {\n margin: 0;\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--text-primary);\n }\n\n .close-btn {\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n color: var(--text-secondary);\n padding: 0.25rem;\n line-height: 1;\n\n &:hover {\n color: var(--text-primary);\n }\n }\n}\n\n.side-cart__body {\n flex: 1;\n overflow-y: auto;\n padding: 1rem;\n}\n\n.empty-cart {\n text-align: center;\n padding: 2rem 0;\n color: var(--text-secondary);\n}\n\n.cart-items {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.cart-item {\n display: flex;\n gap: 0.75rem;\n padding: 1rem;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n\n &__image {\n flex-shrink: 0;\n width: 80px;\n height: 80px;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: 4px;\n }\n }\n\n &__details {\n flex: 1;\n min-width: 0;\n }\n\n &__brand {\n font-size: 0.75rem;\n color: var(--text-secondary);\n margin-bottom: 0.25rem;\n text-transform: uppercase;\n font-weight: 500;\n }\n\n &__name {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--text-primary);\n margin-bottom: 0.25rem;\n line-height: 1.3;\n }\n\n &__description {\n font-size: 0.75rem;\n color: var(--text-secondary);\n margin-bottom: 0.5rem;\n }\n\n &__price {\n font-weight: 600;\n color: var(--text-primary);\n }\n\n &__original-price {\n margin-left: 0.5rem;\n text-decoration: line-through;\n color: var(--text-secondary);\n font-weight: normal;\n }\n\n &__controls {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n align-items: center;\n }\n}\n\n.quantity-controls {\n display: flex;\n align-items: center;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n\n .quantity-btn {\n background: none;\n border: none;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n color: var(--text-primary);\n\n &:hover:not(:disabled) {\n background: var(--secondary-color);\n }\n\n &:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n\n .quantity {\n min-width: 40px;\n text-align: center;\n padding: 0 0.5rem;\n border-left: 1px solid var(--border-color);\n border-right: 1px solid var(--border-color);\n font-weight: 500;\n }\n}\n\n.remove-btn {\n background: none;\n border: none;\n color: var(--error-color);\n font-size: 0.75rem;\n cursor: pointer;\n padding: 0.25rem 0.5rem;\n border-radius: 4px;\n\n &:hover {\n background: rgba(220, 53, 69, 0.1);\n }\n}\n\n.progress-section {\n margin-top: 1.5rem;\n padding-top: 1rem;\n border-top: 1px solid var(--border-color);\n}\n\n.progress-bar {\n width: 100%;\n height: 8px;\n background: var(--secondary-color);\n border-radius: 4px;\n overflow: hidden;\n margin-bottom: 0.5rem;\n\n .progress-fill {\n height: 100%;\n background: var(--primary-color);\n transition: width 0.3s ease;\n }\n}\n\n.progress-text {\n font-size: 0.875rem;\n color: var(--text-secondary);\n text-align: center;\n}\n\n.side-cart__footer {\n border-top: 1px solid var(--border-color);\n padding: 1rem;\n}\n\n.totals {\n margin-bottom: 1rem;\n\n .subtotal, .savings {\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.5rem;\n }\n\n .subtotal {\n font-weight: 600;\n font-size: 1.125rem;\n }\n\n .savings {\n color: var(--success-color);\n font-size: 0.875rem;\n }\n}\n\n.actions {\n display: flex;\n gap: 0.75rem;\n\n .btn {\n flex: 1;\n padding: 0.75rem;\n border: none;\n border-radius: 6px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n\n &--primary {\n background: var(--primary-color);\n color: white;\n\n &:hover {\n background: #68a03b; /* Darker shade of --primary-color */\n filter: brightness(0.9);\n }\n }\n\n &--secondary {\n background: var(--secondary-color);\n color: var(--text-primary);\n border: 1px solid var(--border-color);\n\n &:hover {\n background: #e8e8e8; /* Darker shade of --secondary-color */\n filter: brightness(0.95);\n }\n }\n }\n}\n\n// Responsive adjustments\n@media (max-width: 768px) {\n .side-cart__content {\n width: 100vw;\n max-width: none;\n }\n\n .cart-item {\n &__details {\n font-size: 0.8rem;\n }\n\n &__name {\n font-size: 0.8rem;\n }\n }\n}\n","import { Component, Prop, State, h, Event, EventEmitter } from '@stencil/core';\n\nexport interface CartItem {\n id: string | number;\n name: string;\n brand: string;\n price: number;\n originalPrice?: number;\n quantity: number;\n image: string;\n description: string;\n}\n\nexport interface DiscountThreshold {\n amount: number;\n percentage: number;\n}\n\n@Component({\n tag: 'jump-side-cart',\n styleUrl: 'jump-side-cart.scss',\n shadow: true,\n})\nexport class JumpSideCart {\n @Prop() isOpen: boolean = false;\n @Prop() position: 'left' | 'right' = 'right';\n @Prop() items: CartItem[] = [];\n @Prop() discountThreshold?: DiscountThreshold;\n @Prop() freeShippingThreshold?: number;\n @Prop() progressPercentage: number = 0;\n @Prop() checkoutLabel: string = 'Checkout';\n @Prop() viewCartLabel: string = 'View Cart';\n @Prop() shippingInfo?: string;\n\n @State() cartItems: CartItem[] = [];\n\n @Event() cartClosed: EventEmitter<void>;\n @Event() itemQuantityChanged: EventEmitter<{itemId: string | number, quantity: number}>;\n @Event() itemRemoved: EventEmitter<string | number>;\n @Event() checkoutClicked: EventEmitter<void>;\n @Event() viewCartClicked: EventEmitter<void>;\n\n componentWillLoad() {\n this.cartItems = [...this.items];\n }\n\n componentWillUpdate() {\n if (this.items !== this.cartItems) {\n this.cartItems = [...this.items];\n }\n }\n\n private handleClose = () => {\n this.cartClosed.emit();\n }\n\n private handleQuantityChange = (itemId: string | number, newQuantity: number) => {\n if (newQuantity < 1) return;\n \n this.cartItems = this.cartItems.map(item => \n item.id === itemId ? { ...item, quantity: newQuantity } : item\n );\n \n this.itemQuantityChanged.emit({ itemId, quantity: newQuantity });\n }\n\n private handleRemoveItem = (itemId: string | number) => {\n this.cartItems = this.cartItems.filter(item => item.id !== itemId);\n this.itemRemoved.emit(itemId);\n }\n\n private calculateSubtotal = (): number => {\n return this.cartItems.reduce((total, item) => total + (item.price * item.quantity), 0);\n }\n\n private calculateSavings = (): number => {\n return this.cartItems.reduce((total, item) => {\n if (item.originalPrice) {\n return total + ((item.originalPrice - item.price) * item.quantity);\n }\n return total;\n }, 0);\n }\n\n private renderCartItem = (item: CartItem) => {\n return (\n <div class=\"cart-item\" key={item.id}>\n <div class=\"cart-item__image\">\n <img src={item.image} alt={item.name} />\n </div>\n <div class=\"cart-item__details\">\n <div class=\"cart-item__brand\">{item.brand}</div>\n <div class=\"cart-item__name\">{item.name}</div>\n <div class=\"cart-item__description\">{item.description}</div>\n <div class=\"cart-item__price\">\n €{item.price.toFixed(2)}\n {item.originalPrice && (\n <span class=\"cart-item__original-price\">€{item.originalPrice.toFixed(2)}</span>\n )}\n </div>\n </div>\n <div class=\"cart-item__controls\">\n <div class=\"quantity-controls\">\n <button \n class=\"quantity-btn\"\n onClick={() => this.handleQuantityChange(item.id, item.quantity - 1)}\n disabled={item.quantity <= 1}\n >\n -\n </button>\n <span class=\"quantity\">{item.quantity}</span>\n <button \n class=\"quantity-btn\"\n onClick={() => this.handleQuantityChange(item.id, item.quantity + 1)}\n >\n +\n </button>\n </div>\n <button \n class=\"remove-btn\"\n onClick={() => this.handleRemoveItem(item.id)}\n >\n Remove\n </button>\n </div>\n </div>\n );\n }\n\n private renderProgressBar = () => {\n if (!this.discountThreshold && !this.freeShippingThreshold) return null;\n\n const threshold = this.discountThreshold?.amount || this.freeShippingThreshold || 0;\n const current = this.calculateSubtotal();\n const percentage = Math.min((current / threshold) * 100, 100);\n\n return (\n <div class=\"progress-section\">\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" style={{ width: `${percentage}%` }}></div>\n </div>\n <div class=\"progress-text\">\n {this.shippingInfo || (\n this.freeShippingThreshold ? \n `€${Math.max(0, this.freeShippingThreshold - current).toFixed(2)} away from free shipping` :\n `€${Math.max(0, threshold - current).toFixed(2)} away from ${this.discountThreshold?.percentage}% discount`\n )}\n </div>\n </div>\n );\n }\n\n render() {\n if (!this.isOpen) return null;\n\n const subtotal = this.calculateSubtotal();\n const savings = this.calculateSavings();\n\n return (\n <div class={`side-cart side-cart--${this.position} ${this.isOpen ? 'side-cart--open' : ''}`}>\n <div class=\"side-cart__overlay\" onClick={this.handleClose}></div>\n \n <div class=\"side-cart__content\">\n <div class=\"side-cart__header\">\n <h2>Shopping Cart ({this.cartItems.length})</h2>\n <button class=\"close-btn\" onClick={this.handleClose}>×</button>\n </div>\n\n <div class=\"side-cart__body\">\n {this.cartItems.length === 0 ? (\n <div class=\"empty-cart\">\n <p>Your cart is empty</p>\n </div>\n ) : (\n <div class=\"cart-items\">\n {this.cartItems.map(item => this.renderCartItem(item))}\n </div>\n )}\n\n {this.renderProgressBar()}\n </div>\n\n {this.cartItems.length > 0 && (\n <div class=\"side-cart__footer\">\n <div class=\"totals\">\n <div class=\"subtotal\">\n <span>Subtotal:</span>\n <span>€{subtotal.toFixed(2)}</span>\n </div>\n {savings > 0 && (\n <div class=\"savings\">\n <span>You save:</span>\n <span>€{savings.toFixed(2)}</span>\n </div>\n )}\n </div>\n \n <div class=\"actions\">\n <button \n class=\"btn btn--secondary\"\n onClick={() => this.viewCartClicked.emit()}\n >\n {this.viewCartLabel}\n </button>\n <button \n class=\"btn btn--primary\"\n onClick={() => this.checkoutClicked.emit()}\n >\n {this.checkoutLabel}\n </button>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/jump-tab-item.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-864e40de.js');
+const index = require('./index-230bcbae.js');
 const jumpTabItemCss = ":host{display:block;--jump-tabitem-active-color:var(--secondary-standard);--jump-tabitem-color:var(--neutral-grey-secondary);--jump-tabitem-hover-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-boxed-bg-color:var(--secondary-soft, #EDF2FA);--jump-tabitem-rounded-bg-color:white;--jump-tabitem-border-inline-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-font-size:16px;--jump-tabitem-inline-padding:12px 24px;--jump-tabitem-boxed-padding:15px 39px;--jump-tabitem-rounded-padding:12px 32px;--jump-tabitem-sheet-padding:12px 32px;font-family:var(--ff-primary);flex:0 0 auto}:host .Content{display:flex;}:host .Content:hover:not(.disabled){cursor:pointer}:host .Content .label{font-size:var(--jump-tabitem-font-size)}:host .Content.left{flex-direction:row;gap:6px;align-items:center}:host .Content.top{flex-direction:column;gap:2px;align-items:center}:host .Content.inline{color:var(--jump-tabitem-color);padding:var(--jump-tabitem-inline-padding);border-bottom:1px solid var(--jump-tabitem-border-inline-color)}:host .Content.inline:not(.active){padding-bottom:14px}:host .Content.inline.active{color:var(--jump-tabitem-active-color);border-bottom:3px solid var(--jump-tabitem-active-color)}:host .Content.inline.active span{font-weight:bold}:host .Content.inline:hover:not(.disabled):not(.active){border-bottom:3px solid var(--jump-tabitem-hover-color);cursor:pointer;padding-bottom:12px}:host .Content.boxed{color:var(--jump-tabitem-color);padding:var(--jump-tabitem-boxed-padding);background-color:transparent;border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed:hover:not(.disabled),:host .Content.boxed:hover:not(.active){background-color:transparent}:host .Content.boxed:hover:not(.disabled) span,:host .Content.boxed:hover:not(.active) span{font-weight:bold}:host .Content.boxed.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-boxed-bg-color);border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed.active span{font-weight:bold}:host .Content.rounded{padding:var(--jump-tabitem-rounded-padding);color:var(--jump-tabitem-color)}:host .Content.rounded:hover:not(.disabled){cursor:pointer}:host .Content.rounded:hover:not(.disabled) span{font-weight:bold}:host .Content.rounded.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border:1px solid var(--jump-tabitem-active-color);border-radius:50px}:host .Content.sheet{padding:var(--jump-tabitem-sheet-padding);color:var(--neutral-grey-secondary)}:host .Content.sheet:hover:not(.disabled){cursor:pointer}:host .Content.sheet:hover:not(.disabled) span{font-weight:bold}:host .Content.sheet.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border-radius:8px 8px 0px 0px}:host(.disabled){cursor:not-allowed;opacity:0.5;pointer-events:none}";
 const JumpTabItemStyle0 = jumpTabItemCss;
@@ -28,8 +28,8 @@ const JumpTabItem = class {
         this.variant = parentVariant;
     }
     render() {
-        return (index.h(index.Host, { key: '20bcab66648d2c1a2dab7fa45aeaf160cba65be0', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) + " " + (this.disabled ? 'disabled' : '') }, index.h("div", { key: '31fbceda6a68188b055c0e1d15ca2911a584c87a', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
-            index.h("jump-icon", { key: 'e3760a45cfc90383b284268d5185b04cfdc30a8e', library: "fa", category: "regular", name: this.iconName, size: "small" }), index.h("span", { key: 'ee2b41643c241569429b359c121d1c0827de7cbf', class: "label" }, this.label))));
+        return (index.h(index.Host, { key: 'a4c96d6aa528be6ef7585117065610a4ab259477', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) + " " + (this.disabled ? 'disabled' : '') }, index.h("div", { key: '938011134a1e7b8b779529c98c82287e6074d544', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
+            index.h("jump-icon", { key: 'fc52b89c2dfe2e00928bf7df8231a1efed0934f5', library: "fa", category: "regular", name: this.iconName, size: "small" }), index.h("span", { key: '505a8245b25b7ea1f9c63221f344aba04ab438e1', class: "label" }, this.label))));
     }
 };
 JumpTabItem.style = JumpTabItemStyle0;

package/dist/cjs/jump-tab-panel.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-864e40de.js');
+const index = require('./index-230bcbae.js');
 const jumpTabPanelCss = ":host{display:block}.JumpTabPanel__Content{display:none;padding:1rem 0}.JumpTabPanel__Content.active{display:block}";
 const JumpTabPanelStyle0 = jumpTabPanelCss;
@@ -14,7 +14,7 @@ const JumpTabPanel = class {
         this.active = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'cf92120024b87b2226981c093ff8addeb9f6047e', class: "JumpTabPanel", id: this.identifier }, index.h("div", { key: 'b3705621ee187894cdf1f0eda5fef73573046646', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, index.h("slot", { key: '8f42f264b401f8f9c5336bdb6216bdb13fb2ba0d' }))));
+        return (index.h(index.Host, { key: 'd9f90af98ebb99d55241c3fef49e5d8e08f8540f', class: "JumpTabPanel", id: this.identifier }, index.h("div", { key: '6fc79b82988a87e0c3e13b08dcd08305e173eaab', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, index.h("slot", { key: 'ac3bfea8a132096ae27e9fbd146e090626c72ff5' }))));
     }
 };
 JumpTabPanel.style = JumpTabPanelStyle0;

package/dist/cjs/jump-tab.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-864e40de.js');
+const index = require('./index-230bcbae.js');
-const jumpTabCss = ":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB);overflow-x:auto;scrollbar-width:none;}:host::-webkit-scrollbar{display:none;}.Wrapper{display:flex;flex-direction:column;overflow-x:auto;scrollbar-width:none;}.Wrapper::-webkit-scrollbar{display:none;}.ContentWrapper{display:flex;width:100%;justify-content:var(--alignment, flex-start)}@media (max-width: 768px){.ContentWrapper.ContentWrapper--Items{justify-content:flex-start;overflow-x:auto}.ContentWrapper.ContentWrapper--Items .fullBorder{justify-content:flex-start}}.Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}.Content.fullBorder{width:100%;border-bottom:1px solid var(--jump-tab-border-color);justify-content:var(--alignment, flex-start)}.Content.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}.Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color)}.Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}";
+const jumpTabCss = ":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB);overflow-x:auto;scrollbar-width:none;}:host::-webkit-scrollbar{display:none;}.Wrapper{display:flex;flex-direction:column;overflow-x:auto;scrollbar-width:none;}.Wrapper::-webkit-scrollbar{display:none;}.ContentWrapper{display:flex;flex-direction:column;width:100%;justify-content:var(--alignment, flex-start)}@media (max-width: 768px){.ContentWrapper.ContentWrapper--Items{justify-content:flex-start;overflow-x:auto}.ContentWrapper.ContentWrapper--Items .fullBorder{justify-content:flex-start}}.Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}.Content.fullBorder{width:100%;border-bottom:1px solid var(--jump-tab-border-color);justify-content:var(--alignment, flex-start)}.Content.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}.Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color)}.Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}";
 const JumpTabStyle0 = jumpTabCss;
 const JumpTab = class {
@@ -76,7 +76,7 @@ const JumpTab = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8a0199ca73b829bf916eb0065ea2349e3893b6d0', class: "JumpTab " + this.variant, id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, index.h("div", { key: 'dbdef0b65d8149dd17f71022b802b53e6917dd4f', class: "Wrapper " + (this.fullBorder ? 'fullBorder' : '') }, index.h("div", { key: 'e8115b34e124bc2d85a273867dac7ab82a09db65', class: "ContentWrapper ContentWrapper--Items", style: { '--alignment': this.getAlignment(this.alignment) } }, index.h("div", { key: '973243bfa74224b6184d62ce36536f4720561f9c', class: "Content " + this.variant + " " + (this.disabled ? 'disabled' : '') + " " + (this.fullBorder ? 'fullBorder' : ''), style: { '--alignment': this.getAlignment(this.alignment) } }, index.h("slot", { key: 'c6ee4fb22decdb4f1e3d89e679987cd211e722ec', name: "tab-item" }))), index.h("div", { key: 'fa9565bba6ab3bc3eff4f9f232bfbd80829f6d4c', class: "ContentWrapper ContentWrapper--Panel" }, index.h("slot", { key: '0754dcab98e5e8ca3bd27babd3b90f9083c0c489', name: "tab-content" })))));
+        return (index.h(index.Host, { key: 'eb67c13009a3d5bb2ea7275c02a0cf4936496244', class: "JumpTab " + this.variant, id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, index.h("div", { key: '2be879c8dc231a42c69457353855d52ef438339d', class: "Wrapper " + (this.fullBorder ? 'fullBorder' : '') }, index.h("div", { key: '7dcbffc75c62e3dd64ecf47f50f0b308c4882a04', class: "ContentWrapper ContentWrapper--Items", style: { '--alignment': this.getAlignment(this.alignment) } }, index.h("div", { key: '17c437c456684b5fcac81e5df964ac316c8b7371', class: "Content " + this.variant + " " + (this.disabled ? 'disabled' : '') + " " + (this.fullBorder ? 'fullBorder' : ''), style: { '--alignment': this.getAlignment(this.alignment) } }, index.h("slot", { key: '14b413cc2687aa73e848bb0bdccb2b9121d46fc3', name: "tab-item" }))), index.h("div", { key: 'fd9ed0cddc9fec9779b5a76e5a378bdd7f153c08', class: "ContentWrapper ContentWrapper--Panel" }, index.h("slot", { key: '0bd78d8369b8402f5e8d1182b82d0110209c57c2', name: "tab-content" })))));
     }
     getAlignment(alignment) {
         switch (alignment) {

package/dist/cjs/jump-tab.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"jump-tab.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,~~wpCAAwpC~~,CAAC;~~AAC5qC~~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","names":["h","Host"],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);\n --jump-tab-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n /* Permette lo scroll orizzontale /\n overflow-x: auto;\n scrollbar-width: none;\n / Nasconde la scrollbar in Firefox /\n}\n\n:host::-webkit-scrollbar {\n display: none;\n / Nasconde la scrollbar in Chrome, Safari e Edge /\n}\n\n.Wrapper {\n display: flex;\n flex-direction: column;\n\n / Permette lo scroll orizzontale /\n overflow-x: auto;\n scrollbar-width: none;\n / Nasconde la scrollbar in Firefox /\n}\n\n.Wrapper::-webkit-scrollbar {\n display: none;\n / Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.ContentWrapper {\n display: flex;\n width: 100%;\n justify-content: var(--alignment, flex-start);\n\n &.ContentWrapper--Items {\n @media (max-width: 768px) {\n justify-content: flex-start;\n overflow-x: auto;\n\n .fullBorder {\n justify-content: flex-start;\n }\n }\n }\n}\n\n.Content {\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n width: fit-content;\n\n &.fullBorder {\n width: 100%;\n border-bottom: 1px solid var(--jump-tab-border-color);\n justify-content: var(--alignment, flex-start);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n\n &.rounded {\n border-radius: 50px;\n background-color: var(--jump-tab-bg-color);\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n}\n\njump-tab-item {\n display: flex;\n align-items: flex-end;\n overflow: hidden;\n\n .tab-title {\n display: block;\n white-space: normal;\n text-align: center;\n }\n}\n","import { Component, Host, Event, EventEmitter, Prop, h, Listen } from '@stencil/core';\n\n@Component({\n tag: 'jump-tab',\n styleUrl: 'jump-tab.scss',\n shadow: true,\n})\nexport class JumpTab {\n JumpTabEl: HTMLElement;\n\n @Prop() disabled: boolean = false;\n @Prop() alignment: string = 'left';\n @Prop() fullBorder: boolean = false;\n @Prop() tabGroupName: string = undefined;\n @Prop() variant: string = 'inline';\n\n @Event({ eventName: 'jump-change-activetab' }) setActiveTab: EventEmitter;\n\n @Listen('jump-change-active-tab')\n changeActiveTabHandler(event: CustomEvent) {\n this.setActiveTab.emit(event.detail);\n\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item) => {\n if (item.getAttribute('identifier') === event.detail.id) {\n item.setAttribute('active', '');\n\n if (this.variant === 'sheet') {\n items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`;\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\n let previousSibling = item.previousElementSibling as any;\n if (previousSibling) {\n previousSibling.style.borderRight = '1px solid transparent';\n }\n }\n\n } else {\n item.removeAttribute('active');\n }\n });\n }\n\n let panel = this.JumpTabEl.querySelectorAll('jump-tab-panel');\n if (panel.length > 0) {\n panel.forEach((panel) => {\n if (panel.getAttribute('identifier') === event.detail.id) {\n panel.setAttribute('active', '');\n } else {\n panel.removeAttribute('active');\n }\n });\n }\n }\n\n componentDidLoad() {\n if (this.variant === 'sheet') {\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item, index) => {\n if (index === items.length - 1 \|\| item.classList.contains('active')) {\n item.style.borderRight = '1px solid transparent';\n } else {\n item.style.borderRight = `1px solid ${primaryColor}`;\n }\n });\n }\n }\n }\n\n render() {\n return (\n <Host class={\"JumpTab \" + this.variant} id={this.tabGroupName} ref={(el) => { this.JumpTabEl = el; }}>\n <div class={\"Wrapper \" + (this.fullBorder ? 'fullBorder' : '')}>\n <div class={\"ContentWrapper ContentWrapper--Items\"} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <div class={\"Content \" + this.variant + \" \" + (this.disabled ? 'disabled' : '') + \" \" + (this.fullBorder ? 'fullBorder' : '')} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <slot name=\"tab-item\"></slot>\n </div>\n </div>\n <div class=\"ContentWrapper ContentWrapper--Panel\">\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n private getAlignment(alignment: string): string {\n switch (alignment) {\n case 'center':\n return 'center';\n case 'right':\n return 'flex-end';\n default:\n return 'flex-start';\n }\n }\n}\n"],"version":3}
1	+ {"file":"jump-tab.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);\n --jump-tab-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n /* Permette lo scroll orizzontale /\n overflow-x: auto;\n scrollbar-width: none;\n / Nasconde la scrollbar in Firefox /\n}\n\n:host::-webkit-scrollbar {\n display: none;\n / Nasconde la scrollbar in Chrome, Safari e Edge /\n}\n\n.Wrapper {\n display: flex;\n flex-direction: column;\n\n / Permette lo scroll orizzontale /\n overflow-x: auto;\n scrollbar-width: none;\n / Nasconde la scrollbar in Firefox /\n}\n\n.Wrapper::-webkit-scrollbar {\n display: none;\n / Nasconde la scrollbar in Chrome, Safari e Edge */\n}\n\n.ContentWrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: var(--alignment, flex-start);\n\n &.ContentWrapper--Items {\n @media (max-width: 768px) {\n justify-content: flex-start;\n overflow-x: auto;\n\n .fullBorder {\n justify-content: flex-start;\n }\n }\n }\n}\n\n.Content {\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n width: fit-content;\n\n &.fullBorder {\n width: 100%;\n border-bottom: 1px solid var(--jump-tab-border-color);\n justify-content: var(--alignment, flex-start);\n }\n\n &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n margin-bottom: -1px;\n }\n\n &.rounded {\n border-radius: 50px;\n background-color: var(--jump-tab-bg-color);\n }\n\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n }\n}\n\njump-tab-item {\n display: flex;\n align-items: flex-end;\n overflow: hidden;\n\n .tab-title {\n display: block;\n white-space: normal;\n text-align: center;\n }\n}\n","import { Component, Host, Event, EventEmitter, Prop, h, Listen } from '@stencil/core';\n\n@Component({\n tag: 'jump-tab',\n styleUrl: 'jump-tab.scss',\n shadow: true,\n})\nexport class JumpTab {\n JumpTabEl: HTMLElement;\n\n @Prop() disabled: boolean = false;\n @Prop() alignment: string = 'left';\n @Prop() fullBorder: boolean = false;\n @Prop() tabGroupName: string = undefined;\n @Prop() variant: string = 'inline';\n\n @Event({ eventName: 'jump-change-activetab' }) setActiveTab: EventEmitter;\n\n @Listen('jump-change-active-tab')\n changeActiveTabHandler(event: CustomEvent) {\n this.setActiveTab.emit(event.detail);\n\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item) => {\n if (item.getAttribute('identifier') === event.detail.id) {\n item.setAttribute('active', '');\n\n if (this.variant === 'sheet') {\n items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`;\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\n let previousSibling = item.previousElementSibling as any;\n if (previousSibling) {\n previousSibling.style.borderRight = '1px solid transparent';\n }\n }\n\n } else {\n item.removeAttribute('active');\n }\n });\n }\n\n let panel = this.JumpTabEl.querySelectorAll('jump-tab-panel');\n if (panel.length > 0) {\n panel.forEach((panel) => {\n if (panel.getAttribute('identifier') === event.detail.id) {\n panel.setAttribute('active', '');\n } else {\n panel.removeAttribute('active');\n }\n });\n }\n }\n\n componentDidLoad() {\n if (this.variant === 'sheet') {\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item, index) => {\n if (index === items.length - 1 \|\| item.classList.contains('active')) {\n item.style.borderRight = '1px solid transparent';\n } else {\n item.style.borderRight = `1px solid ${primaryColor}`;\n }\n });\n }\n }\n }\n\n render() {\n return (\n <Host class={\"JumpTab \" + this.variant} id={this.tabGroupName} ref={(el) => { this.JumpTabEl = el; }}>\n <div class={\"Wrapper \" + (this.fullBorder ? 'fullBorder' : '')}>\n <div class={\"ContentWrapper ContentWrapper--Items\"} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <div class={\"Content \" + this.variant + \" \" + (this.disabled ? 'disabled' : '') + \" \" + (this.fullBorder ? 'fullBorder' : '')} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n <slot name=\"tab-item\"></slot>\n </div>\n </div>\n <div class=\"ContentWrapper ContentWrapper--Panel\">\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n\n private getAlignment(alignment: string): string {\n switch (alignment) {\n case 'center':\n return 'center';\n case 'right':\n return 'flex-end';\n default:\n return 'flex-start';\n }\n }\n}\n"],"version":3}

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-864e40de.js');
+const index = require('./index-230bcbae.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["jump-button_2.cjs",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]],["jump-card-ecommerce.cjs",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"hasSlotForFavorite":[4,"has-slot-for-favorite"],"hasSlotAddToCart":[4,"has-slot-add-to-cart"],"link":[1],"img":[1],"imgAlt":[1,"img-alt"],"hoverImg":[1,"hover-img"],"hoverImgAlt":[1,"hover-img-alt"],"videoSrc":[1,"video-src"],"notificationUrl":[1,"notification-url"],"notificationText":[1,"notification-text"],"productName":[1,"product-name"],"subtitle":[1],"productId":[1,"product-id"],"price":[2],"salePrice":[2,"sale-price"],"currency":[1],"addToCartColor":[1,"add-to-cart-color"],"badgeColor":[1,"badge-color"],"outOfStock":[1540,"out-of-stock"],"outOfStockText":[1,"out-of-stock-text"],"addToCartText":[1,"add-to-cart-text"],"waitingListText":[1,"waiting-list-text"],"addToWaitingList":[4,"add-to-waiting-list"],"isMini":[4,"is-mini"],"addedToCart":[4,"added-to-cart"],"endAddedToCart":[4,"end-added-to-cart"],"variations":[32],"selectedVariation":[32],"priceFormatted":[32],"salePriceFormatted":[32],"setPrice":[64]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["jump-filter.cjs",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"showCount":[4,"show-count"],"offCanvasOverlay":[4,"off-canvas-overlay"],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"offCanvasClasses":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{"showMobileFilters":["watchHandler"]}]]],["jump-filtergroup.cjs",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"label":[32],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]},null,{"showMore":["watchShowMore"]}]]],["jump-navbar.cjs",[[1,"jump-navbar",{"logo":[16],"navItems":[16],"secondaryNavItems":[16],"mobileThreshold":[2,"mobile-threshold"],"type":[1],"navPosition":[1,"nav-position"],"megaMenuAlignment":[1,"mega-menu-alignment"],"sticky":[4],"stickyThreshold":[2,"sticky-threshold"],"mobileLogo":[16],"user":[16],"isMobile":[32]},[[9,"resize","handleResize"]]]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[0,"jump-pagination-table",{"elementsRanges":[1,"elements-ranges"],"elPerPage":[2,"el-per-page"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"],"elementsRangesArray":[32]},null,{"elementsRanges":["elementsRangesChanged"],"elPerPage":["elPerPageChanged"]}]]],["jump-quantity.cjs",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"internalValue":[32],"getValue":[64],"setMax":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-search-bar.cjs",[[1,"jump-search-bar",{"placeholder":[1],"noResultText":[1,"no-result-text"],"loadingText":[1,"loading-text"],"resultsText":[1,"results-text"],"showAllResText":[1,"show-all-res-text"],"identifier":[1],"debounceTime":[2,"debounce-time"],"variant":[1],"withBtn":[4,"with-btn"],"recentsTitle":[1,"recents-title"],"recents":[16],"results":[16],"dropdown":[4],"linearIconOnly":[4,"linear-icon-only"],"dropdownPosition":[1,"dropdown-position"],"dropdownVisible":[32],"searchValue":[32],"resType":[32],"innerResults":[32],"totalResults":[32],"isExpanded":[32],"setResults":[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{"searchValue":["searchValueChanged"]}]]],["jump-search-bar-mobile.cjs",[[1,"jump-search-bar-mobile",{"identifier":[1],"placeholder":[1],"recents":[16],"recentsTitle":[1,"recents-title"],"debounceTime":[2,"debounce-time"],"loadingText":[1,"loading-text"],"noResultText":[1,"no-result-text"],"results":[16],"resultsText":[1,"results-text"],"showAllResText":[1,"show-all-res-text"],"isOpen":[32],"innerResults":[32],"totalResults":[32],"resType":[32],"searchValue":[32],"setResults":[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{"searchValue":["searchValueChanged"]}]]],["jump-accordion.cjs",[[1,"jump-accordion",{"variant":[1],"summary":[1],"disabled":[4],"open":[516],"icon":[1],"identifier":[1]},[[0,"sl-show","handleShow"]]]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion-group.cjs",[[1,"jump-accordion-group",{"variant":[1],"groupIdentifier":[1,"group-identifier"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-filter-checkbox.cjs",[[1,"jump-filter-checkbox",{"value":[1],"label":[1],"checked":[516],"count":[8],"isChecked":[64]}]]],["jump-filter-select.cjs",[[1,"jump-filter-select",{"value":[1537],"placeholder":[1],"label":[1],"name":[1],"options":[1],"disabled":[516],"multiple":[4],"required":[4],"loading":[4],"open":[32],"hasSlottedOptions":[32],"values":[32],"getSelectedValue":[64],"getSelectedOption":[64],"getValues":[64],"getName":[64],"setValue":[64]}]]],["jump-filter-switch.cjs",[[1,"jump-filter-switch",{"value":[1],"label":[1],"name":[1],"checked":[1540],"disabled":[516],"values":[32],"setValue":[64],"isChecked":[64],"getValues":[64],"getName":[64]},null,{"checked":["checkedChanged"]}]]],["jump-search-bar-dropdown-item.cjs",[[1,"jump-search-bar-dropdown-item",{"value":[1],"img":[1],"href":[1],"details":[32]}]]],["jump-tab.cjs",[[1,"jump-tab",{"disabled":[4],"alignment":[1],"fullBorder":[4,"full-border"],"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]]], options);
+  return index.bootstrapLazy([["jump-card-ecommerce.cjs",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"hasSlotForFavorite":[4,"has-slot-for-favorite"],"hasSlotAddToCart":[4,"has-slot-add-to-cart"],"link":[1],"img":[1],"imgAlt":[1,"img-alt"],"hoverImg":[1,"hover-img"],"hoverImgAlt":[1,"hover-img-alt"],"videoSrc":[1,"video-src"],"notificationUrl":[1,"notification-url"],"notificationText":[1,"notification-text"],"productName":[1,"product-name"],"subtitle":[1],"productId":[1,"product-id"],"price":[2],"salePrice":[2,"sale-price"],"currency":[1],"addToCartColor":[1,"add-to-cart-color"],"badgeColor":[1,"badge-color"],"outOfStock":[1540,"out-of-stock"],"outOfStockText":[1,"out-of-stock-text"],"addToCartText":[1,"add-to-cart-text"],"waitingListText":[1,"waiting-list-text"],"addToWaitingList":[4,"add-to-waiting-list"],"isMini":[4,"is-mini"],"addedToCart":[4,"added-to-cart"],"endAddedToCart":[4,"end-added-to-cart"],"variations":[32],"selectedVariation":[32],"priceFormatted":[32],"salePriceFormatted":[32],"setPrice":[64]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["jump-filter.cjs",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"showCount":[4,"show-count"],"offCanvasOverlay":[4,"off-canvas-overlay"],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"offCanvasClasses":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{"showMobileFilters":["watchHandler"]}]]],["jump-filtergroup.cjs",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"label":[32],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]},null,{"showMore":["watchShowMore"]}]]],["jump-navbar.cjs",[[1,"jump-navbar",{"logo":[16],"navItems":[16],"secondaryNavItems":[16],"mobileThreshold":[2,"mobile-threshold"],"type":[1],"navPosition":[1,"nav-position"],"megaMenuAlignment":[1,"mega-menu-alignment"],"sticky":[4],"stickyThreshold":[2,"sticky-threshold"],"mobileLogo":[16],"user":[16],"isMobile":[32]},[[9,"resize","handleResize"]]]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[0,"jump-pagination-table",{"elementsRanges":[1,"elements-ranges"],"elPerPage":[2,"el-per-page"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"],"elementsRangesArray":[32]},null,{"elementsRanges":["elementsRangesChanged"],"elPerPage":["elPerPageChanged"]}]]],["jump-quantity.cjs",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"internalValue":[32],"getValue":[64],"setMax":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-search-bar.cjs",[[1,"jump-search-bar",{"placeholder":[1],"noResultText":[1,"no-result-text"],"loadingText":[1,"loading-text"],"resultsText":[1,"results-text"],"showAllResText":[1,"show-all-res-text"],"identifier":[1],"debounceTime":[2,"debounce-time"],"variant":[1],"withBtn":[4,"with-btn"],"recentsTitle":[1,"recents-title"],"recents":[16],"results":[16],"dropdown":[4],"linearIconOnly":[4,"linear-icon-only"],"dropdownPosition":[1,"dropdown-position"],"dropdownVisible":[32],"searchValue":[32],"resType":[32],"innerResults":[32],"totalResults":[32],"isExpanded":[32],"setResults":[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{"searchValue":["searchValueChanged"]}]]],["jump-search-bar-mobile.cjs",[[1,"jump-search-bar-mobile",{"identifier":[1],"placeholder":[1],"recents":[16],"recentsTitle":[1,"recents-title"],"debounceTime":[2,"debounce-time"],"loadingText":[1,"loading-text"],"noResultText":[1,"no-result-text"],"results":[16],"resultsText":[1,"results-text"],"showAllResText":[1,"show-all-res-text"],"isOpen":[32],"innerResults":[32],"totalResults":[32],"resType":[32],"searchValue":[32],"setResults":[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{"searchValue":["searchValueChanged"]}]]],["jump-accordion.cjs",[[1,"jump-accordion",{"variant":[1],"summary":[1],"disabled":[4],"open":[516],"icon":[1],"identifier":[1]},[[0,"sl-show","handleShow"]]]]],["jump-side-cart.cjs",[[1,"jump-side-cart",{"isOpen":[4,"is-open"],"position":[1],"items":[16],"discountThreshold":[16],"freeShippingThreshold":[2,"free-shipping-threshold"],"progressPercentage":[2,"progress-percentage"],"checkoutLabel":[1,"checkout-label"],"viewCartLabel":[1,"view-cart-label"],"shippingInfo":[1,"shipping-info"],"cartItems":[32]}]]],["jump-side-cart-example.cjs",[[1,"jump-side-cart-example",{"isCartOpen":[32],"position":[32],"cartItems":[32]}]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion-group.cjs",[[1,"jump-accordion-group",{"variant":[1],"groupIdentifier":[1,"group-identifier"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-filter-checkbox.cjs",[[1,"jump-filter-checkbox",{"value":[1],"label":[1],"checked":[516],"count":[8],"isChecked":[64]}]]],["jump-filter-select.cjs",[[1,"jump-filter-select",{"value":[1537],"placeholder":[1],"label":[1],"name":[1],"options":[1],"disabled":[516],"multiple":[4],"required":[4],"loading":[4],"open":[32],"hasSlottedOptions":[32],"values":[32],"getSelectedValue":[64],"getSelectedOption":[64],"getValues":[64],"getName":[64],"setValue":[64]}]]],["jump-filter-switch.cjs",[[1,"jump-filter-switch",{"value":[1],"label":[1],"name":[1],"checked":[1540],"disabled":[516],"values":[32],"setValue":[64],"isChecked":[64],"getValues":[64],"getName":[64]},null,{"checked":["checkedChanged"]}]]],["jump-search-bar-dropdown-item.cjs",[[1,"jump-search-bar-dropdown-item",{"value":[1],"img":[1],"href":[1],"details":[32]}]]],["jump-tab.cjs",[[1,"jump-tab",{"disabled":[4],"alignment":[1],"fullBorder":[4,"full-border"],"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]],["jump-button_2.cjs",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]]], options);
 };
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "components/jump-side-cart/jump-side-cart.js",
     "components/jump-accordion/jump-accordion.js",
     "components/jump-accordion-group/jump-accordion-group.js",
     "components/jump-badge/jump-badge.js",
@@ -20,6 +21,7 @@
     "components/jump-search-bar/jump-search-bar.js",
     "components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.js",
     "components/jump-search-bar-mobile/jump-search-bar-mobile.js",
+    "components/jump-side-cart/jump-side-cart.example.js",
     "components/jump-tab/jump-tab.js",
     "components/jump-tab-item/jump-tab-item.js",
     "components/jump-tab-panel/jump-tab-panel.js"

package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.css CHANGED Viewed

@@ -231,6 +231,7 @@
 :host .SelectVariations {
   display: flex;
   align-items: flex-end;
+  max-width: calc(50% - 1rem);
 }
 :host .SelectVariations select {
   appearance: none;

package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.js CHANGED Viewed

@@ -26,6 +26,7 @@ const TemplateWithCardEcommerceOption = () => {
       <jump-card-ecommerce-option code="5kg" label="5 Kg" taxonomy="attribute_pa_pesoconfezione" class="hydrated"></jump-card-ecommerce-option>
       <jump-card-ecommerce-option code="10kg" label="10 Kg" taxonomy="attribute_pa_pesoconfezione" class="hydrated"></jump-card-ecommerce-option>
       <jump-card-ecommerce-option code="15kg" label="1.5 Kg" taxonomy="attribute_pa_pesoconfezione" class="hydrated"></jump-card-ecommerce-option>
+      <jump-card-ecommerce-option code="15kg" label="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet " taxonomy="attribute_pa_pesoconfezione" class="hydrated"></jump-card-ecommerce-option>
   </jump-card-ecommerce>`;
 };
 export const ExampleWithCardEcommerceOption = TemplateWithCardEcommerceOption.bind({});

package/dist/collection/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"jump-card-ecommerce-option.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,oDAAoD;IAC3D,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,+BAA+B,UAAU,gDAAgD,CAAA;AAClG,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,+BAA+B,GAAG,GAAG,EAAE;IAC3C,OAAO~~;;;;;;;;;;;;;;;;;yBAiBgB~~,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,8BAA8B,GAAG,+BAA+B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n title: 'Components/CardEcommerceOption/CardEcommerceOption',\n tags: ['autodocs'],\n};\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return `<jump-card-ecommerce-option ${attributes}>Sono una opzione</jump-card-ecommerce-option>`\n}\n\nexport const Example = Template.bind({});\n\nconst TemplateWithCardEcommerceOption = () => {\n return `\n <script>\n window.addEventListener('jump-variation-selected', (e) => {\n console.log('jump-variation-selected', e.detail);\n });\n\n window.addEventListener('jump-add-to-cart', (e) => {\n console.log('jump-add-to-cart', e.detail);\n });\n</script>\n<jump-card-ecommerce class=\"JumpCardEcommerce hydrated\" badge=\"\" link=\"https://robinsonb2b.test/prodotto/home/top-quality/prodotti-green-ecologici-biologici-per-cani-e-gatti/cibo-da-filiere-ecosostenibili-per-cani/proteine-di-insetto-per-cani/canagan-insect-protein-all-breeds-per-cani/\" img=\"https://media.robinsonpetshop.it/robinsonb2b/uploads/2023/04/25025-Canagan-Insect-Protein-All-Breeds-per-Cani.jpg\" img-alt=\"Canagan Insect Protein All Breeds per Cani\" notification-url=\"https://robinsonb2b.test/carrello/\" notification-text=\"Added to cart\" product-name=\"Canagan\" subtitle=\"Canagan Insect Protein All Breeds per Cani\" product-id=\"84122\" price=\"25.33\" sale-price=\"15.198\" currency=\"€\" out-of-stock-text=\"Expired\" addto-cart-text=\"Add to cart\" waiting-list-text=\"Notify availability\" quantity=\"\">\n\n <jump-quantity slot=\"quantity\" min=\"1\" max=\"\" step=\"1\" label=\"Quantity\" show-buttons=\"\" variant=\"horizontal\" value=\"1\" data-variant=\"horizontal\" data-hasbuttons=\"\" class=\"hydrated\"></jump-quantity>\n\n <jump-card-ecommerce-option code=\"5kg\" label=\"5 Kg\" taxonomy=\"attribute_pa_pesoconfezione\" class=\"hydrated\"></jump-card-ecommerce-option>\n <jump-card-ecommerce-option code=\"10kg\" label=\"10 Kg\" taxonomy=\"attribute_pa_pesoconfezione\" class=\"hydrated\"></jump-card-ecommerce-option>\n <jump-card-ecommerce-option code=\"15kg\" label=\"1.5 Kg\" taxonomy=\"attribute_pa_pesoconfezione\" class=\"hydrated\"></jump-card-ecommerce-option>\n </jump-card-ecommerce>`\n}\n\nexport const ExampleWithCardEcommerceOption = TemplateWithCardEcommerceOption.bind({});\n"]}
1	+ {"version":3,"file":"jump-card-ecommerce-option.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce-option/jump-card-ecommerce-option.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,oDAAoD;IAC3D,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,+BAA+B,UAAU,gDAAgD,CAAA;AAClG,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,+BAA+B,GAAG,GAAG,EAAE;IAC3C,OAAO;;;;;;;;;;;;;;;;;;yBAkBgB,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,8BAA8B,GAAG,+BAA+B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n title: 'Components/CardEcommerceOption/CardEcommerceOption',\n tags: ['autodocs'],\n};\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return `<jump-card-ecommerce-option ${attributes}>Sono una opzione</jump-card-ecommerce-option>`\n}\n\nexport const Example = Template.bind({});\n\nconst TemplateWithCardEcommerceOption = () => {\n return `\n <script>\n window.addEventListener('jump-variation-selected', (e) => {\n console.log('jump-variation-selected', e.detail);\n });\n\n window.addEventListener('jump-add-to-cart', (e) => {\n console.log('jump-add-to-cart', e.detail);\n });\n</script>\n<jump-card-ecommerce class=\"JumpCardEcommerce hydrated\" badge=\"\" link=\"https://robinsonb2b.test/prodotto/home/top-quality/prodotti-green-ecologici-biologici-per-cani-e-gatti/cibo-da-filiere-ecosostenibili-per-cani/proteine-di-insetto-per-cani/canagan-insect-protein-all-breeds-per-cani/\" img=\"https://media.robinsonpetshop.it/robinsonb2b/uploads/2023/04/25025-Canagan-Insect-Protein-All-Breeds-per-Cani.jpg\" img-alt=\"Canagan Insect Protein All Breeds per Cani\" notification-url=\"https://robinsonb2b.test/carrello/\" notification-text=\"Added to cart\" product-name=\"Canagan\" subtitle=\"Canagan Insect Protein All Breeds per Cani\" product-id=\"84122\" price=\"25.33\" sale-price=\"15.198\" currency=\"€\" out-of-stock-text=\"Expired\" addto-cart-text=\"Add to cart\" waiting-list-text=\"Notify availability\" quantity=\"\">\n\n <jump-quantity slot=\"quantity\" min=\"1\" max=\"\" step=\"1\" label=\"Quantity\" show-buttons=\"\" variant=\"horizontal\" value=\"1\" data-variant=\"horizontal\" data-hasbuttons=\"\" class=\"hydrated\"></jump-quantity>\n\n <jump-card-ecommerce-option code=\"5kg\" label=\"5 Kg\" taxonomy=\"attribute_pa_pesoconfezione\" class=\"hydrated\"></jump-card-ecommerce-option>\n <jump-card-ecommerce-option code=\"10kg\" label=\"10 Kg\" taxonomy=\"attribute_pa_pesoconfezione\" class=\"hydrated\"></jump-card-ecommerce-option>\n <jump-card-ecommerce-option code=\"15kg\" label=\"1.5 Kg\" taxonomy=\"attribute_pa_pesoconfezione\" class=\"hydrated\"></jump-card-ecommerce-option>\n <jump-card-ecommerce-option code=\"15kg\" label=\"Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet \" taxonomy=\"attribute_pa_pesoconfezione\" class=\"hydrated\"></jump-card-ecommerce-option>\n </jump-card-ecommerce>`\n}\n\nexport const ExampleWithCardEcommerceOption = TemplateWithCardEcommerceOption.bind({});\n"]}

package/dist/collection/components/jump-side-cart/index.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ //# sourceMappingURL=index.js.map

package/dist/collection/components/jump-side-cart/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/jump-side-cart/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist/collection/components/jump-side-cart/jump-side-cart.css ADDED Viewed

@@ -0,0 +1,315 @@
+:host {
+  --cart-width: 400px;
+  --cart-bg: #ffffff;
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --border-color: #e5e5e5;
+  --text-primary: #333333;
+  --text-secondary: #666666;
+  --primary-color: #80bb55;
+  --secondary-color: #f5f5f5;
+  --error-color: #dc3545;
+  --success-color: #28a745;
+}
+.side-cart {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 1000;
+  pointer-events: none;
+}
+.side-cart--open {
+  pointer-events: all;
+}
+.side-cart--right {
+  right: 0;
+}
+.side-cart--right .side-cart__content {
+  right: 0;
+  transform: translateX(100%);
+}
+.side-cart--right.side-cart--open .side-cart__content {
+  transform: translateX(0);
+}
+.side-cart--left {
+  left: 0;
+}
+.side-cart--left .side-cart__content {
+  left: 0;
+  transform: translateX(-100%);
+}
+.side-cart--left.side-cart--open .side-cart__content {
+  transform: translateX(0);
+}
+.side-cart__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--overlay-bg);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.side-cart--open .side-cart__overlay {
+  opacity: 1;
+}
+.side-cart__content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--cart-width);
+  max-width: 90vw;
+  background: var(--cart-bg);
+  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+.side-cart--left .side-cart__content {
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+}
+.side-cart__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color);
+}
+.side-cart__header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.side-cart__header .close-btn {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: var(--text-secondary);
+  padding: 0.25rem;
+  line-height: 1;
+}
+.side-cart__header .close-btn:hover {
+  color: var(--text-primary);
+}
+.side-cart__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+}
+.empty-cart {
+  text-align: center;
+  padding: 2rem 0;
+  color: var(--text-secondary);
+}
+.cart-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.cart-item {
+  display: flex;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+}
+.cart-item__image {
+  flex-shrink: 0;
+  width: 80px;
+  height: 80px;
+}
+.cart-item__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 4px;
+}
+.cart-item__details {
+  flex: 1;
+  min-width: 0;
+}
+.cart-item__brand {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.25rem;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+.cart-item__name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 0.25rem;
+  line-height: 1.3;
+}
+.cart-item__description {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+}
+.cart-item__price {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.cart-item__original-price {
+  margin-left: 0.5rem;
+  text-decoration: line-through;
+  color: var(--text-secondary);
+  font-weight: normal;
+}
+.cart-item__controls {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: center;
+}
+.quantity-controls {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+}
+.quantity-controls .quantity-btn {
+  background: none;
+  border: none;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--text-primary);
+}
+.quantity-controls .quantity-btn:hover:not(:disabled) {
+  background: var(--secondary-color);
+}
+.quantity-controls .quantity-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.quantity-controls .quantity {
+  min-width: 40px;
+  text-align: center;
+  padding: 0 0.5rem;
+  border-left: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+  font-weight: 500;
+}
+.remove-btn {
+  background: none;
+  border: none;
+  color: var(--error-color);
+  font-size: 0.75rem;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+}
+.remove-btn:hover {
+  background: rgba(220, 53, 69, 0.1);
+}
+.progress-section {
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-color);
+}
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background: var(--secondary-color);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 0.5rem;
+}
+.progress-bar .progress-fill {
+  height: 100%;
+  background: var(--primary-color);
+  transition: width 0.3s ease;
+}
+.progress-text {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  text-align: center;
+}
+.side-cart__footer {
+  border-top: 1px solid var(--border-color);
+  padding: 1rem;
+}
+.totals {
+  margin-bottom: 1rem;
+}
+.totals .subtotal, .totals .savings {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+.totals .subtotal {
+  font-weight: 600;
+  font-size: 1.125rem;
+}
+.totals .savings {
+  color: var(--success-color);
+  font-size: 0.875rem;
+}
+.actions {
+  display: flex;
+  gap: 0.75rem;
+}
+.actions .btn {
+  flex: 1;
+  padding: 0.75rem;
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.actions .btn--primary {
+  background: var(--primary-color);
+  color: white;
+}
+.actions .btn--primary:hover {
+  background: #68a03b; /* Darker shade of --primary-color */
+  filter: brightness(0.9);
+}
+.actions .btn--secondary {
+  background: var(--secondary-color);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+.actions .btn--secondary:hover {
+  background: #e8e8e8; /* Darker shade of --secondary-color */
+  filter: brightness(0.95);
+}
+@media (max-width: 768px) {
+  .side-cart__content {
+    width: 100vw;
+    max-width: none;
+  }
+  .cart-item__details {
+    font-size: 0.8rem;
+  }
+  .cart-item__name {
+    font-size: 0.8rem;
+  }
+}

package/dist/collection/components/jump-side-cart/jump-side-cart.example.css ADDED Viewed

@@ -0,0 +1,30 @@
+:host {
+  display: block;
+}
+.example-container {
+  display: flex;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 2rem;
+  background-color: #f5f5f5;
+}
+.example-button {
+  padding: 0.75rem 1.5rem;
+  background-color: #80bb55;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background-color 0.2s ease;
+}
+.example-button:hover {
+  background-color: #68a03b;
+}
+.example-button:active {
+  transform: translateY(1px);
+}