@skygraph/styles 0.1.0 → 0.2.0

package/components/checkbox.css

@@ -1,4 +1,25 @@
+/* Checkbox — custom box element on top of a visually-hidden native input.
+ *
+ * The native `<input type="checkbox">` is kept in the DOM (for keyboard,
+ * form-association, accessibility, indeterminate) but visually hidden.
+ * A sibling `.sg-checkbox-box` element paints the actual UI so demos
+ * can rebrand through dedicated `--sg-checkbox-*` tokens without
+ * fighting the browser's `accent-color` limitations.
+ */
+
 .sg-checkbox {
+  /* Component-local tokens. Override these (not the globals) to rebrand
+   * one group of checkboxes — keeps `--sg-color-primary` intact for the
+   * rest of the page. */
+  --sg-checkbox-size: 16px;
+  --sg-checkbox-radius: 4px;
+  --sg-checkbox-border: var(--sg-color-border);
+  --sg-checkbox-border-hover: var(--sg-color-primary);
+  --sg-checkbox-bg: var(--sg-color-bg);
+  --sg-checkbox-bg-checked: var(--sg-color-primary);
+  --sg-checkbox-color-checked: var(--sg-color-white);
+
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--sg-padding-sm);
@@ -13,11 +34,75 @@
   cursor: not-allowed;
 }
 
