@gomusdev/web-components 3.9.0 → 3.10.1

package/README.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 3.10.1 (2026-07-02)
+
+### Bug Fixes
+
+* **ticket-selection:** re-derive capacity on cart changes (TC-09)
+
+## 3.10.0 (2026-07-01)
+
+### Features
+
+* **quantity-stepper:** accessible − qty + stepper for go-tickets and go-cart
+
+### Bug Fixes
+
+* **quantity-stepper:** ship default stepper styles and fix go-tickets header alignment
+
 ## 3.9.0 (2026-06-30)
 
 ### Features

package/dist-js/components/shared/quantityStepper/QuantityStepper.svelte.d.ts

@@ -0,0 +1 @@
+export { SvelteComponent as default } from 'svelte';

package/dist-js/gomus-webcomponents.css

@@ -822,7 +822,7 @@
 /*CALENDARUI CSS*/
 
 [data-calendar-wrapper] {
-  max-width: 650px;
+  max-width: 800px;
 }
 
 [data-calendar-wrapper] [data-calendar-prev-button],[data-calendar-wrapper] [data-calendar-next-button] {
@@ -1064,16 +1064,16 @@ go-tickets ol.go-tickets > .go-tickets-header > ul .go-tickets-header-title {
           flex: var(--col-title) 0 0;
         }
 
-go-tickets ol.go-tickets > .go-tickets-header > ul .go-tickets-description {
+go-tickets ol.go-tickets > .go-tickets-header > ul .go-tickets-header-description {
           flex: var(--col-desc) 0 0;
         }
 
-go-tickets ol.go-tickets > .go-tickets-header > ul .go-tickets-price {
+go-tickets ol.go-tickets > .go-tickets-header > ul .go-tickets-header-price {
           flex: var(--col-price) 0 0;
           text-align: right;
         }
 
-go-tickets ol.go-tickets > .go-tickets-header > ul .go-tickets-quality {
+go-tickets ol.go-tickets > .go-tickets-header > ul .go-tickets-header-quality {
           flex: var(--col-qty) 0 0;
           text-align: right;
         }
@@ -1216,6 +1216,166 @@ go-cart ul,go-cart ol {
         text-align: right;
       }
 
+/*=== QUANTITY STEPPER (shared by go-tickets + go-cart) ===*/
+/* Scoped under :host,:root so these out-specify the global `:root button` rule
+   (teal background + margin-top: 2rem + 20px 60px padding) without !important.
+   White control, primary color on hover; box model fully self-contained so a
+   host reset (e.g. Storybook) can't leak in. */
+:host .go-quantity-stepper {
+    display: inline-flex;
+    align-items: stretch;
+    vertical-align: middle;
+    box-sizing: border-box;
+    line-height: 1;
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    border-radius: 0.375rem;
+    overflow: hidden;
+  }
+:root .go-quantity-stepper {
+    display: inline-flex;
+    align-items: stretch;
+    vertical-align: middle;
+    box-sizing: border-box;
+    line-height: 1;
+    border: 1px solid rgba(0, 0, 0, 0.25);
+    border-radius: 0.375rem;
+    overflow: hidden;
+  }
+:host .go-quantity-stepper * {
+    box-sizing: border-box;
+  }
+:root .go-quantity-stepper * {
+    box-sizing: border-box;
+  }
+:host .go-quantity-stepper *::before {
+    box-sizing: border-box;
+  }
+:root .go-quantity-stepper *::before {
+    box-sizing: border-box;
+  }
+:host .go-quantity-stepper *::after {
+    box-sizing: border-box;
+  }
+:root .go-quantity-stepper *::after {
+    box-sizing: border-box;
+  }
+:host .go-quantity-stepper-button {
+    margin: 0;
+    padding: 0;
+    -moz-appearance: none;
+         appearance: none;
+    -webkit-appearance: none;
+    flex: 0 0 auto;
+    width: 2rem;
+    height: 2rem;
+    border: 0;
+    border-radius: 0;
+    background: #fff;
+    color: #111;
+    color: var(--black, #111);
+    font: inherit;
+    font-size: 1.125rem;
+    line-height: 1;
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    place-items: center;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+:root .go-quantity-stepper-button {
+    margin: 0;
+    padding: 0;
+    -moz-appearance: none;
+         appearance: none;
+    -webkit-appearance: none;
+    flex: 0 0 auto;
+    width: 2rem;
+    height: 2rem;
+    border: 0;
+    border-radius: 0;
+    background: #fff;
+    color: #111;
+    color: var(--black, #111);
+    font: inherit;
+    font-size: 1.125rem;
+    line-height: 1;
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    place-items: center;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+:host .go-quantity-stepper-button:hover:not([aria-disabled='true']) {
+    background: #12826a;
+    background: var(--primary, #12826a);
+    color: #fff;
+  }
+:root .go-quantity-stepper-button:hover:not([aria-disabled='true']) {
+    background: #12826a;
+    background: var(--primary, #12826a);
+    color: #fff;
+  }
+:host .go-quantity-stepper-button[aria-disabled='true'] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+:root .go-quantity-stepper-button[aria-disabled='true'] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+:host .go-quantity-stepper-value {
+    margin: 0;
+    padding: 0;
+    -moz-appearance: none;
+         appearance: none;
+    -webkit-appearance: none;
+    flex: 0 0 auto;
+    width: 2.75rem;
+    height: 2rem;
+    text-align: center;
+    border: 0;
+    border-left: 1px solid rgba(0, 0, 0, 0.25);
+    border-right: 1px solid rgba(0, 0, 0, 0.25);
+    border-radius: 0;
+    background: #fff;
+    color: #111;
+    color: var(--fg, #111);
+    font: inherit;
+    vertical-align: middle;
+  }
+:root .go-quantity-stepper-value {
+    margin: 0;
+    padding: 0;
+    -moz-appearance: none;
+         appearance: none;
+    -webkit-appearance: none;
+    flex: 0 0 auto;
+    width: 2.75rem;
+    height: 2rem;
+    text-align: center;
+    border: 0;
+    border-left: 1px solid rgba(0, 0, 0, 0.25);
+    border-right: 1px solid rgba(0, 0, 0, 0.25);
+    border-radius: 0;
+    background: #fff;
+    color: #111;
+    color: var(--fg, #111);
+    font: inherit;
+    vertical-align: middle;
+  }
+:host .go-quantity-stepper-value:focus-visible {
+    outline: 2px solid #12826a;
+    outline: 2px solid var(--primary, #12826a);
+    outline-offset: -2px;
+  }
+:root .go-quantity-stepper-value:focus-visible {
+    outline: 2px solid #12826a;
+    outline: 2px solid var(--primary, #12826a);
+    outline-offset: -2px;
+  }
+
 /* Coupon row */
 .go-cart-coupon article  > ul {
       display: flex;
@@ -1316,7 +1476,7 @@ h2 {
 }
 
 .component-container {
-  max-width: 650px;
+  max-width: 800px;
   margin: 0 auto;
   box-shadow:
     0 4px 12px rgba(12, 12, 12, 0.15),