tamga-ui 0.14.1 → 0.15.0

package/CHANGELOG.md

@@ -5,6 +5,19 @@ 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.15.0
+
+> The shell takes a strip above everything; the caution gets its own button.
+
+### Added
+
+- **`Button` and `MiniButton` `variant="caution"`** · the step that clears a caution (verify an
+  address, renew a card), drawn like `success` and `danger`: the caution's ink as edge, text and
+  base, its soft tone on hover.
+- **`AppShell` `banner`** · a strip above the whole shell, the rail and the top bar included, for
+  an account-wide condition the product will not let the reader overlook. The screen stays one
+  viewport tall.
+
 ## 0.14.1
 
 > The score ring says the exact score; a banner's tile sits on the middle of its text.
@@ -724,15 +737,6 @@ Versions follow [semver](https://semver.org/). Through `0.x`, breaking changes m
 > 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
@@ -745,6 +749,10 @@ Versions follow [semver](https://semver.org/). Through `0.x`, breaking changes m
 
 ### 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.
 - **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

package/dist/components/button.d.ts

@@ -5,7 +5,7 @@ import { type VariantProps } from "class-variance-authority";
  * Gerekçe: docs/gerekce/06-isaret-ve-ton.md
  */
 export declare const buttonVariants: (props?: ({
-    variant?: "danger" | "ghost" | "link" | "primary" | "quiet" | "secondary" | "soft" | "success" | null | undefined;
+    variant?: "caution" | "danger" | "ghost" | "link" | "primary" | "quiet" | "secondary" | "soft" | "success" | null | undefined;
     size?: "base" | "lg" | "sm" | null | undefined;
     full?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -53,7 +53,7 @@ export declare function IconButton({ className, size, variant, "aria-label": lab
     "aria-label": string;
 }): import("react").JSX.Element;
 export declare const miniButtonVariants: (props?: ({
-    variant?: "primary" | "quiet" | "secondary" | "soft" | null | undefined;
+    variant?: "caution" | "primary" | "quiet" | "secondary" | "soft" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Ailenin en sıkı üyesi: 28px, 2px taban, ve hover'da kenarı vurguya dönüyor. */
 export declare function MiniButton({ className, variant, "aria-label": label, ...props }: React.ComponentProps<"button"> & VariantProps<typeof miniButtonVariants> & {

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE;;;;GAIG;AAEH,eAAO,MAAM,cAAc;;;;8EAwCzB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GACtD,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;CAC3D,CAAC;AAEJ,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAY,EACZ,SAAS,EACT,QAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,+BA8Bb;AAID,eAAO,MAAM,kBAAkB;;;8EAoB7B,CAAC;AAEH;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,IAAI,EACJ,OAAO,EACP,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,+BASnE;AAED,eAAO,MAAM,kBAAkB;;8EAW7B,CAAC;AAEH,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,+BASnE"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE;;;;GAIG;AAEH,eAAO,MAAM,cAAc;;;;8EA2CzB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GACtD,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;CAC3D,CAAC;AAEJ,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAY,EACZ,SAAS,EACT,QAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,+BA8Bb;AAID,eAAO,MAAM,kBAAkB;;;8EAoB7B,CAAC;AAEH;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,IAAI,EACJ,OAAO,EACP,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,+BASnE;AAED,eAAO,MAAM,kBAAkB;;8EAa7B,CAAC;AAEH,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,+BASnE"}

package/dist/components/button.js

@@ -22,6 +22,9 @@ export const buttonVariants = cva("tamga-btn", {
             success: "tamga-btn-success",
             /* destructive: findable and deliberate, not loud */
             danger: "tamga-btn-danger",
+            /* the step that clears a caution (verify an address, renew a card): the caution's ink as an
+               edge, like success and danger, never a fill */
+            caution: "tamga-btn-caution",
             /* no edge, no offset, no lift — it is not an object on the page */
             ghost: "tamga-btn-ghost",
             /* reads as a link, behaves as a button. For a click that runs code but
@@ -92,6 +95,8 @@ export const miniButtonVariants = cva("tamga-mini-btn", {
             soft: "tamga-mini-btn-soft",
             /* bir satırda üç eylem varsa üçü birden nesne olamaz */
             quiet: "tamga-mini-btn-quiet",
+            /* bir uyarıyı kapatan adım, uyarının içinde: kenar ve taban uyarının mürekkebi */
+            caution: "tamga-mini-btn-caution",
         },
     },
     defaultVariants: { variant: "secondary" },

package/dist/fonts.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.14.1 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.15.0 · 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.14.1 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.15.0 · MIT · https://tamga.org.tr */
 :root {
 
   --overlay-gap: 8px;
@@ -242,6 +242,10 @@
     border-radius: var(--radius-panel);
   }
 
+  .tamga-app-banner {
+    flex-shrink: 0;
+  }
+
   .tamga-card {
     border-radius: var(--radius-card);
     border: 1px solid var(--color-edge);
@@ -697,6 +701,16 @@
     transform: translate(3px, 3px);
     box-shadow: 0 0 0 var(--color-critical);
   }
+  .tamga-btn-caution.tamga-btn-sm {
+    box-shadow: 3px 3px 0 var(--color-warn);
+  }
+  .tamga-btn-caution.tamga-btn-sm:not(:disabled):hover {
+    box-shadow: 4px 4px 0 var(--color-warn);
+  }
+  .tamga-btn-caution.tamga-btn-sm:not(:disabled):active {
+    transform: translate(3px, 3px);
+    box-shadow: 0 0 0 var(--color-warn);
+  }
 
   .tamga-btn-primary {
     background: var(--color-accent);
@@ -754,6 +768,20 @@
     box-shadow: 0 0 0 var(--color-critical);
   }
 
+  .tamga-btn-caution {
+    background: var(--color-shell);
+    border-color: var(--color-warn);
+    color: var(--color-warn);
+    box-shadow: 4px 4px 0 var(--color-warn);
+  }
+  .tamga-btn-caution:not(:disabled):hover {
+    background: var(--color-warn-bg);
+    box-shadow: 5px 5px 0 var(--color-warn);
+  }
+  .tamga-btn-caution:not(:disabled):active {
+    box-shadow: 0 0 0 var(--color-warn);
+  }
+
   .tamga-btn-ghost {
     background: transparent;
     border-color: transparent;
@@ -1604,6 +1632,18 @@
     box-shadow: 2px 2px 0 var(--color-edge-strong);
   }
 
+  .tamga-mini-btn-caution {
+    border-color: var(--color-warn);
+    color: var(--color-warn);
+    box-shadow: 2px 2px 0 var(--color-warn);
+  }
+
+  .tamga-mini-btn.tamga-mini-btn-caution:not(:disabled):hover {
+    background: var(--color-warn-bg);
+    border-color: var(--color-warn);
+    box-shadow: 2px 2px 0 var(--color-warn);
+  }
+
   .tamga-mini-btn-quiet {
     border-color: var(--color-line);
     background: transparent;

package/dist/patterns/app-shell.d.ts

@@ -69,6 +69,16 @@ export type AppShellProps = {
      * yalnız yerini garanti ediyor.
      */
     topbar?: ReactNode;
+    /**
+     * A strip above the whole shell, the rail and the top bar included: an account-wide condition
+     * the product will not let the reader overlook (an unverified address, a lapsed payment). The
+     * content and its tone are the caller's; the shell gives it the full width and keeps the screen
+     * one viewport tall. One strip, never a stack. TR: Kabuğun tamamının, ray ve üst şerit dahil,
+     * üstünde bir şerit: ürünün gözden kaçmasına izin vermediği hesap çapında bir durum (doğrulanmamış
+     * adres, aksamış ödeme). İçerik ve tonu çağıranın; kabuk ona tam genişliği veriyor ve ekranı tek
+     * görüntü boyunda tutuyor. Tek şerit, asla yığın.
+     */
+    banner?: ReactNode;
     /** A control at the foot of the rail: an expand/collapse button, say. TR: Rayın dibine giren kontrol: genişlet/daralt düğmesi gibi. */
     railFooter?: ReactNode;
     /**
@@ -104,5 +114,5 @@ export type AppShellProps = {
     };
     children: ReactNode;
 };
-export declare function AppShell({ brand, nav, activePath, rail, topbar, railFooter, mainClassName, linkComponent: Link, collapsibleSections, collapsedSections, onSectionToggle, labels, children, }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ brand, nav, activePath, rail, topbar, banner, railFooter, mainClassName, linkComponent: Link, collapsibleSections, collapsedSections, onSectionToggle, labels, children, }: AppShellProps): import("react").JSX.Element;
 //# sourceMappingURL=app-shell.d.ts.map

package/dist/patterns/app-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../src/patterns/app-shell.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAI7C,OAAO,EAAa,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAAG;IACrB;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wKAAwK;IACxK,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,wJAAwJ;IACxJ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,EAAE,SAAS,QAAQ,EAAE,CAAC;IACzB,mGAAmG;IACnG,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,uIAAuI;IACvI,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,sHAAsH;IACtH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,GAAG,EACH,UAAU,EACV,IAAe,EACf,MAAM,EACN,UAAU,EACV,aAAa,EACb,aAAa,EAAE,IAAgB,EAC/B,mBAA0B,EAC1B,iBAAiB,EACjB,eAAe,EACf,MAAM,EACN,QAAQ,GACT,EAAE,aAAa,+BA+Kf"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../src/patterns/app-shell.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAI7C,OAAO,EAAa,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAAG;IACrB;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wKAAwK;IACxK,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,wJAAwJ;IACxJ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,EAAE,SAAS,QAAQ,EAAE,CAAC;IACzB,mGAAmG;IACnG,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,uIAAuI;IACvI,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,sHAAsH;IACtH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,GAAG,EACH,UAAU,EACV,IAAe,EACf,MAAM,EACN,MAAM,EACN,UAAU,EACV,aAAa,EACb,aAAa,EAAE,IAAgB,EAC/B,mBAA0B,EAC1B,iBAAiB,EACjB,eAAe,EACf,MAAM,EACN,QAAQ,GACT,EAAE,aAAa,+BAoLf"}

package/dist/patterns/app-shell.js

@@ -6,7 +6,7 @@ import { CaretDown } from "../components/icons.js";
 import { RailLink } from "../components/rail-link.js";
 import { cn } from "../lib/cn.js";
 import { PlainLink } from "./shared.js";
-export function AppShell({ brand, nav, activePath, rail = "narrow", topbar, railFooter, mainClassName, linkComponent: Link = PlainLink, collapsibleSections = true, collapsedSections, onSectionToggle, labels, children, }) {
+export function AppShell({ brand, nav, activePath, rail = "narrow", topbar, banner, railFooter, mainClassName, linkComponent: Link = PlainLink, collapsibleSections = true, collapsedSections, onSectionToggle, labels, children, }) {
     /* Bir giriş kendi alt ağacına sahip, ve EN UZUN EŞLEŞEN KAZANIR: kökün `/`
        olmadığı bir panelde kök giriş altındaki her rotayı yutuyordu.
        Gerekçe: docs/gerekce/08-blok-ve-sablon.md */
@@ -45,10 +45,10 @@ export function AppShell({ brand, nav, activePath, rail = "narrow", topbar, rail
             gruplar.push({ bolum: entry.section, girisler: [entry] });
     }
     const kimlik = useId();
-    return (_jsxs("div", { className: "flex h-dvh w-full overflow-hidden bg-rail text-ink-soft", children: [_jsxs("aside", { className: `flex shrink-0 flex-col gap-2 bg-rail py-4 ${wide ? "w-60 px-3" : "w-20 items-center px-1"}`, "data-rail": rail, children: [brand ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": labels.home, className: `mb-2 flex h-10 shrink-0 items-center text-ink ${wide ? "px-2" : "w-10 justify-center"}`, children: brand }), _jsx("span", { className: `h-0 w-6 border-t border-line ${wide ? "ml-2" : ""}` })] })) : null, _jsx("nav", { "aria-label": labels.primaryNav, className: `tamga-rail-scroll flex w-full flex-1 flex-col gap-2 py-1 ${wide ? "" : "items-center"}`, children: gruplar.map((grup, gi) => {
-                            const id = `${kimlik}-${gi}`;
-                            const acik = grup.bolum ? acikMi(grup.bolum) : true;
-                            const kilitli = grup.bolum !== undefined && grup.bolum === aktifBolum;
-                            return (_jsxs(Fragment, { children: [grup.bolum ? (wide ? (collapsibleSections ? (_jsxs("button", { type: "button", className: cn("tamga-rail-section", gi > 0 && "mt-3"), "aria-expanded": acik, "aria-controls": id, "aria-disabled": kilitli || undefined, "data-locked": kilitli || undefined, onClick: () => degistir(grup.bolum), children: [grup.bolum, _jsx(Icon, { icon: CaretDown, size: "xs", weight: "bold", className: "tamga-rail-section-caret" })] })) : (_jsx("p", { className: `px-2.5 text-caption font-bold uppercase tracking-label text-ink-faint ${gi > 0 ? "mt-5 pb-1.5" : "pb-1.5"}`, children: grup.bolum }))) : gi > 0 ? (_jsx("span", { className: "my-1.5 h-0 w-6 shrink-0 border-t border-line", "aria-hidden": true })) : null) : null, _jsx("div", { id: id, className: "tamga-rail-group-body", "data-open": acik, inert: !acik, children: _jsx("div", { className: wide ? undefined : "items-center", children: grup.girisler.map((entry) => (_jsx(RailLink, { href: entry.href, onClick: entry.onSelect, label: entry.label, active: isCurrent(entry), showLabel: wide, linkComponent: Link, "data-nav": entry.key, children: _jsx(Icon, { icon: entry.icon, size: "md", weight: isCurrent(entry) ? "fill" : "regular" }) }, entry.key))) }) })] }, grup.bolum ?? `_${gi}`));
-                        }) }), railFooter ? _jsx("div", { className: "shrink-0", children: railFooter }) : null] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("header", { className: "tamga-gutter flex items-center gap-4 bg-band py-4", children: topbar }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden pr-4 pb-4", children: _jsx("main", { className: cn("tamga-surface tamga-app-main relative h-full min-h-0 overflow-y-auto", mainClassName), children: children }) })] })] }));
+    return (_jsxs("div", { className: "flex h-dvh w-full flex-col overflow-hidden bg-rail text-ink-soft", children: [banner ? _jsx("div", { className: "tamga-app-banner", children: banner }) : null, _jsxs("div", { className: "flex min-h-0 w-full flex-1", children: [_jsxs("aside", { className: `flex shrink-0 flex-col gap-2 bg-rail py-4 ${wide ? "w-60 px-3" : "w-20 items-center px-1"}`, "data-rail": rail, children: [brand ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": labels.home, className: `mb-2 flex h-10 shrink-0 items-center text-ink ${wide ? "px-2" : "w-10 justify-center"}`, children: brand }), _jsx("span", { className: `h-0 w-6 border-t border-line ${wide ? "ml-2" : ""}` })] })) : null, _jsx("nav", { "aria-label": labels.primaryNav, className: `tamga-rail-scroll flex w-full flex-1 flex-col gap-2 py-1 ${wide ? "" : "items-center"}`, children: gruplar.map((grup, gi) => {
+                                    const id = `${kimlik}-${gi}`;
+                                    const acik = grup.bolum ? acikMi(grup.bolum) : true;
+                                    const kilitli = grup.bolum !== undefined && grup.bolum === aktifBolum;
+                                    return (_jsxs(Fragment, { children: [grup.bolum ? (wide ? (collapsibleSections ? (_jsxs("button", { type: "button", className: cn("tamga-rail-section", gi > 0 && "mt-3"), "aria-expanded": acik, "aria-controls": id, "aria-disabled": kilitli || undefined, "data-locked": kilitli || undefined, onClick: () => degistir(grup.bolum), children: [grup.bolum, _jsx(Icon, { icon: CaretDown, size: "xs", weight: "bold", className: "tamga-rail-section-caret" })] })) : (_jsx("p", { className: `px-2.5 text-caption font-bold uppercase tracking-label text-ink-faint ${gi > 0 ? "mt-5 pb-1.5" : "pb-1.5"}`, children: grup.bolum }))) : gi > 0 ? (_jsx("span", { className: "my-1.5 h-0 w-6 shrink-0 border-t border-line", "aria-hidden": true })) : null) : null, _jsx("div", { id: id, className: "tamga-rail-group-body", "data-open": acik, inert: !acik, children: _jsx("div", { className: wide ? undefined : "items-center", children: grup.girisler.map((entry) => (_jsx(RailLink, { href: entry.href, onClick: entry.onSelect, label: entry.label, active: isCurrent(entry), showLabel: wide, linkComponent: Link, "data-nav": entry.key, children: _jsx(Icon, { icon: entry.icon, size: "md", weight: isCurrent(entry) ? "fill" : "regular" }) }, entry.key))) }) })] }, grup.bolum ?? `_${gi}`));
+                                }) }), railFooter ? _jsx("div", { className: "shrink-0", children: railFooter }) : null] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("header", { className: "tamga-gutter flex items-center gap-4 bg-band py-4", children: topbar }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden pr-4 pb-4", children: _jsx("main", { className: cn("tamga-surface tamga-app-main relative h-full min-h-0 overflow-y-auto", mainClassName), children: children }) })] })] })] }));
 }

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tamga-ui 0.14.1 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.15.0 · 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.14.1 · MIT · https://tamga.org.tr */
+/*! tamga-ui 0.15.0 · MIT · https://tamga.org.tr */
 @custom-variant dark (&:is(.dark *));
 
 @theme static {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tamga-ui",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "description": "Mantıksal's shared interface library: tokens, physics and components.",
   "license": "MIT",
   "type": "module",