+/* Visually hide the native checkbox but keep it focusable & screen-
+ * readable. Pointer events are forwarded to the wrapping <label>. */
 .sg-checkbox-input {
-  width: 16px;
-  height: 16px;
-  accent-color: var(--sg-color-primary);
-  cursor: inherit;
+  position: absolute;
+  width: var(--sg-checkbox-size);
+  height: var(--sg-checkbox-size);
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sg-checkbox-box {
+  position: relative;
+  flex-shrink: 0;
+  display: inline-block;
+  width: var(--sg-checkbox-size);
+  height: var(--sg-checkbox-size);
+  border: 1px solid var(--sg-checkbox-border);
+  border-radius: var(--sg-checkbox-radius);
+  background: var(--sg-checkbox-bg);
+  transition:
+    background var(--sg-transition-duration) var(--sg-transition-timing),
+    border-color var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-checkbox:hover .sg-checkbox-box {
+  border-color: var(--sg-checkbox-border-hover);
+}
+
+.sg-checkbox-input:focus-visible ~ .sg-checkbox-box {
+  outline: 2px solid var(--sg-color-primary);
+  outline-offset: 2px;
+}
+
+.sg-checkbox-input:checked ~ .sg-checkbox-box,
+.sg-checkbox-input:indeterminate ~ .sg-checkbox-box {
+  background: var(--sg-checkbox-bg-checked);
+  border-color: var(--sg-checkbox-bg-checked);
+}
+
+/* Tick (checked) */
+.sg-checkbox-input:checked ~ .sg-checkbox-box::after {
+  content: '';
+  position: absolute;
+  left: 5px;
+  top: 1px;
+  width: 5px;
+  height: 9px;
+  border: solid var(--sg-checkbox-color-checked);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+/* Bar (indeterminate) */
+.sg-checkbox-input:indeterminate ~ .sg-checkbox-box::after {
+  content: '';
+  position: absolute;
+  left: 3px;
+  right: 3px;
+  top: 50%;
+  height: 2px;
+  background: var(--sg-checkbox-color-checked);
+  transform: translateY(-50%);
+}
+
+.sg-checkbox-disabled .sg-checkbox-box {
+  background: var(--sg-color-bg-disabled, var(--sg-color-bg-secondary));
+  border-color: var(--sg-color-border);
+  opacity: 0.6;
 }
 
 .sg-checkbox-label {

package/components/diagram.css

@@ -220,13 +220,17 @@
 
 .sg-diagram-edge {
   stroke: var(--sg-diagram-edge-color);
-  stroke-width: 1.75;
+  stroke-width: 1.5;
   fill: none;
-  /* `linejoin` keeps orthogonal-routed edges crisp at corners; `linecap`
-   * rounds the start/end so an edge feels finished where it meets the
-   * node border instead of clipping abruptly. */
+  /* `linejoin: round` smooths orthogonal corners. `linecap: butt`
+   * means the path tip ends flush — combined with the marker-end
+   * sitting at `refX/refY = 0`, the arrow glyph picks up exactly
+   * where the line stops, with no visible "pill" cap protruding
+   * beyond the arrowhead. Round caps used to leak a half-circle
+   * over the marker base and that was visible on every screenshot
+   * the user shared. */
   stroke-linejoin: round;
-  stroke-linecap: round;
+  stroke-linecap: butt;
   transition:
     stroke var(--sg-transition-fast),
     stroke-width var(--sg-transition-fast);
@@ -236,7 +240,7 @@
  * naturally thins at the inflection point, which makes the same
  * stroke-width look lighter than its orthogonal counterpart. */
 .sg-diagram-edge-bezier {
-  stroke-width: 2;
+  stroke-width: 1.75;
 }
 
 /* Dashed for manual-routed waypoints — visually distinguishes a hand-
@@ -248,7 +252,7 @@
 .sg-diagram-edge-hit:hover + .sg-diagram-edge,
 g[data-edge-id]:hover .sg-diagram-edge {
   stroke: var(--sg-diagram-edge-hover-stroke);
-  stroke-width: 2.5;
+  stroke-width: 2.25;
 }
 
 /* Highlight edges connected to a selected node when the selection is
@@ -257,26 +261,35 @@ g[data-edge-id]:hover .sg-diagram-edge {
  * `selected` color on `:focus-within` of the SVG group. */
 g[data-edge-id]:focus-within .sg-diagram-edge {
   stroke: var(--sg-diagram-edge-color-selected);
-  stroke-width: 2.5;
+  stroke-width: 2.25;
 }
 
 /* ─── Arrow markers ─────────────────────────────────────────────────── */
 /*
- * SVG markers don't inherit `stroke` from the path automatically — the
- * `context-stroke` keyword in the marker `fill` solves it where
- * supported, and the fallback below keeps Firefox / Safari < TP rendering
- * the arrow in the right colour by using `currentColor`.
+ * The arrowhead is an "open V" — two strokes meeting at the marker
+ * anchor, not a filled triangle. That gives the arrow visual cohesion
+ * with the line (same stroke), keeps it readable on dense graphs, and
+ * matches the look used by React Flow / draw.io / Lucidchart.
  *
- * `.sg-diagram-edges` carries `currentColor` from the token so the arrow
- * inherits the default colour; per-state overrides (`:hover`) below adjust
- * `currentColor` so the arrow lights up together with the line.
+ * SVG markers don't inherit `stroke` from the path automatically. We
+ * use `context-stroke` in the marker so modern browsers paint the arrow
+ * with the line colour, and rely on `currentColor` below as a fallback
+ * for Firefox / Safari versions that don't yet support context-stroke.
+ *
+ * `.sg-diagram-edges { color: ... }` is the lever per-edge state hooks
+ * (`:hover`) modulate so the arrow lights up together with the line.
  */
 .sg-diagram-edges {
   color: var(--sg-diagram-edge-color);
 }
 
+/* Marker glyph: stroke takes the inherited `currentColor` so old
+ * browsers without context-stroke still render the arrow in the right
+ * colour. `fill: none` is essential — the marker is an open polyline,
+ * not a triangle. */
 .sg-diagram-arrow-fill {
-  fill: currentColor;
+  stroke: currentColor;
+  fill: none;
 }
 
 g[data-edge-id]:hover {

package/components/gantt.css

@@ -51,6 +51,11 @@
   color: var(--sg-color-text-secondary);
   border-right: 1px solid var(--sg-color-border-secondary);
   box-sizing: border-box;
+  /* Clip the label when the tick is narrower than the rendered text
+   * (e.g. day scale with columnWidth=24) — without this, adjacent
+   * labels visually pile up on each other. */
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .sg-gantt-grid {
@@ -123,7 +128,7 @@
   /* Drop-shadow on the text increases legibility on saturated bar
    * fills (esp. the bright primary blue). Cheap, single-line filter
    * that doesn't disturb the bar background. */
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.20);
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 }
 
 .sg-gantt-bar-resize {

package/components/input.css

@@ -23,7 +23,8 @@
   background: var(--sg-input-bg);
   border: 1px solid var(--sg-input-border);
   border-radius: var(--sg-input-radius);
-  transition: color var(--sg-transition-duration) var(--sg-transition-timing),
+  transition:
+    color var(--sg-transition-duration) var(--sg-transition-timing),
     background var(--sg-transition-duration) var(--sg-transition-timing),
     border-color var(--sg-transition-duration) var(--sg-transition-timing),
     box-shadow var(--sg-transition-duration) var(--sg-transition-timing);
@@ -108,3 +109,77 @@
   bottom: 0;
   margin: auto 0;
 }
+
+/* ---- Prefix / Suffix ---- */
+.sg-input-prefix,
+.sg-input-suffix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--sg-color-text-secondary);
+  pointer-events: none;
+}
+
+.sg-input-prefix {
+  position: absolute;
+  left: var(--sg-padding-sm);
+  top: 0;
+  bottom: 0;
+}
+
+.sg-input-suffix {
+  position: absolute;
+  right: var(--sg-padding-sm);
+  top: 0;
+  bottom: 0;
+}
+
+.sg-input-wrapper:has(.sg-input-prefix) .sg-input {
+  padding-left: calc(var(--sg-padding-md) + 16px);
+}
+
+.sg-input-wrapper:has(.sg-input-suffix) .sg-input {
+  padding-right: calc(var(--sg-padding-md) + 16px);
+}
+
+/* ---- Clear button ---- */
+.sg-input-wrapper:has(.sg-input-clear) .sg-input {
+  padding-right: calc(var(--sg-padding-md) + 18px);
+}
+
+.sg-input-clear {
+  position: absolute;
+  right: var(--sg-padding-xs);
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--sg-color-fill-tertiary, rgba(0, 0, 0, 0.06));
+  color: var(--sg-color-text-secondary);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+  transition:
+    background var(--sg-transition-duration) var(--sg-transition-timing),
+    color var(--sg-transition-duration) var(--sg-transition-timing),
+    opacity var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-input-clear:hover {
+  background: var(--sg-color-fill, rgba(0, 0, 0, 0.15));
+  color: var(--sg-color-text);
+  opacity: 1;
+}
+
+.sg-input-clear:focus-visible {
+  outline: 2px solid var(--sg-color-primary);
+  outline-offset: 2px;
+}

package/components/radio.css

@@ -1,3 +1,10 @@
+/* Radio — custom painted dot on top of a visually-hidden native input.
+ *
+ * Like Checkbox, the native `<input type="radio">` stays in the DOM for
+ * keyboard / form / a11y but is visually hidden. `.sg-radio-box` paints
+ * the circle so demos can rebrand through `--sg-radio-*` tokens without
+ * fighting `accent-color` limitations across browsers. */
+
 .sg-radio-group {
   display: flex;
   gap: var(--sg-padding-md);
@@ -8,12 +15,21 @@
 }
 
 .sg-radio {
+  --sg-radio-size: 16px;
+  --sg-radio-border: var(--sg-color-border);
+  --sg-radio-border-hover: var(--sg-color-primary);
+  --sg-radio-bg: var(--sg-color-bg);
+  --sg-radio-bg-checked: var(--sg-color-primary);
+  --sg-radio-dot-color: var(--sg-color-white);
+
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--sg-padding-xs);
   cursor: pointer;
   font-size: var(--sg-font-size);
   color: var(--sg-color-text);
+  line-height: var(--sg-line-height);
 }
 
 .sg-radio-disabled {
@@ -22,11 +38,52 @@
 }
 
 .sg-radio-input {
-  width: 16px;
-  height: 16px;
+  position: absolute;
+  width: var(--sg-radio-size);
+  height: var(--sg-radio-size);
   margin: 0;
-  accent-color: var(--sg-color-primary);
-  cursor: inherit;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sg-radio-box {
+  position: relative;
+  flex-shrink: 0;
+  display: inline-block;
+  width: var(--sg-radio-size);
+  height: var(--sg-radio-size);
+  border: 1px solid var(--sg-radio-border);
+  border-radius: 50%;
+  background: var(--sg-radio-bg);
+  transition:
+    background var(--sg-transition-duration) var(--sg-transition-timing),
+    border-color var(--sg-transition-duration) var(--sg-transition-timing);
+}
+
+.sg-radio:hover .sg-radio-box {
+  border-color: var(--sg-radio-border-hover);
+}
+
+.sg-radio-input:focus-visible ~ .sg-radio-box {
+  outline: 2px solid var(--sg-color-primary);
+  outline-offset: 2px;
+}
+
+.sg-radio-input:checked ~ .sg-radio-box {
+  background: var(--sg-radio-bg-checked);
+  border-color: var(--sg-radio-bg-checked);
+}
+
+.sg-radio-input:checked ~ .sg-radio-box::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--sg-radio-dot-color);
+  transform: translate(-50%, -50%);
 }
 
 .sg-radio-label {

package/components/resource-calendar.css

@@ -71,6 +71,11 @@
 .sg-rcal-main {
   background: var(--sg-color-bg);
   position: relative;
+  /* Clip absolutely positioned blocks (assignments / ticks) so they
+   * can't bleed onto the sidebar when their dates fall outside the
+   * visible `range`. Interactive drag also clamps to range, so this
+   * is a safety net for props-supplied out-of-range assignments. */
+  overflow: hidden;
 }
 
 .sg-rcal-header {
@@ -183,7 +188,7 @@
   transform: none;
   box-shadow:
     0 0 0 1px var(--sg-rcal-conflict-color),
-    0 2px 6px rgba(245, 34, 45, 0.20);
+    0 2px 6px rgba(245, 34, 45, 0.2);
 }
 
 .sg-rcal-assignment-draggable {

package/components/schema-form-editor.css

@@ -75,7 +75,9 @@
 .sg-sfe-body {
   display: grid;
   grid-template-columns: var(--sg-sfe-palette-width) 1fr var(--sg-sfe-inspector-width);
+  flex: 1;
   min-height: 480px;
+  overflow: hidden;
 }
 
 /* Palette (left) ---------------------------------------------------------- */
@@ -113,7 +115,8 @@
   border-radius: var(--sg-sfe-radius);
   cursor: grab;
   user-select: none;
-  transition: border-color var(--sg-transition-duration) var(--sg-transition-timing),
+  transition:
+    border-color var(--sg-transition-duration) var(--sg-transition-timing),
     box-shadow var(--sg-transition-duration) var(--sg-transition-timing);
 }
 
@@ -162,6 +165,8 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
+  min-height: 0;
+  overflow: hidden;
   background: var(--sg-sfe-bg);
 }
 
@@ -204,7 +209,8 @@
   border: 1px solid transparent;
   border-radius: var(--sg-sfe-radius);
   cursor: pointer;
-  transition: border-color var(--sg-transition-duration) var(--sg-transition-timing),
+  transition:
+    border-color var(--sg-transition-duration) var(--sg-transition-timing),
     background var(--sg-transition-duration) var(--sg-transition-timing);
 }
 
