diff --git a/ts_web/elements/dees-input-checkbox.demo.ts b/ts_web/elements/dees-input-checkbox.demo.ts
index 4940b56..88ff657 100644
--- a/ts_web/elements/dees-input-checkbox.demo.ts
+++ b/ts_web/elements/dees-input-checkbox.demo.ts
@@ -275,11 +275,11 @@ export const demoFunc = () => html`
           <dees-input-checkbox 
             .label=${'Feature toggle'} 
             .value=${false}
-            @changeSubject=${(event) => {
+            @changeSubject=${(event: CustomEvent) => {
               const output = document.querySelector('#checkbox-output');
               if (output && event.detail) {
                 const isChecked = event.detail.getValue();
-                output.textContent = \`Feature is \${isChecked ? 'enabled' : 'disabled'}\`;
+                output.textContent = `Feature is ${isChecked ? 'enabled' : 'disabled'}`;
               }
             }}
           ></dees-input-checkbox>
@@ -287,11 +287,11 @@ export const demoFunc = () => html`
           <dees-input-checkbox 
             .label=${'Debug mode'} 
             .value=${false}
-            @changeSubject=${(event) => {
+            @changeSubject=${(event: CustomEvent) => {
               const output = document.querySelector('#debug-output');
               if (output && event.detail) {
                 const isChecked = event.detail.getValue();
-                output.textContent = \`Debug mode: \${isChecked ? 'ON' : 'OFF'}\`;
+                output.textContent = `Debug mode: ${isChecked ? 'ON' : 'OFF'}`;
               }
             }}
           ></dees-input-checkbox>
diff --git a/ts_web/elements/dees-input-fileupload.ts b/ts_web/elements/dees-input-fileupload.ts
index b860305..7f6471e 100644
--- a/ts_web/elements/dees-input-fileupload.ts
+++ b/ts_web/elements/dees-input-fileupload.ts
@@ -68,7 +68,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
       :host {
         position: relative;
         display: block;
-        color: ${cssManager.bdTheme('#333', '#ccc')};
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
       }
 
       .hidden {
@@ -83,16 +83,16 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
 
       .maincontainer {
         position: relative;
-        border-radius: 8px;
+        border-radius: 6px;
         padding: 16px;
-        background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')};
-        color: ${cssManager.bdTheme('#333', '#ccc')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
-        transition: all 0.2s ease;
+        background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(215 20.2% 65.1%)', 'hsl(215 20.2% 35.1%)')};
+        transition: all 0.15s ease;
       }
 
       .maincontainer:hover {
-        border-color: ${cssManager.bdTheme('#ccc', '#444')};
+        border-color: ${cssManager.bdTheme('hsl(215 20.2% 55.1%)', 'hsl(215 20.2% 45.1%)')};
       }
 
       :host([disabled]) .maincontainer {
@@ -102,69 +102,69 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
       }
 
       :host([validationState="invalid"]) .maincontainer {
-        border-color: #e74c3c;
+        border-color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
       }
 
       :host([validationState="valid"]) .maincontainer {
-        border-color: #27ae60;
+        border-color: ${cssManager.bdTheme('hsl(142.1 70.6% 45.3%)', 'hsl(142.1 76.2% 36.3%)')};
       }
 
       :host([validationState="warn"]) .maincontainer {
-        border-color: #f39c12;
+        border-color: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
       }
 
       .maincontainer::after {
-        top: 2px;
-        right: 2px;
-        left: 2px;
-        bottom: 2px;
-        transform: scale3d(0.98, 0.9, 1);
+        top: 1px;
+        right: 1px;
+        left: 1px;
+        bottom: 1px;
+        transform: scale3d(0.98, 0.95, 1);
         position: absolute;
         content: '';
         display: block;
         border: 2px dashed transparent;
-        border-radius: 6px;
-        transition: all 0.3s ease;
+        border-radius: 5px;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
         pointer-events: none;
         background: transparent;
       }
       
       .maincontainer.dragOver {
-        border-color: ${cssManager.bdTheme('#0084ff', '#0084ff')};
-        background: ${cssManager.bdTheme('#f0f8ff', '#001933')};
+        border-color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.05)', 'hsl(213.1 93.9% 67.8% / 0.05)')};
       }
       
       .maincontainer.dragOver::after {
         transform: scale3d(1, 1, 1);
-        border: 2px dashed ${cssManager.bdTheme('#0084ff', '#0084ff')};
+        border: 2px dashed ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
       }
 
       .uploadButton {
         position: relative;
-        padding: 12px 24px;
-        background: ${cssManager.bdTheme('#0084ff', '#0084ff')};
-        color: white;
+        padding: 10px 20px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 7.8%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         border-radius: 6px;
         text-align: center;
         font-size: 14px;
         font-weight: 500;
         cursor: pointer;
-        transition: all 0.2s ease;
-        border: none;
+        transition: all 0.15s ease;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
+        line-height: 20px;
       }
 
       .uploadButton:hover {
-        background: ${cssManager.bdTheme('#0073e6', '#0073e6')};
-        transform: translateY(-1px);
-        box-shadow: 0 2px 8px rgba(0, 132, 255, 0.3);
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
       }
 
       .uploadButton:active {
-        transform: translateY(0);
+        background: ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 11%)')};
       }
 
       .uploadButton dees-icon {
@@ -181,21 +181,21 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
       .uploadCandidate {
         display: grid;
         grid-template-columns: 40px 1fr auto;
-        background: ${cssManager.bdTheme('#ffffff', '#2a2a2a')};
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 16.8%)')};
         padding: 12px;
         text-align: left;
         border-radius: 6px;
-        color: ${cssManager.bdTheme('#333', '#ccc')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
         cursor: default;
-        transition: all 0.2s;
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+        transition: all 0.15s ease;
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         position: relative;
         overflow: hidden;
       }
 
       .uploadCandidate:hover {
-        background: ${cssManager.bdTheme('#f5f5f5', '#333')};
-        border-color: ${cssManager.bdTheme('#ccc', '#444')};
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(215 20.2% 20.8%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
       }
 
       .uploadCandidate .icon {
@@ -203,19 +203,19 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
         align-items: center;
         justify-content: center;
         font-size: 20px;
-        color: ${cssManager.bdTheme('#666', '#999')};
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
       }
 
       .uploadCandidate.image-file .icon {
-        color: #4CAF50;
+        color: ${cssManager.bdTheme('hsl(142.1 70.6% 45.3%)', 'hsl(142.1 76.2% 36.3%)')};
       }
       
       .uploadCandidate.pdf-file .icon {
-        color: #f44336;
+        color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
       }
       
       .uploadCandidate.doc-file .icon {
-        color: #2196F3;
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
       }
 
       .uploadCandidate .info {
@@ -235,7 +235,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
       
       .uploadCandidate .filesize {
         font-size: 12px;
-        color: ${cssManager.bdTheme('#666', '#999')};
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
       }
 
       .uploadCandidate .actions {
@@ -254,13 +254,13 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
         display: flex;
         align-items: center;
         justify-content: center;
-        transition: all 0.2s;
-        color: ${cssManager.bdTheme('#666', '#999')};
+        transition: all 0.15s ease;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
       }
 
       .remove-button:hover {
-        background: ${cssManager.bdTheme('#fee', '#4a1c1c')};
-        color: ${cssManager.bdTheme('#e74c3c', '#ff6b6b')};
+        background: ${cssManager.bdTheme('hsl(0 72.2% 50.6% / 0.1)', 'hsl(0 62.8% 30.6% / 0.1)')};
+        color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
       }
 
       .clear-all-button {
@@ -271,36 +271,37 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
       .clear-all-button button {
         background: none;
         border: none;
-        color: ${cssManager.bdTheme('#666', '#999')};
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
         cursor: pointer;
         font-size: 12px;
         padding: 4px 8px;
         border-radius: 4px;
-        transition: all 0.2s;
+        transition: all 0.15s ease;
       }
 
       .clear-all-button button:hover {
-        background: ${cssManager.bdTheme('#fee', '#4a1c1c')};
-        color: ${cssManager.bdTheme('#e74c3c', '#ff6b6b')};
+        background: ${cssManager.bdTheme('hsl(0 72.2% 50.6% / 0.1)', 'hsl(0 62.8% 30.6% / 0.1)')};
+        color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
       }
 
       .validation-message {
-        font-size: 12px;
-        margin-top: 4px;
-        color: #e74c3c;
+        font-size: 13px;
+        margin-top: 6px;
+        color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
+        line-height: 1.5;
       }
 
       .drop-hint {
         text-align: center;
         padding: 40px 20px;
-        color: ${cssManager.bdTheme('#999', '#666')};
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
         font-size: 14px;
       }
 
       .drop-hint dees-icon {
         font-size: 48px;
         margin-bottom: 16px;
-        opacity: 0.3;
+        opacity: 0.2;
       }
 
       .image-preview {
@@ -311,10 +312,10 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
       }
 
       .description-text {
-        font-size: 12px;
-        color: ${cssManager.bdTheme('#666', '#999')};
-        margin-top: 4px;
-        line-height: 1.4;
+        font-size: 13px;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        margin-top: 6px;
+        line-height: 1.5;
       }
     `,
   ];
diff --git a/ts_web/elements/dees-input-quantityselector.demo.ts b/ts_web/elements/dees-input-quantityselector.demo.ts
index c8d7c12..c0488a2 100644
--- a/ts_web/elements/dees-input-quantityselector.demo.ts
+++ b/ts_web/elements/dees-input-quantityselector.demo.ts
@@ -15,25 +15,146 @@ export const demoFunc = () => html`
         
         .shopping-grid {
           display: grid;
-          grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-          gap: 16px;
+          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+          gap: 20px;
         }
         
         .product-card {
+          background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 11.8%)')};
+          border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+          border-radius: 8px;
+          overflow: hidden;
+          transition: all 0.2s ease;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .product-card:hover {
+          border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+          box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
+        }
+
+        .product-image {
+          width: 100%;
+          height: 180px;
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 48px;
+          color: ${cssManager.bdTheme('hsl(215 20.2% 65.1%)', 'hsl(215 20.2% 35.1%)')};
+        }
+
+        .product-content {
           padding: 16px;
-          background: ${cssManager.bdTheme('#fff', '#2a2a2a')};
-          border-radius: 4px;
-          box-shadow: 0 2px 4px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')};
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+          flex: 1;
+        }
+        
+        .product-header {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
+
+        .product-category {
+          font-size: 12px;
+          font-weight: 500;
+          color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
         }
         
         .product-name {
+          font-size: 16px;
           font-weight: 600;
-          margin-bottom: 8px;
+          color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+          line-height: 1.4;
+        }
+
+        .product-description {
+          font-size: 13px;
+          color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+          line-height: 1.5;
+          flex: 1;
         }
         
+        .product-footer {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 16px;
+          padding-top: 12px;
+          border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        }
+
         .product-price {
-          color: #1976d2;
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
+        }
+
+        .price-current {
+          font-size: 20px;
+          font-weight: 600;
+          color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        }
+
+        .price-original {
+          font-size: 14px;
+          color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+          text-decoration: line-through;
+        }
+
+        .in-stock {
+          display: inline-flex;
+          align-items: center;
+          gap: 4px;
+          font-size: 12px;
+          color: ${cssManager.bdTheme('hsl(142.1 70.6% 45.3%)', 'hsl(142.1 76.2% 36.3%)')};
+          margin-top: 8px;
+        }
+
+        .in-stock dees-icon {
+          font-size: 14px;
+        }
+
+        .cart-summary {
+          margin-top: 24px;
+          padding: 20px;
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+          border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 21.8%)')};
+          border-radius: 8px;
+        }
+
+        .cart-summary-title {
+          font-size: 18px;
+          font-weight: 600;
           margin-bottom: 16px;
+          color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        }
+
+        .cart-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 8px 0;
+          font-size: 14px;
+          color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(217.9 10.6% 74.9%)')};
+        }
+
+        .cart-total {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-top: 16px;
+          margin-top: 16px;
+          border-top: 2px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+          font-size: 18px;
+          font-weight: 600;
+          color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
         }
       `}
     </style>
@@ -53,36 +174,141 @@ export const demoFunc = () => html`
         ></dees-input-quantityselector>
       </dees-panel>
       
-      <dees-panel .title=${'Shopping Cart'} .subtitle=${'Product cards with quantity selectors'}>
+      <dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg: HTMLElement) => {
+        const updateCartSummary = () => {
+          const qty1 = (elementArg.querySelector('#headphones-qty') as any)?.getValue() || 0;
+          const qty2 = (elementArg.querySelector('#mouse-qty') as any)?.getValue() || 0;
+          const qty3 = (elementArg.querySelector('#keyboard-qty') as any)?.getValue() || 0;
+          
+          const price1 = 349.99 * qty1;
+          const price2 = 99.99 * qty2;
+          const price3 = 79.99 * qty3;
+          const total = price1 + price2 + price3;
+          
+          const summary = elementArg.querySelector('#cart-summary-content');
+          if (summary) {
+            summary.innerHTML = `
+              ${qty1 > 0 ? `<div class="cart-item">
+                <span>Sony WH-1000XM5 (${qty1})</span>
+                <span>$${price1.toFixed(2)}</span>
+              </div>` : ''}
+              ${qty2 > 0 ? `<div class="cart-item">
+                <span>Logitech MX Master 3S (${qty2})</span>
+                <span>$${price2.toFixed(2)}</span>
+              </div>` : ''}
+              ${qty3 > 0 ? `<div class="cart-item">
+                <span>Keychron K2 (${qty3})</span>
+                <span>$${price3.toFixed(2)}</span>
+              </div>` : ''}
+              ${total === 0 ? '<div class="cart-item" style="text-align: center; color: #999;">Your cart is empty</div>' : ''}
+              <div class="cart-total">
+                <span>Total</span>
+                <span>$${total.toFixed(2)}</span>
+              </div>
+            `;
+          }
+        };
+        
+        // Initial update
+        setTimeout(updateCartSummary, 100);
+        
+        // Set up listeners
+        elementArg.querySelectorAll('dees-input-quantityselector').forEach(selector => {
+          selector.addEventListener('changeSubject', updateCartSummary);
+        });
+      }}>
         <div class="shopping-grid">
           <div class="product-card">
-            <div class="product-name">Premium Headphones</div>
-            <div class="product-price">$199.99</div>
-            <dees-input-quantityselector
-              .label=${'Quantity'}
-              .layoutMode=${'horizontal'}
-              .value=${1}
-            ></dees-input-quantityselector>
+            <div class="product-image">
+              <dees-icon .iconName=${'lucide:headphones'}></dees-icon>
+            </div>
+            <div class="product-content">
+              <div class="product-header">
+                <div class="product-category">Audio</div>
+                <div class="product-name">Sony WH-1000XM5 Wireless Headphones</div>
+              </div>
+              <div class="product-description">
+                Industry-leading noise canceling with Auto NC Optimizer
+              </div>
+              <div class="in-stock">
+                <dees-icon .iconName=${'lucide:check-circle'}></dees-icon>
+                In Stock
+              </div>
+              <div class="product-footer">
+                <div class="product-price">
+                  <span class="price-current">$349.99</span>
+                  <span class="price-original">$399.99</span>
+                </div>
+                <dees-input-quantityselector
+                  id="headphones-qty"
+                  .value=${1}
+                ></dees-input-quantityselector>
+              </div>
+            </div>
           </div>
           
           <div class="product-card">
-            <div class="product-name">Wireless Mouse</div>
-            <div class="product-price">$49.99</div>
-            <dees-input-quantityselector
-              .label=${'Quantity'}
-              .layoutMode=${'horizontal'}
-              .value=${2}
-            ></dees-input-quantityselector>
+            <div class="product-image">
+              <dees-icon .iconName=${'lucide:mouse-pointer'}></dees-icon>
+            </div>
+            <div class="product-content">
+              <div class="product-header">
+                <div class="product-category">Accessories</div>
+                <div class="product-name">Logitech MX Master 3S</div>
+              </div>
+              <div class="product-description">
+                Performance wireless mouse with ultra-fast scrolling
+              </div>
+              <div class="in-stock">
+                <dees-icon .iconName=${'lucide:check-circle'}></dees-icon>
+                In Stock
+              </div>
+              <div class="product-footer">
+                <div class="product-price">
+                  <span class="price-current">$99.99</span>
+                </div>
+                <dees-input-quantityselector
+                  id="mouse-qty"
+                  .value=${2}
+                ></dees-input-quantityselector>
+              </div>
+            </div>
           </div>
           
           <div class="product-card">
-            <div class="product-name">USB-C Cable</div>
-            <div class="product-price">$19.99</div>
-            <dees-input-quantityselector
-              .label=${'Quantity'}
-              .layoutMode=${'horizontal'}
-              .value=${1}
-            ></dees-input-quantityselector>
+            <div class="product-image">
+              <dees-icon .iconName=${'lucide:keyboard'}></dees-icon>
+            </div>
+            <div class="product-content">
+              <div class="product-header">
+                <div class="product-category">Keyboards</div>
+                <div class="product-name">Keychron K2 Wireless Mechanical Keyboard</div>
+              </div>
+              <div class="product-description">
+                Compact 75% layout with hot-swappable switches
+              </div>
+              <div class="in-stock">
+                <dees-icon .iconName=${'lucide:check-circle'}></dees-icon>
+                In Stock
+              </div>
+              <div class="product-footer">
+                <div class="product-price">
+                  <span class="price-current">$79.99</span>
+                  <span class="price-original">$94.99</span>
+                </div>
+                <dees-input-quantityselector
+                  id="keyboard-qty"
+                  .value=${1}
+                ></dees-input-quantityselector>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="cart-summary">
+          <h3 class="cart-summary-title">Order Summary</h3>
+          <div id="cart-summary-content">
+            <!-- Content will be dynamically updated -->
           </div>
         </div>
       </dees-panel>
diff --git a/ts_web/elements/dees-input-quantityselector.ts b/ts_web/elements/dees-input-quantityselector.ts
index 474b511..05041fb 100644
--- a/ts_web/elements/dees-input-quantityselector.ts
+++ b/ts_web/elements/dees-input-quantityselector.ts
@@ -32,48 +32,91 @@ export class DeesInputQuantitySelector extends DeesInputBase<DeesInputQuantitySe
         }
         
         .quantity-container {
-          transition: all 0.1s;
+          transition: all 0.15s ease;
           font-size: 14px;
-          display: grid;
-          grid-template-columns: 33% 34% 33%;
-          text-align: center;
-          background: ${cssManager.bdTheme('#fafafa', '#222222')};
-          line-height: 40px;
-          padding: 0px;
-          min-width: 110px;
-          color: ${cssManager.bdTheme('#666', '#CCC')};
-          border: 1px solid ${cssManager.bdTheme('#CCC', '#444')};
-          border-radius: 4px;
+          display: inline-flex;
+          align-items: center;
+          background: transparent;
+          height: 40px;
+          padding: 0;
+          min-width: 120px;
+          color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+          border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+          border-radius: 6px;
+          overflow: hidden;
         }
         
         .quantity-container.disabled {
+          background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+          border-color: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
           opacity: 0.5;
           pointer-events: none;
         }
 
-        .quantity-container:hover {
-          color: ${cssManager.bdTheme('#333', '#fff')};
-          border-color: ${cssManager.bdTheme('#999', '#666')};
+        .quantity-container:hover:not(.disabled) {
+          border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
         }
 
-        .minus {
-          padding-left: 5px;
-        }
-
-        .plus {
-          padding-right: 5px;
+        .quantity-container:focus-within {
+          border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+          box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
         }
 
         .selector {
-          text-align: center;
-          font-size: 20px;
+          flex: 0 0 40px;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 16px;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.15s ease;
+          color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+          position: relative;
         }
 
         .selector:hover {
+          background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+          color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        }
+
+        .selector:active {
+          background: ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 11%)')};
+        }
+
+        .selector.minus {
+          border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        }
+
+        .selector.plus {
+          border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         }
 
         .quantity {
+          flex: 1;
           text-align: center;
+          font-weight: 500;
+          font-variant-numeric: tabular-nums;
+          letter-spacing: -0.006em;
+        }
+
+        /* Keyboard navigation focus styles */
+        .selector:focus {
+          outline: none;
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+          z-index: 1;
+        }
+
+        /* Min value state */
+        .quantity-container[data-min="true"] .selector.minus {
+          opacity: 0.3;
+          cursor: not-allowed;
+        }
+
+        .quantity-container[data-min="true"] .selector.minus:hover {
+          background: transparent;
+          color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
         }
 
     `,
@@ -82,11 +125,38 @@ export class DeesInputQuantitySelector extends DeesInputBase<DeesInputQuantitySe
   public render(): TemplateResult {
     return html`
       <div class="input-wrapper">
-        <dees-label .label=${this.label}></dees-label>
-        <div class="quantity-container ${this.disabled ? 'disabled' : ''}">
-          <div class="selector minus" @click="${() => {this.decrease();}}">-</div>
-        <div class="quantity">${this.value}</div>
-          <div class="selector plus" @click="${() => {this.increase();}}">+</div>
+        ${this.label ? html`<dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>` : ''}
+        <div 
+          class="quantity-container ${this.disabled ? 'disabled' : ''}"
+          data-min="${this.value <= 0}"
+        >
+          <div 
+            class="selector minus" 
+            @click="${() => {this.decrease();}}"
+            tabindex="${this.disabled ? '-1' : '0'}"
+            @keydown="${(e: KeyboardEvent) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.decrease();
+              }
+            }}"
+            role="button"
+            aria-label="Decrease quantity"
+          >−</div>
+          <div class="quantity" aria-live="polite" aria-atomic="true">${this.value}</div>
+          <div 
+            class="selector plus" 
+            @click="${() => {this.increase();}}"
+            tabindex="${this.disabled ? '-1' : '0'}"
+            @keydown="${(e: KeyboardEvent) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.increase();
+              }
+            }}"
+            role="button"
+            aria-label="Increase quantity"
+          >+</div>
         </div>
       </div>
     `;
diff --git a/ts_web/elements/dees-input-tags.ts b/ts_web/elements/dees-input-tags.ts
index 4981df1..a874fc1 100644
--- a/ts_web/elements/dees-input-tags.ts
+++ b/ts_web/elements/dees-input-tags.ts
@@ -53,7 +53,7 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
     css`
       :host {
         display: block;
-        font-family: 'Geist Sans', sans-serif;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
       }
 
       .input-wrapper {
@@ -64,44 +64,51 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
-        gap: 8px;
-        padding: 8px;
+        gap: 6px;
+        padding: 6px 10px;
         min-height: 40px;
-        background: ${cssManager.bdTheme('#fafafa', '#222222')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333333')};
-        border-radius: 8px;
-        transition: all 0.2s ease;
+        background: transparent;
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 6px;
+        transition: all 0.15s ease;
         cursor: text;
       }
 
+      .tags-container:hover:not(.disabled) {
+        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+      }
+
       .tags-container:focus-within {
-        border-color: ${cssManager.bdTheme('#0069f2', '#0084ff')};
-        box-shadow: 0 0 0 2px ${cssManager.bdTheme('rgba(0, 105, 242, 0.1)', 'rgba(0, 132, 255, 0.2)')};
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
       }
 
       .tags-container.disabled {
-        background: ${cssManager.bdTheme('#f5f5f5', '#1a1a1a')};
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         cursor: not-allowed;
-        opacity: 0.6;
+        opacity: 0.5;
       }
 
       .tag {
         display: inline-flex;
         align-items: center;
         gap: 4px;
-        padding: 4px 8px;
-        background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')};
-        color: ${cssManager.bdTheme('#1976d2', '#90caf9')};
-        border-radius: 16px;
-        font-size: 14px;
-        line-height: 1.2;
+        padding: 2px 8px;
+        background: ${cssManager.bdTheme('hsl(215 20.2% 65.1% / 0.2)', 'hsl(215 20.2% 35.1% / 0.2)')};
+        color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(217.9 10.6% 74.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(215 20.2% 65.1% / 0.3)', 'hsl(215 20.2% 35.1% / 0.3)')};
+        border-radius: 4px;
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 18px;
         user-select: none;
-        animation: tagAppear 0.2s ease;
+        animation: tagAppear 0.15s cubic-bezier(0.4, 0, 0.2, 1);
       }
 
       @keyframes tagAppear {
         from {
-          transform: scale(0.8);
+          transform: scale(0.95);
           opacity: 0;
         }
         to {
@@ -114,21 +121,23 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 16px;
-        height: 16px;
-        border-radius: 50%;
-        cursor: pointer;
-        transition: all 0.2s ease;
+        width: 14px;
+        height: 14px;
         margin-left: 2px;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 46.7%)', 'hsl(217.9 10.6% 54.9%)')};
       }
 
       .tag-remove:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 100% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(217.9 10.6% 74.9%)')};
       }
 
       .tag-remove dees-icon {
-        width: 12px;
-        height: 12px;
+        width: 10px;
+        height: 10px;
       }
 
       .tag-input {
@@ -139,12 +148,13 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
         outline: none;
         font-size: 14px;
         font-family: inherit;
-        color: ${cssManager.bdTheme('#333', '#fff')};
-        padding: 4px;
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        padding: 2px 4px;
+        line-height: 20px;
       }
 
       .tag-input::placeholder {
-        color: ${cssManager.bdTheme('#999', '#666')};
+        color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
       }
 
       .tag-input:disabled {
@@ -162,44 +172,64 @@ export class DeesInputTags extends DeesInputBase<DeesInputTags> {
         left: 0;
         right: 0;
         margin-top: 4px;
-        background: ${cssManager.bdTheme('#ffffff', '#222222')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333333')};
-        border-radius: 8px;
-        box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.3)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 6px;
+        box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
         max-height: 200px;
         overflow-y: auto;
         z-index: 1000;
       }
 
       .suggestion {
-        padding: 8px 12px;
+        padding: 6px 10px;
         cursor: pointer;
-        transition: all 0.2s ease;
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        transition: all 0.15s ease;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
       }
 
-      .suggestion:hover,
-      .suggestion.highlighted {
-        background: ${cssManager.bdTheme('#f5f5f5', '#333333')};
+      .suggestion:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
       }
 
       .suggestion.highlighted {
-        background: ${cssManager.bdTheme('#e3f2fd', '#1e3a5f')};
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
       }
 
       /* Validation styles */
       .validation-message {
-        color: #d32f2f;
-        font-size: 12px;
-        margin-top: 4px;
-        min-height: 16px;
+        color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
+        font-size: 13px;
+        margin-top: 6px;
+        line-height: 1.5;
       }
 
       /* Description styles */
       .description {
-        color: ${cssManager.bdTheme('#666', '#999')};
-        font-size: 12px;
-        margin-top: 4px;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        font-size: 13px;
+        margin-top: 6px;
+        line-height: 1.5;
+      }
+
+      /* Scrollbar styling */
+      .suggestions-dropdown::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      .suggestions-dropdown::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .suggestions-dropdown::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 4px;
+      }
+
+      .suggestions-dropdown::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
       }
     `,
   ];