tamga-ui 0.5.7 → 0.5.8

package/CHANGELOG.md

@@ -5,6 +5,47 @@ 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.8
+
+> A ticked checkbox stays down.
+
+### Added
+
+- **`ListTemplate.footer`** · the strip at the foot of the list surface, for the pagination or a
+  total. The rows are flush with the card's edge, so anything passed after them as a child landed
+  on that edge with no room; the footer sits inside the card, divided by a line and given its own
+  padding, and it is not drawn while the list is empty.
+
+### Changed
+
+- **A rail row is square on a narrow rail.** It was 52 by 40, written so the row would fill the
+  column, and a rectangle around a single icon framed the space rather than the icon: the selected
+  row read as a wide box with a glyph adrift in it. It is now 40 by 40, centred in the column; a
+  wide rail still takes its own width.
+
+- **`ListTemplate` puts the filters and the list on surfaces of their own.** They sat on the page
+  ground, one bare row above another, and the two read as a single strip: where the list began, and
+  which control filtered which, had to be worked out rather than seen. The kit's own list-screen
+  example and every panel built from it already used cards, so the template was arguing with its own
+  documentation. Both surfaces keep their overflow open, so the filters' dropdowns and the rows'
+  menus are not cut at the card's edge.
+
+### Fixed
+
+- **Hover undid the selected state of a `Segmented` option too.** The chosen option rests 1px up
+  with a 2px shadow; hovering it grew the shadow to 3px and left the object where it was, which is
+  the one thing Law 1 forbids: a shadow that grows while nothing rises makes the height a lie. The
+  option now ignores the pointer, the way the rail, the pagination and the checkbox already did.
+  A new gate (`check:durum-hover`) compares every hover rule against the selected-state rule it
+  could outrank, because this same mistake has now been found by eye three times.
+
+- **Hover undid the checked state of a `Checkbox` and a `Radio`.** The ticked box is drawn as a key
+  that has been pressed home: it sits 2px down and loses its shadow. The hover rule, written to
+  invite a click, was more specific than that, so a box ticked under the pointer sprang back up and
+  only settled once the pointer left. Someone ticking a row saw nothing happen. The rail already
+  carried the same decision in writing, that a current row has no hover of its own; the checkbox
+  did not.
+
 ## 0.5.7
 
 > A multi select can be used in Safari.

package/dist/fonts.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.5.7 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.5.8 · 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.7 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.5.8 · MIT · https://tamga.org.tr */
 :root {
 
   --overlay-gap: 8px;
@@ -387,7 +387,7 @@
     cursor: pointer;
     height: 40px;
 
-    width: 52px;
+    width: 40px;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
@@ -2120,7 +2120,7 @@
     justify-content: center;
   }
 
-  .tamga-segment > button:not(:disabled):hover {
+  .tamga-segment > button:not(:disabled):not([data-active="true"]):hover {
     background: var(--color-nav-hover-bg);
     color: var(--color-nav-hover);
   }
@@ -2132,13 +2132,6 @@
     box-shadow: 2px 2px 0 var(--color-edge);
     transform: translate(-1px, -1px);
   }
-  .tamga-segment > button[data-active="true"]:hover {
-    background: var(--color-shell);
-    color: var(--color-ink);
-    border-color: var(--color-edge);
-    transform: translate(-1px, -1px);
-    box-shadow: 3px 3px 0 var(--color-edge);
-  }
 
   .tamga-segment > button[data-active="true"]:active {
     transform: translate(1px, 1px);
@@ -2377,7 +2370,7 @@
   }
 
   :where(button, label):hover
