tamga-ui 0.5.0 → 0.5.2

package/CHANGELOG.md

@@ -5,6 +5,68 @@ Versions follow [semver](https://semver.org/). Through `0.x`, breaking changes m
 
 > 🇹🇷 Türkçe için [tamga.org.tr/tr](https://tamga.org.tr/tr).
 
+## 0.5.2
+
+> A light palette takes the brand's hue, and two things a pointer could feel: a checkbox
+> that flickered under hover and a two-line label that centred itself.
+
+### Fixed
+
+- **`Checkbox` no longer centres a two-line label.** It renders a `<button>`, and a browser centres
+  button text; every other choice surface in the kit already neutralises that (`RadioGroup`'s list
+  look, `.tamga-choice-card`), this one did not. A one-word label never showed it; a label with a
+  description under it did.
+
+## Unreleased
+
+### Changed
+
+- **A light palette now carries the brand's hue.** `makePalette` fixed every light surface at hue
+  90 — `page`, `shell`, `rail`, `hover`, `sunk`, `line`, `div` were the same warm paper whatever the
+  brand, while the dark half breathed in the brand's hue. Only the HUE moves: the lightness steps
+  and the chroma ceiling are untouched, so the contrast that makes a panel comfortable to read is
+  the same number it was (measured: ink over page stays above 15). The warm-brand guard still holds
+  a red or orange brand at the paper hue, because a surface pulled toward those reads as dirty
+  rather than tinted.
+
+### Fixed
+
+- **A hovered checkbox no longer flickers.** The box lifts a pixel on hover, and the hover target
+  was the box itself: a pointer resting on its lower or right edge lost the box as it moved, the
+  hover ended, the box came back, the hover started again — a loop that does not stop, because the
+  pointer never moved. Hover now belongs to the wrapping control, which does not move. The label
+  lights the box too, which is where a checkbox's hit area always was.
+
+## 0.5.1
+
+> Three corrections the 0.5.0 port left behind: a menu that stole the page's scroll, and the
+> rail's hover, lift and press.
+
+### Changed
+
+- **The rail's hover is a wash again, and the current row lifts.** Hovering a row had it grow a
+  border and a base, turning every row into its own button: a rail is a list of eight, and eight
+  controls under the pointer is not navigation. Hover is now only the wash the kit already had a
+  token for (`--color-nav-hover-bg`), and the current row — which never takes that wash — lifts by
+  a pixel over its 3px base, so "you are here" is the one thing standing up. Law 2 is untouched:
+  it binds the FILL to an action, not the height, and the current row still speaks with an
+  outline. The pressed row travels 2px, which is the 3px of its base measured from where it
+  actually rests.
+
+- **A pressed segment no longer sinks below its own ground.** The selected tab rests a pixel up so
+  its shadow has room, which puts its ground at 1px; it was travelling 2px. The physics gate could
+  not see this because it measured the ARRIVAL, not the travel, and every family with a shadow
+  used to rest flat — that is fixed too, and the gate found this the moment it could.
+
+### Fixed
+
+- **A menu that starts open no longer steals the focus.** `DropdownMenu` with `defaultOpen`
+  focused its first option on mount, and the browser scrolls whatever it focuses into view: a page
+  carrying such a menu opened thousands of pixels down, past its own heading. The rule is no
+  longer "is it open" but "was it just opened" — the focus belongs to whoever performed the
+  opening. A menu the visitor opens still focuses its first option, so the arrow keys have
+  somewhere to start. Covered by a test.
+
 ## 0.5.0
 
 > The Soft Neo Brutalism port: every component, every token and the physics behind them. The

package/README.md

@@ -26,10 +26,6 @@ Docs: **[tamga.org.tr](https://tamga.org.tr)** · Changelog: [CHANGELOG.md](./CH
 npm install tamga-ui
 ```
 
-> **If a machine is reading this:** the package page (`npmjs.com/...`) returns **403** to
-> non-browser requests. That is npm's bot protection, nothing to do with this package. For
-> versions and metadata use the registry: `https://registry.npmjs.org/tamga-ui` (200, plain JSON).
-
 ### Local development
 
 To link the kit into a consuming project without publishing, while changing the kit itself:

package/dist/components/a11y.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["../../src/components/a11y.ts"],"names":[],"mappings":"AAkCA;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,IAAI,EAAE,OAAO,uCA0DhE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,OAAO,GACR,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,QAmDA"}
+{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["../../src/components/a11y.ts"],"names":[],"mappings":"AAkCA;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,IAAI,EAAE,OAAO,uCA0DhE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,OAAO,GACR,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,QA0DA"}

package/dist/components/a11y.js

@@ -98,16 +98,22 @@ export function useFocusTrap(open) {
  * without the hook needing to know what a separator is.
  */
 export function useListKeys({ open, containerRef, onClose, }) {
+    /* Ölçüt "açık mı" değil, "AÇILDI MI": `defaultOpen` ile açık doğan bir menüde
+       ilk seçenek odağı alırsa tarayıcı sayfayı ona kaydırıyor.
+       Gerekçe: docs/gerekce/07-katman-ve-diyalog.md */
+    const acikDogdu = useRef(open);
     useEffect(() => {
-        if (!open)
+        if (!open) {
+            acikDogdu.current = false;
             return;
+        }
         const root = containerRef.current;
         if (!root)
             return;
         const items = () => Array.from(root.querySelectorAll("[data-tamga-option]:not([disabled])"));
         /* focus the first option on open, so the arrows have somewhere to start */
-        const initial = items();
-        initial[0]?.focus();
+        if (!acikDogdu.current)
+            items()[0]?.focus();
         const onKey = (e) => {
             const list = items();
             if (list.length === 0)

package/dist/components/checkbox.js

@@ -12,5 +12,5 @@ import { Check, Minus } from "./icons.js";
  * offsetini taşır, böylece kontrol ailesinin bir üyesi gibi okunur.
  * ---------------------------------------------------------------- */
 export function Checkbox({ label, checked, indeterminate = false, onChange, disabled = false, className, compact = false, ...rest }) {
-    return (_jsxs("button", { ...dataProps(rest), type: "button", role: "checkbox", "aria-checked": indeterminate ? "mixed" : checked, "aria-disabled": disabled || undefined, disabled: disabled, onClick: () => !disabled && onChange?.(!checked), className: cn("flex items-center gap-2 text-body", disabled && "text-ink-faint", className), children: [_jsx("span", { className: cn("tamga-check", compact && "tamga-check-sm"), "data-checked": (checked || indeterminate) && !disabled, "data-off": disabled || undefined, children: indeterminate ? (_jsx(Icon, { icon: Minus, size: "xs", weight: "bold" })) : checked ? (_jsx(Icon, { icon: Check, size: "xs", weight: "bold" })) : null }), label] }));
+    return (_jsxs("button", { ...dataProps(rest), type: "button", role: "checkbox", "aria-checked": indeterminate ? "mixed" : checked, "aria-disabled": disabled || undefined, disabled: disabled, onClick: () => !disabled && onChange?.(!checked), className: cn("flex items-center gap-2 text-left text-body", disabled && "text-ink-faint", className), children: [_jsx("span", { className: cn("tamga-check", compact && "tamga-check-sm"), "data-checked": (checked || indeterminate) && !disabled, "data-off": disabled || undefined, children: indeterminate ? (_jsx(Icon, { icon: Minus, size: "xs", weight: "bold" })) : checked ? (_jsx(Icon, { icon: Check, size: "xs", weight: "bold" })) : null }), label] }));
 }

package/dist/fonts.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.5.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.5.2 · MIT · https://tamga.org.tr */
 @font-face {
   font-family: "Red Hat Display";
   font-style: normal;

package/dist/kit.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.5.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.5.2 · MIT · https://tamga.org.tr */
 :root {
 
   --overlay-gap: 8px;
@@ -433,38 +433,31 @@
     padding-inline: 10px;
   }
 
-  .tamga-rail-link:hover {
+  .tamga-rail-link:hover:not([data-active="true"]) {
     color: var(--color-nav-hover);
-    background: var(--color-shell);
-    border-color: var(--color-edge-strong);
-    transform: translate(-1px, -1px);
-    box-shadow: 4px 4px 0 var(--color-edge-strong);
+    background: var(--color-nav-hover-bg);
   }
 
   .tamga-rail-link[data-active="true"] {
     background: var(--color-shell);
     border-color: var(--color-edge-strong);
+    transform: translate(-1px, -1px);
     box-shadow: 3px 3px 0 var(--color-edge-strong);
   }
 
   .tamga-rail-link[data-active="true"] svg {
     color: var(--color-accent);
   }
-  .tamga-rail-link[data-active="true"]:hover {
-    background: var(--color-shell);
-    border-color: var(--color-edge-strong);
-    transform: translate(-1px, -1px);
-    box-shadow: 4px 4px 0 var(--color-edge-strong);
-  }
+
   .tamga-rail-link[data-active="true"]:active {
-    transform: translate(3px, 3px);
+    transform: translate(2px, 2px);
     box-shadow: 0 0 0 var(--color-edge-strong);
   }
 
   .tamga-btn:not(:disabled):active,
   .tamga-icon-btn:not(:disabled):active,
   .tamga-mini-btn:not(:disabled):active,
-  .tamga-rail-link[data-active="true"]:active,
+
   .tamga-art-tile:active,
   .tamga-art-route:active {
     transition-duration: 0s;
@@ -2144,8 +2137,9 @@
     transform: translate(-1px, -1px);
     box-shadow: 3px 3px 0 var(--color-edge);
   }
+
   .tamga-segment > button[data-active="true"]:active {
-    transform: translate(2px, 2px);
+    transform: translate(1px, 1px);
     box-shadow: 0 0 0 var(--color-edge);
   }
 
@@ -2361,7 +2355,6 @@
     border-radius: var(--radius-chip);
     box-shadow: none;
   }
-  .tamga-check-sm:hover,
   .tamga-check-sm[data-checked="true"] {
     transform: none;
     box-shadow: none;
@@ -2381,13 +2374,8 @@
     cursor: default;
   }
 
-  .tamga-check[data-off]:hover, .tamga-radio[data-off]:hover {
-    border-color: var(--color-edge);
-    transform: none;
-    box-shadow: none;
-  }
-
-  .tamga-check:hover, .tamga-radio:hover {
+  :where(button, label):hover
+    :is(.tamga-check, .tamga-radio):not([data-off]):not(.tamga-check-sm) {
     border-color: var(--color-accent-line);
     transform: translate(-1px, -1px);
     box-shadow: 3px 3px 0 var(--color-accent-line);

package/dist/lib/palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/lib/palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAA0B,QAAQ,EAAc,MAAM,YAAY,CAAC;AAEpG;;;;;;;;GAQG;AAEH,qFAAqF;AACrF,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,8EAA8E;IAC9E,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAyL5D;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAIzD;AAMD,OAAO,EAAE,KAAK,EAAE,CAAC;AAIjB,+BAA+B;AAC/B,MAAM,MAAM,WAAW,GAAG;IACxB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,IAAI,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,OAAO,GAAG,WAAW,EAAE,CA8BxD;AAoBD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAI9D;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAMpD;AAED,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/lib/palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAA0B,QAAQ,EAAc,MAAM,YAAY,CAAC;AAEpG;;;;;;;;GAQG;AAEH,qFAAqF;AACrF,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,8EAA8E;IAC9E,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AA4L5D;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAIzD;AAMD,OAAO,EAAE,KAAK,EAAE,CAAC;AAIjB,+BAA+B;AAC/B,MAAM,MAAM,WAAW,GAAG;IACxB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,IAAI,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,OAAO,GAAG,WAAW,EAAE,CA8BxD;AAoBD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAI9D;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAMpD;AAED,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC"}

package/dist/lib/palette.js

@@ -14,13 +14,13 @@ import { lightness, deltaL, isHex, hexToOklch, oklchToHex, contrast } from "./co
 const REFERANS_MARKA = { l: 0.49, c: 0.2158, h: 264.4 };
 const BASAMAK = {
     light: {
-        page: { l: 0.961, c: 0.0083, k: "sabit" },
-        shell: { l: 0.997, c: 0.0041, k: "sabit" },
-        rail: { l: 0.925, c: 0.0112, k: "sabit" },
-        hover: { l: 0.970, c: 0.0082, k: "sabit" },
-        sunk: { l: 0.898, c: 0.0142, k: "sabit" },
-        line: { l: 0.861, c: 0.0156, k: "sabit" },
-        div: { l: 0.904, c: 0.0129, k: "sabit" },
+        page: { l: 0.961, c: 0.0083, k: "kisitli" },
+        shell: { l: 0.997, c: 0.0041, k: "kisitli" },
+        rail: { l: 0.925, c: 0.0112, k: "kisitli" },
+        hover: { l: 0.970, c: 0.0082, k: "kisitli" },
+        sunk: { l: 0.898, c: 0.0142, k: "kisitli" },
+        line: { l: 0.861, c: 0.0156, k: "kisitli" },
+        div: { l: 0.904, c: 0.0129, k: "kisitli" },
         edge: { l: 0.834, c: 0.0154, k: "kisitli" },
         edgeHover: { l: 0.677, c: 0.0340, k: "kisitli" },
         edgeStrong: { l: 0.241, c: 0.0635, k: "tam" },
@@ -30,7 +30,7 @@ const BASAMAK = {
         inkFaint: { l: 0.460, c: 0.0476, k: "kisitli" },
         navIdle: { l: 0.241, c: 0.0635, k: "tam" },
         navHover: { l: 0.241, c: 0.0635, k: "tam" },
-        navHoverBg: { l: 0.997, c: 0.0041, k: "sabit" },
+        navHoverBg: { l: 0.997, c: 0.0041, k: "kisitli" },
     },
     dark: {
         page: { l: 0.218, c: 0.0385, k: "kisitli" },
@@ -60,11 +60,13 @@ const BASAMAK = {
         navHoverBg: { l: 0.257, c: 0.0473, k: "kisitli" },
     },
 };
-/** Açık temanın sabit kâğıtları: tonu 78, markadan bağımsız. */
+/** Sıcak markada kâğıdın kaçtığı ton. */
 const KAGIT_TONU = 78;
+/* AÇIK YÜZEYLER DE MARKADAN TON ALIYOR. Kâğıtlar `h: 90`da sabitti: seçilen renk ne olursa
+   olsun ray, zemin ve kartlar aynı sıcak griydi, oysa koyu tema markanın tonunda nefes
+   alıyordu. Değişen yalnız TON · parlaklık ve doyum tavanı aynı kaldığı için kontrast ve
+   göz konforu yerinde duruyor (ölçüldü: mürekkep/zemin 15.5+). */
 function notrUret(b, marka, koyu) {
-    if (b.k === "sabit")
-        return oklchToHex({ l: b.l, c: b.c, h: 90 });
     const oran = Math.max(0.12, Math.min(1.4, marka.c / REFERANS_MARKA.c));
     const tavan = koyu ? 0.02 : 0.022;
     let c = b.k === "tam" ? b.c * oran : Math.min(b.c * oran, tavan);

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.5.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.5.2 · MIT · https://tamga.org.tr */
 @import "./fonts.css";
 @import "./theme.css";
 @import "./kit.css";

package/dist/theme.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.5.0 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.5.2 · MIT · https://tamga.org.tr */
 @custom-variant dark (&:is(.dark *));
 
 @theme static {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tamga-ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Mant\u0131ksal's shared interface library: tokens, physics and components.",
   "license": "MIT",
   "type": "module",