initial

ts_web/elements/00componentstyles.ts

@@ -0,0 +1,84 @@
+import { css } from '@design.estate/dees-element';
+
+/**
+ * Global component styles for mobile-optimized components
+ * Include this in all component static styles arrays
+ */
+export const mobileComponentStyles = css`
+  /* Box sizing reset */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  /* Prevent text selection on interactive elements */
+  button,
+  a,
+  [role="button"],
+  [role="tab"],
+  [draggable="true"] {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+  }
+
+  /* Remove default button styles */
+  button {
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  /* Smooth scrolling for containers */
+  .scrollable {
+    -webkit-overflow-scrolling: touch;
+    overflow-scrolling: touch;
+  }
+
+  /* Remove tap highlight on mobile */
+  a,
+  button,
+  [role="button"],
+  [role="tab"] {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  /* Focus styles */
+  :focus {
+    outline: none;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--dees-ring, #3b82f6);
+    outline-offset: 2px;
+  }
+
+  /* Prevent layout shift from scrollbars */
+  .scroll-stable {
+    scrollbar-gutter: stable;
+  }
+
+  /* Common transition for interactive elements */
+  .interactive {
+    transition: all var(--dees-transition-fast, 150ms ease);
+  }
+
+  /* Touch-friendly minimum sizes */
+  .touch-target {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  /* Prevent iOS zoom on inputs (16px minimum) */
+  input,
+  textarea,
+  select {
+    font-size: 16px;
+  }
+`;