feat(components): Add reusable message input component, refactor element properties to use accessor, update styles and docs, bump dependencies

ts_web/elements/sio-button.ts

@@ -36,19 +36,19 @@ export class SioButton extends DeesElement {
   `;
 
   @property({ type: String })
-  public text: string = '';
+  public accessor text: string = '';
 
   @property({ type: String })
-  public type: 'default' | 'primary' | 'destructive' | 'outline' | 'ghost' = 'default';
+  public accessor type: 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost' = 'default';
 
   @property({ type: String })
-  public size: 'sm' | 'default' | 'lg' = 'default';
+  public accessor size: 'sm' | 'default' | 'lg' = 'default';
 
   @property({ type: Boolean, reflect: true })
-  public disabled: boolean = false;
+  public accessor disabled: boolean = false;
 
   @property({ type: String })
-  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+  public accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
 
   public static styles = [
     cssManager.defaultStyles,
@@ -68,117 +68,123 @@ export class SioButton extends DeesElement {
         align-items: center;
         justify-content: center;
         white-space: nowrap;
-        border-radius: ${unsafeCSS(radius.md)};
+        border-radius: 6px;
         font-weight: 500;
-        transition: ${unsafeCSS(transitions.all)};
+        font-size: 14px;
+        line-height: 1;
+        letter-spacing: -0.01em;
+        transition: all 120ms ease;
         cursor: pointer;
         user-select: none;
         outline: none;
-        border: 1px solid transparent;
-        gap: ${unsafeCSS(spacing["2"])};
-        font-size: 0.875rem;
-        line-height: 1.5;
+        border: none;
+        gap: 6px;
       }
 
       /* Size variants */
       .button.size-sm {
         height: 32px;
-        padding: 0 ${unsafeCSS(spacing["3"])};
+        padding: 0 12px;
         font-size: 13px;
       }
 
       .button.size-default {
         height: 36px;
-        padding: 0 ${unsafeCSS(spacing["4"])};
+        padding: 0 16px;
         font-size: 14px;
       }
 
       .button.size-lg {
-        height: 44px;
-        padding: 0 ${unsafeCSS(spacing["6"])};
-        font-size: 16px;
+        height: 42px;
+        padding: 0 24px;
+        font-size: 15px;
       }
 
       /* Type variants */
       .button.default {
-        background: ${bdTheme('background')};
-        color: ${bdTheme('foreground')};
-        border-color: ${bdTheme('border')};
-        box-shadow: ${unsafeCSS(shadows.sm)};
+        background: ${bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
+        color: ${bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 95%)')};
       }
 
       .button.default:hover:not(.disabled) {
-        background: ${bdTheme('accent')};
-        border-color: ${bdTheme('accent')};
-        transform: translateY(-1px);
-        box-shadow: ${unsafeCSS(shadows.md)};
+        background: ${bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 20%)')};
       }
 
       .button.default:active:not(.disabled) {
-        transform: translateY(0);
-        box-shadow: ${unsafeCSS(shadows.sm)};
+        background: ${bdTheme('hsl(0 0% 87%)', 'hsl(0 0% 18%)')};
       }
 
       .button.primary {
-        background: ${bdTheme('primary')};
-        color: ${bdTheme('primaryForeground')};
-        box-shadow: ${unsafeCSS(shadows.sm)};
+        background: ${bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 95%)')};
+        color: ${bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 0%)')};
       }
 
       .button.primary:hover:not(.disabled) {
-        opacity: 0.9;
-        transform: translateY(-1px);
-        box-shadow: ${unsafeCSS(shadows.md)};
+        background: ${bdTheme('hsl(0 0% 25%)', 'hsl(0 0% 100%)')};
       }
 
       .button.primary:active:not(.disabled) {
-        transform: translateY(0);
-        box-shadow: ${unsafeCSS(shadows.sm)};
+        background: ${bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
       }
 
+      /* Secondary variant */
+      .button.secondary {
+        background: transparent;
+        color: ${bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 95%)')};
+        box-shadow: inset 0 0 0 1px ${bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 25%)')};
+      }
+
+      .button.secondary:hover:not(.disabled) {
+        background: ${bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 15%)')};
+      }
+
+      .button.secondary:active:not(.disabled) {
+        background: ${bdTheme('hsl(0 0% 92%)', 'hsl(0 0% 12%)')};
+      }
+      
+      /* Destructive variant */
       .button.destructive {
-        background: ${bdTheme('destructive')};
-        color: ${bdTheme('destructiveForeground')};
+        background: ${bdTheme('hsl(0 100% 95%)', 'hsl(0 50% 20%)')};
+        color: ${bdTheme('hsl(0 100% 45%)', 'hsl(0 100% 75%)')};
       }
 
       .button.destructive:hover:not(.disabled) {
-        opacity: 0.9;
+        background: ${bdTheme('hsl(0 100% 45%)', 'hsl(0 100% 50%)')};
+        color: white;
       }
 
       .button.destructive:active:not(.disabled) {
-        transform: translateY(1px);
+        background: ${bdTheme('hsl(0 100% 40%)', 'hsl(0 100% 45%)')};
+        color: white;
       }
 
       .button.outline {
         background: transparent;
-        color: ${bdTheme('foreground')};
-        border-color: ${bdTheme('border')};
+        color: ${bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
+        box-shadow: inset 0 0 0 1.5px ${bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 30%)')};
       }
 
       .button.outline:hover:not(.disabled) {
-        background: ${bdTheme('accent')};
-        color: ${bdTheme('accentForeground')};
+        color: ${bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 95%)')};
+        box-shadow: inset 0 0 0 1.5px ${bdTheme('hsl(0 0% 70%)', 'hsl(0 0% 50%)')};
       }
 
       .button.outline:active:not(.disabled) {
-        transform: translateY(1px);
+        background: ${bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
       }
 
       .button.ghost {
         background: transparent;
-        color: ${bdTheme('foreground')};
-        border-color: transparent;
+        color: ${bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 70%)')};
       }
 
       .button.ghost:hover:not(.disabled) {
-        background: ${bdTheme('accent')};
-        color: ${bdTheme('accentForeground')};
-        border-color: transparent;
+        color: ${bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 95%)')};
+        background: ${bdTheme('hsl(0 0% 0% / 0.05)', 'hsl(0 0% 100% / 0.05)')};
       }
 
       .button.ghost:active:not(.disabled) {
-        background: ${bdTheme('accent')};
-        opacity: 0.8;
+        background: ${bdTheme('hsl(0 0% 0% / 0.1)', 'hsl(0 0% 100% / 0.1)')};
       }
 
       /* Status states */
@@ -214,13 +220,31 @@ export class SioButton extends DeesElement {
       .button.disabled {
         opacity: 0.5;
         cursor: not-allowed;
+        transform: none !important;
       }
 
       /* Focus state */
       .button:focus-visible {
-        outline: 2px solid ${bdTheme('ring')};
+        outline: 2px solid ${bdTheme('hsl(0 0% 15% / 0.2)', 'hsl(0 0% 95% / 0.2)')};
         outline-offset: 2px;
       }
+      
+      /* Icon sizing within buttons */
+      .button sio-icon {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+      }
+      
+      .button.size-sm sio-icon {
+        width: 14px;
+        height: 14px;
+      }
+      
+      .button.size-lg sio-icon {
+        width: 18px;
+        height: 18px;
+      }
     `,
   ];
 
@@ -260,6 +284,7 @@ export class SioButton extends DeesElement {
       return;
     }
 
+
     // Let the native click bubble normally
     // Don't dispatch a custom event to avoid double-triggering
   }