@@ -370,6 +376,8 @@
   border-top: 1px solid var(--sg-sfe-border-secondary);
   background: var(--sg-sfe-bg-secondary);
   max-height: 320px;
+  flex-shrink: 0;
+  overflow-y: auto;
 }
 
 .sg-sfe-tabs {

package/components/switch.css

@@ -1,4 +1,10 @@
 .sg-switch {
+  /* Off state uses a dedicated token so demos can rebrand without
+   * touching `--sg-color-text-disabled` (which is also used by the
+   * disabled visual state — overriding it makes every control look
+   * disabled). */
+  --sg-switch-bg: var(--sg-color-fill, rgba(0, 0, 0, 0.25));
+  --sg-switch-bg-checked: var(--sg-color-primary);
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -7,7 +13,7 @@
   padding: 0;
   border: none;
   border-radius: 11px;
-  background: var(--sg-color-text-disabled);
+  background: var(--sg-switch-bg);
   cursor: pointer;
   transition: background var(--sg-transition-duration) var(--sg-transition-timing);
 }
@@ -19,7 +25,7 @@
 }
 
 .sg-switch-checked {
-  background: var(--sg-color-primary);
+  background: var(--sg-switch-bg-checked);
 }
 
 .sg-switch-disabled {

package/components/table.css

@@ -71,6 +71,25 @@
   position: relative;
 }
 