-    :is(.tamga-check, .tamga-radio):not([data-off]):not(.tamga-check-sm) {
+    :is(.tamga-check, .tamga-radio):not([data-off]):not(.tamga-check-sm):not([data-checked="true"]) {
     border-color: var(--color-accent-line);
     transform: translate(-1px, -1px);
     box-shadow: 3px 3px 0 var(--color-accent-line);

package/dist/patterns/list-template.d.ts

@@ -26,7 +26,16 @@ export type ListTemplateProps = {
     labels: {
         loading: string;
     } & ErrorLabels;
+    /**
+     * The strip at the foot of the list surface: the pagination, a total, a bulk action. It sits
+     * INSIDE the card, divided by a line and given its own padding, because the rows are flush with
+     * the card's edge and anything following them lands on that edge.
+     * TR: Liste yüzeyinin dibindeki şerit: sayfalama, bir toplam, toplu bir eylem. Kartın İÇİNDE,
+     * bir çizgiyle ayrılmış ve kendi dolgusuyla duruyor · satırlar kartın kenarına dayalı olduğu
+     * için ardından gelen her şey o kenara yapışıyor.
+     */
+    footer?: ReactNode;
     children?: ReactNode;
 };
-export declare function ListTemplate({ title, subtitle, actions, filters, state, loadingRows, loadingColumns, empty, error, labels, children, }: ListTemplateProps): import("react").JSX.Element;
+export declare function ListTemplate({ title, subtitle, actions, filters, state, loadingRows, loadingColumns, empty, error, labels, footer, children, }: ListTemplateProps): import("react").JSX.Element;
 //# sourceMappingURL=list-template.d.ts.map

package/dist/patterns/list-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-template.d.ts","sourceRoot":"","sources":["../../src/patterns/list-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAEpF;;;;;GAKG;AAEH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,wLAAwL;IACxL,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iHAAiH;IACjH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wKAAwK;IACxK,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,8JAA8J;IAC9J,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uKAAuK;IACvK,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B,gKAAgK;IAChK,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,WAAW,CAAC;IAE1C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAe,EACf,WAAgB,EAChB,cAAc,EACd,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE,iBAAiB,+BA+BnB"}
+{"version":3,"file":"list-template.d.ts","sourceRoot":"","sources":["../../src/patterns/list-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAEpF;;;;;GAKG;AAEH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,wLAAwL;IACxL,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iHAAiH;IACjH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wKAAwK;IACxK,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,8JAA8J;IAC9J,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uKAAuK;IACvK,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B,gKAAgK;IAChK,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,WAAW,CAAC;IAE1C;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAe,EACf,WAAgB,EAChB,cAAc,EACd,KAAK,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,GACT,EAAE,iBAAiB,+BA6CnB"}

package/dist/patterns/list-template.js

@@ -3,6 +3,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PageBand } from "../components/layout.js";
 import { SkeletonTable } from "../components/skeleton.js";
 import { Busy, ErrorSlot } from "./shared.js";
-export function ListTemplate({ title, subtitle, actions, filters, state = "ready", loadingRows = 25, loadingColumns, empty, error, labels, children, }) {
-    return (_jsxs("div", { className: "flex min-h-0 flex-col", "data-list-state": state, children: [_jsx("div", { className: "tamga-gutter py-4", children: _jsx(PageBand, { title: title, subtitle: subtitle, actions: actions }) }), filters ? (_jsx("div", { className: "tamga-section tamga-gutter flex flex-wrap items-center gap-2 py-3", "data-filters": true, children: filters })) : null, _jsxs("div", { className: "tamga-gutter min-h-0 flex-1 py-6", children: [state === "loading" ? (_jsx(Busy, { label: labels.loading, children: _jsx(SkeletonTable, { rows: loadingRows, ...(loadingColumns ? { cols: loadingColumns } : {}) }) })) : null, state === "error" ? _jsx(ErrorSlot, { error: error, labels: labels }) : null, state === "empty" ? empty : null, state === "ready" ? children : null] })] }));
+export function ListTemplate({ title, subtitle, actions, filters, state = "ready", loadingRows = 25, loadingColumns, empty, error, labels, footer, children, }) {
+    return (_jsxs("div", { className: "flex min-h-0 flex-col", "data-list-state": state, children: [_jsx("div", { className: "tamga-gutter py-4", children: _jsx(PageBand, { title: title, subtitle: subtitle, actions: actions }) }), filters ? (_jsx("div", { className: "tamga-gutter pb-4", children: _jsx("div", { className: "tamga-card tamga-card-open flex flex-wrap items-center gap-2 p-4", "data-filters": true, children: filters }) })) : null, _jsx("div", { className: "tamga-gutter min-h-0 flex-1 pb-6", children: _jsxs("div", { className: "tamga-card tamga-card-open", children: [state === "loading" ? (_jsx(Busy, { label: labels.loading, children: _jsx(SkeletonTable, { rows: loadingRows, ...(loadingColumns ? { cols: loadingColumns } : {}) }) })) : null, state === "error" ? _jsx(ErrorSlot, { error: error, labels: labels }) : null, state === "empty" ? empty : null, state === "ready" ? children : null, footer && state === "ready" ? (_jsx("div", { className: "border-t border-line px-4 py-3", children: footer })) : null] }) })] }));
 }

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.5.7 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.5.8 · 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.7 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.5.8 · 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.7",
+  "version": "0.5.8",
   "description": "Mant\u0131ksal's shared interface library: tokens, physics and components.",
   "license": "MIT",
   "type": "module",