@codemem/server 0.46.3 → 0.47.0-beta.2

package/static/controls.css

@@ -1,5 +1,136 @@
-/* Global native-control baseline. Keep selectors low-specificity so component
- * styles can refine layout and variants without opting out of theme safety. */
+/* Shared control defaults. Native selectors stay low-specificity; component
+ * classes own shared geometry and let callers refine layout and size. */
+
+:root {
+  --control-height: 38px;
+  --control-button-height: 36px;
+  --control-compact-height: 30px;
+  --control-focus-shadow: 0 0 0 3px var(--focus-ring);
+  --popup-radius: var(--radius-md);
+  --popup-shadow: var(--shadow-lg);
+  --popup-padding: 6px;
+}
+
+.radix-select-trigger,
+select.native-select:not([multiple]):not([hidden]):not([aria-hidden="true"]):where(:not([size]), [size="0"], [size="1"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-2);
+  width: var(--select-width, 100%);
+  min-width: var(--select-min-width, 0);
+  min-height: var(--control-height);
+  padding: var(--sp-2) var(--sp-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--input-bg);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
+  text-align: left;
+  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
+}
+
+/* Intentional native variant: keep select.value, input/change events and the
+ * platform picker. Opt in explicitly so Radix bubble selects stay untouched;
+ * multiple/size listboxes retain their native presentation. appearance:none
+ * also lets Safari apply the shared padding instead of its menu-button inset.
+ * Two token-colored strokes match the chevron within Radix's 14px icon box. */
+select.native-select:not([multiple]):not([hidden]):not([aria-hidden="true"]):where(:not([size]), [size="0"], [size="1"]) {
+  appearance: none;
+  display: inline-block;
+  box-sizing: border-box;
+  max-width: 100%;
+  /* WebKit otherwise paints the selected option beyond the select's box,
+   * contributing that text to document scroll width despite width:100%. */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 20px;
+  padding-right: calc(var(--sp-3) + 14px + var(--sp-2));
+  background-image:
+    linear-gradient(45deg, transparent 38%, var(--text-tertiary) 38% 62%, transparent 62%),
+    linear-gradient(-45deg, transparent 38%, var(--text-tertiary) 38% 62%, transparent 62%);
+  background-position: right calc(var(--sp-3) + 7px) center, right calc(var(--sp-3) + 3.5px) center;
+  background-size: 3.5px 3.5px;
+  background-repeat: no-repeat;
+}
+
+.radix-select-trigger[data-size="compact"],
+select.native-select[data-size="compact"]:not([multiple]):not([hidden]):not([aria-hidden="true"]):where(:not([size]), [size="0"], [size="1"]) {
+  min-height: var(--control-compact-height);
+  padding: 5px 10px;
+  font-size: var(--font-size-sm);
+  line-height: 18px;
+}
+
+select.native-select[data-size="compact"]:not([multiple]):not([hidden]):not([aria-hidden="true"]):where(:not([size]), [size="0"], [size="1"]) {
+  padding-right: calc(10px + 14px + var(--sp-2));
+  background-position: right calc(10px + 7px) center, right calc(10px + 3.5px) center;
+}
+
+.radix-select-trigger:hover:not(:disabled),
+select.native-select:not([multiple]):not([hidden]):not([aria-hidden="true"]):where(:not([size]), [size="0"], [size="1"]):hover:not(:disabled) {
+  border-color: var(--border-hover);
+}
+
+.radix-select-trigger > span:first-child,
+.radix-select-item > span:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.radix-select-icon,
+.radix-select-indicator {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+.radix-select-icon { color: var(--text-tertiary); }
+.radix-select-indicator { color: var(--accent); }
+
+.radix-select-content {
+  z-index: 30;
+  min-width: var(--radix-select-trigger-width);
+  max-width: min(420px, calc(100vw - 24px));
+  max-height: var(--radix-select-content-available-height);
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: var(--popup-radius);
+  background: var(--surface-1);
+  box-shadow: var(--popup-shadow);
+}
+
+.radix-select-viewport { padding: var(--popup-padding); }
+
+.radix-select-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-3);
+  min-height: var(--control-button-height);
+  padding: var(--sp-2) var(--sp-3);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
+  cursor: pointer;
+  user-select: none;
+}
+
+.radix-select-item[data-highlighted] {
+  outline: none;
+  background: var(--accent-subtle);
+  color: var(--accent);
+}
+
+.radix-select-item[data-disabled] {
+  opacity: 0.45;
+  cursor: default;
+}
 
 :where(button, input, select, textarea) {
   color: var(--text-primary);
@@ -93,6 +224,34 @@
   box-shadow: 0 0 0 4px var(--focus-ring);
 }
 
+/* Text fields and selects share the inset-safe halo; buttons retain an
+ * offset outline. This also covers fields without feature-specific classes. */
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="reset"]):not([type="submit"]):focus-visible,
+textarea:focus-visible,
+select:focus-visible,
+select.native-select:not([multiple]):not([hidden]):not([aria-hidden="true"]):where(:not([size]), [size="0"], [size="1"]):focus-visible,
+.radix-select-trigger:focus-visible {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: var(--control-focus-shadow);
+}
+
+.sync-legacy-button,
+.settings-button,
+.settings-save {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-height: var(--control-button-height);
+  padding: var(--sp-2) var(--sp-3);
+  border-radius: var(--radius-md);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-sm);
+  line-height: 18px;
+  white-space: nowrap;
+}
+
 :where(input[type="checkbox"], input[type="radio"]) {
   appearance: none;
   display: inline-grid;
@@ -186,11 +345,24 @@
 }
 
 @media (forced-colors: active) {
+  select.native-select:not([multiple]):not([hidden]):not([aria-hidden="true"]):where(:not([size]), [size="0"], [size="1"]) {
+    appearance: auto;
+    background-image: none;
+  }
+
   :where(input[type="checkbox"], input[type="radio"]) {
     appearance: auto;
   }
 
-  :where(button, input, select, textarea):focus-visible {
+  :is(button, input, select, textarea):focus-visible {
+    outline: 2px solid CanvasText;
+  }
+
+  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="reset"]):not([type="submit"]):focus-visible,
+  textarea:focus-visible,
+  select:focus-visible,
+  select.native-select:not([multiple]):not([hidden]):not([aria-hidden="true"]):where(:not([size]), [size="0"], [size="1"]):focus-visible,
+  .radix-select-trigger:focus-visible {
     outline: 2px solid CanvasText;
   }
 }