+/* Mobile fallback — when there's no explicit `scroll.x`, the table tries
+ * to flex into the available width which, on narrow viewports, collapses
+ * cells into illegible vertical stacks. Forcing horizontal overflow with
+ * `width: max-content` on the inner grid restores tabular layout and
+ * exposes a native horizontal scrollbar so users can pan instead of
+ * losing data. Only applies when `.sg-table-scroll-x` wasn't already set
+ * (which means the consumer opted-in to a controlled scroll width). */
+@media (max-width: 640px) {
+  .sg-table-scroll:not(.sg-table-scroll-x) {
+    overflow-x: auto;
+  }
+  .sg-table-scroll:not(.sg-table-scroll-x) .sg-table-grid,
+  .sg-table-scroll:not(.sg-table-scroll-x) .sg-table-pinned-top,
+  .sg-table-scroll:not(.sg-table-scroll-x) .sg-table-pinned-bottom {
+    min-width: 100%;
+    width: max-content;
+  }
+}
+
 /* Grid base.
  * The grid carries a solid base background so body cells (transparent by
  * default) and fixed-sticky cells draw over the same colour. Without this,
@@ -117,6 +136,19 @@
   display: flex;
   align-items: center;
   gap: var(--sg-padding-xs);
+  /* В узких колонках с одновременно sortable + filters заголовок мог
+   * "наезжать" на filter-trigger / resize-handle: длинный title + ▲▼
+   * не помещались, sort и filter сливались. Скрываем переполнение и
+   * усекаем сам title через .sg-table-th-title — иконки всегда видны. */
+  overflow: hidden;
+}
+
+.sg-table-th-title {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .sg-table-th-sortable {
@@ -143,6 +175,13 @@
   line-height: 8px;
   color: var(--sg-color-text-quaternary, var(--sg-color-text-tertiary));
   transition: color var(--sg-transition-duration);
+  /* Defensive: keep the sort glyph compact even if the locale ships a long
+   * aria-quality label instead of a single ▲/▼ glyph. The cell would
+   * otherwise stretch by the full label width and clash with the column
+   * title or filter trigger. */
+  max-width: 1em;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .sg-table-sort-current {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skygraph/styles",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "SkyGraph framework-agnostic CSS — tokens, themes, transitions, print and 60+ component stylesheets",
   "license": "MIT",
   "type": "module",