@ahmetilhn/hanui 1.2.0 → 2.0.1

package/build/index.d.ts

@@ -7,10 +7,14 @@ import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
 import { JSX } from 'react';
+import { KeyboardEvent as KeyboardEvent_2 } from 'react';
 import { MemoExoticComponent } from 'react';
+import { NamedExoticComponent } from 'react';
+import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { RefAttributes } from 'react';
+import { RefObject } from 'react';
 import { TableHTMLAttributes } from 'react';
 import { TextareaHTMLAttributes } from 'react';
 
@@ -20,6 +24,51 @@ export declare const ABOVE_MOBILE_MEDIA_QUERY = "(min-width: 641px)";
 /** Kenar çubuğu ekranda olduğu için filtre paneli bu ölçünün üstünde gizlenir. */
 export declare const ABOVE_TABLET_MEDIA_QUERY = "(min-width: 1025px)";
 
+export declare const Accordion: typeof Accordion_2;
+
+/**
+ * Akordeon — katlanabilir bölümler.
+ *
+ * <h3>Yerel `<details>` / `<summary>` üzerine</h3>
+ * Açık/kapalı durumu, klavye desteği (`Enter` ve `Space`), ekran okuyucu
+ * duyurusu ("genişletildi/daraltıldı") ve <strong>sayfa içi bulma</strong>
+ * tarayıcıdan gelir. Sonuncusu taklit bir uygulamada imkânsız: Ctrl+F ile
+ * aranan bir metin kapalı bir `<details>`in içindeyse tarayıcı bölümü kendisi
+ * açıyor; `display: none` ile gizlenmiş bir `<div>`de o metin hiç yok.
+ *
+ * <p>Bedeli, tek-açık kipin elle kurulması: `<details name="…">` bunu yerel
+ * olarak veriyor ama Safari 17.2 öncesinde yok ve orada TÜM bölümler
+ * birbirinden bağımsız açılıyordu — sessiz bir davranış farkı. Karar burada
+ * veriliyor, tarayıcıya bırakılmıyor.
+ *
+ * <h3>Yükseklik geçişi</h3>
+ * `interpolate-size: allow-keywords` + `height` geçişi ile `auto`ya
+ * canlandırılıyor. Desteklemeyen tarayıcıda geçiş düşer ve bölüm ANINDA
+ * açılır — eski davranış. Sabit bir piksel yüksekliği vermek ya da
+ * `max-height` numarası kullanmak yanlış: ilki içeriği kırpıyor, ikincisi
+ * kısa bölümlerde gözle görülür bir gecikme bırakıyordu.
+ *
+ * <h3>Klavye (yerel)</h3>
+ * <table>
+ *   <tr><td>`Enter` / `Space`</td><td>bölümü açar/kapatır</td></tr>
+ *   <tr><td>`Tab`</td><td>başlıklar arasında gezinir</td></tr>
+ * </table>
+ * Ok tuşu YOKTUR ve olmamalı: akordeon bir liste değil, her başlık bağımsız
+ * bir düğme (WAI-ARIA APG accordion deseni ok tuşlarını isteğe bağlı bırakıyor
+ * ve yerel öğe onları getirmiyor).
+ */
+declare const Accordion_2: FC<Props_35>;
+
+export declare type AccordionItem = {
+    id: string;
+    /** Başlık satırı — tıklanabilir olan bu. */
+    title: ReactNode;
+    /** Başlığın sağında duran ikincil bilgi (sayaç, rozet). */
+    meta?: ReactNode;
+    content: ReactNode;
+    isDisabled?: boolean;
+};
+
 export declare const Alert: typeof Alert_2;
 
 /**
@@ -29,10 +78,13 @@ export declare const Alert: typeof Alert_2;
  * anında duyurur. `info` ve `success` duyurulmaz — sayfa yüklenirken her bilgi
  * kutusunun okunması gürültü olurdu.
  */
-declare const Alert_2: FC<Props_12>;
+declare const Alert_2: FC<Props_17>;
 
 export declare type AlertTone = 'info' | 'success' | 'warning' | 'danger';
 
+/** Duyurunun aciliyeti. */
+export declare type AnnouncePoliteness = 'polite' | 'assertive';
+
 export declare const Avatar: typeof Avatar_2;
 
 /**
@@ -49,7 +101,7 @@ export declare const Avatar: typeof Avatar_2;
  * okumak "A İ Ahmet İlhan" gibi bir gürültü üretiyordu. Adın yanında
  * durmadığı bir yerde kullanılıyorsa çağıran taraf metni kendisi yazar.
  */
-declare const Avatar_2: FC<Props_13>;
+declare const Avatar_2: FC<Props_18>;
 
 export declare const Badge: typeof Badge_2;
 
@@ -70,7 +122,7 @@ export declare const Badge: typeof Badge_2;
  * `link`) anlamlı: onlar bir durumu değil bir sayıyı bildirir ve tıklanabilir
  * bir öğenin parçasıdır.
  */
-declare const Badge_2: FC<Props_14>;
+declare const Badge_2: FC<Props_19>;
 
 export declare type BadgeTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info'
 /** Birincil sınıflandırma tinti (mavi-lacivert aile). */
@@ -150,11 +202,21 @@ declare type BaseProps_4 = {
     previousLabel?: string;
     /** Verilmezse `labels.pagination.next`. */
     nextLabel?: string;
+    /**
+     * Sayfa değiştiğinde ekran okuyucuya duyurulacak metin
+     * ("3. sayfa · 1.248 sonuç").
+     *
+     * <p>Verilmediğinde duyuru YAPILMAZ. Görsel tarafta sayfa numarası
+     * `aria-current` ile zaten işaretli ama o yalnızca ODAK oraya geldiğinde
+     * okunuyor: bağlantıya basıp listenin başına dönen kullanıcı, kaçıncı
+     * sayfada olduğunu ve kaç sonuç kaldığını hiç duymuyordu.
+     */
+    formatAnnouncement?: (page: number, totalPages: number) => string;
     className?: string;
     testId?: string;
 };
 
-export declare const BottomSheet: MemoExoticComponent<({ title, closeLabel, onClose, children, toolbar, footer, closeAbove, className, testId, }: Props_28) => ReactPortal | null>;
+export declare const BottomSheet: MemoExoticComponent<({ title, closeLabel, onClose, children, toolbar, footer, closeAbove, className, testId, }: Props_40) => ReactPortal | null>;
 
 export declare const Breadcrumb: typeof Breadcrumb_2;
 
@@ -167,7 +229,7 @@ export declare const Breadcrumb: typeof Breadcrumb_2;
  * <p>Ayırıcı ikon `aria-hidden`; ekran okuyucu liste yapısından hiyerarşiyi
  * zaten anlar.
  */
-declare const Breadcrumb_2: FC<Props_15>;
+declare const Breadcrumb_2: FC<Props_20>;
 
 /**
  * Yapılandırmayı CSS metnine çevirir.
@@ -338,6 +400,42 @@ declare type CardSectionProps = {
     className?: string;
 };
 
+export declare const Carousel: typeof Carousel_2;
+
+/**
+ * Kaydırılabilir şerit (carousel).
+ *
+ * <h3>OTOMATİK OYNATMA YOK — ve olmayacak</h3>
+ * Kendiliğinden ilerleyen bir şerit WCAG 2.2.2'yi ihlal ediyor (beş saniyeden
+ * uzun süren hareket duraklatılabilmeli) ama asıl sorun daha basit: kullanıcı
+ * okumaya başladığı kartı kaybediyor. Bir prop olarak bile eklenmedi —
+ * eklenseydi kullanılırdı.
+ *
+ * <h3>Kaydırma YEREL, JavaScript değil</h3>
+ * Şerit `overflow-x: auto` + `scroll-snap`: dokunmatikte parmakla kaydırma,
+ * masaüstünde shift+tekerlek ve <strong>klavyeyle ok tuşları</strong>
+ * tarayıcıdan geliyor. JavaScript ile `transform` kaydıran bir uygulama
+ * bunların hiçbirini getirmiyor ve kaydırma çubuğunu da götürüyor — kullanıcı
+ * şeridin devam ettiğini göremiyordu.
+ *
+ * <p>Düğmeler `scrollBy` çağırıyor: yerel kaydırmayı DEĞİŞTİRMİYOR,
+ * tetikliyor. İkisi aynı durumu paylaşıyor ve ayrışmaları imkânsız.
+ *
+ * <h3>Şerit klavyeyle ULAŞILABİLİR</h3>
+ * Kaydırılabilir bir kutu, içinde odaklanabilir öğe yoksa `tabindex`
+ * verilmediğinde klavye kullanıcısı için ulaşılamaz (WCAG 2.1.1). Şerit
+ * genellikle bağlantı taşıyan kartlardan oluşuyor ve o durumda ek bir durak
+ * gereksiz — bu yüzden `tabindex` yalnızca <strong>odaklanabilir çocuk
+ * yoksa</strong> yazılıyor.
+ *
+ * <h3>Klavye</h3>
+ * <table>
+ *   <tr><td>`Tab`</td><td>önceki/sonraki düğmelerine ve kartların içine</td></tr>
+ *   <tr><td>ok tuşları</td><td>şeridi kaydırır (yerel)</td></tr>
+ * </table>
+ */
+declare const Carousel_2: FC<Props_21>;
+
 export declare const Checkbox: typeof Checkbox_2;
 
 /**
@@ -428,8 +526,18 @@ export declare const ChipGroup: typeof ChipGroup_2;
  * Radyo grubunda Tab tuşu <strong>gruba</strong> girer, seçenekler arasında ok
  * tuşlarıyla gezilir. Her çipin ayrı ayrı Tab durağı olması, 7 seçenekli bir
  * filtrede klavye kullanıcısını 7 kez Tab'lamaya zorluyordu.
+ *
+ * <h3>Klavye</h3>
+ * <table>
+ *   <tr><td>`ArrowRight` / `ArrowDown`</td><td>sonraki seçenek; uçlarda DÖNER</td></tr>
+ *   <tr><td>`ArrowLeft` / `ArrowUp`</td><td>önceki seçenek</td></tr>
+ * </table>
+ * ÇOKLU seçimde ok tuşu YOKTUR: orada her çip bağımsız bir onay kutusu ve
+ * `Tab` ile gezilir — ok tuşuyla gezinmek seçimi de değiştirirdi, oysa
+ * radyo grubunun aksine burada gezinmek seçmek demek değil. Nöbetçi:
+ * `components/__tests__/keyboard.test.tsx`.
  */
-declare const ChipGroup_2: <T extends string>({ options, label, size, isScrollable, className, ...selection }: Props_4<T>) => JSX.Element;
+declare const ChipGroup_2: <T extends string>({ options, label, size, isScrollable, className, ...selection }: Props_6<T>) => JSX.Element;
 
 export declare type ChipOption<T extends string = string> = {
     value: T;
@@ -441,6 +549,22 @@ export declare type ChipOption<T extends string = string> = {
 
 export declare type ChipSize = 'sm' | 'md';
 
+declare type CircleProps = {
+    /** Tamamlanan miktar. `undefined` → BELİRSİZ; çember döner. */
+    value?: number;
+    max?: number;
+    /** Erişilebilir ad. ZORUNLU. */
+    label: string;
+    valueText?: string;
+    /** Yüzdeyi çemberin ortasına yazar. */
+    isValueVisible?: boolean;
+    tone?: 'brand' | 'success' | 'warning' | 'danger';
+    /** Dış çap (px). */
+    size?: number;
+    className?: string;
+    testId?: string;
+};
+
 export declare const Combobox: typeof Combobox_2;
 
 /**
@@ -480,8 +604,19 @@ export declare const Combobox: typeof Combobox_2;
  * `role="combobox"` + `aria-activedescendant`. Masaüstünde odak arama
  * kutusundan ayrılmaz; ok tuşları yalnızca <em>etkin</em> seçeneği değiştirir.
  * Odağı seçeneklere taşımak, yazmaya devam etmeyi imkânsız kılıyordu.
+ *
+ * <h3>Klavye (APG: combobox with listbox popup)</h3>
+ * <table>
+ *   <tr><td>`ArrowDown` / `ArrowUp`</td><td>etkin seçenek bir alt/üst; uçlarda DÖNER</td></tr>
+ *   <tr><td>`Home` / `End`</td><td>ilk / son seçenek</td></tr>
+ *   <tr><td>`Enter`</td><td>etkin seçeneği seçer, paneli kapatır</td></tr>
+ *   <tr><td>`Escape`</td><td>kapatır, odak tetikleyiciye döner</td></tr>
+ *   <tr><td>`Tab`</td><td>kapatır, gezinme sürer</td></tr>
+ *   <tr><td>yazmak</td><td>filtreler ve etkin seçeneği başa çeker</td></tr>
+ * </table>
+ * Nöbetçi: `components/__tests__/keyboard.test.tsx`.
  */
-declare const Combobox_2: <T extends string>({ options, value, onChange, labels, isSearchHidden, onSearch, isLoading, isDisabled, isClearable, icon, id, className, testId, "aria-describedby": describedBy, "aria-invalid": isInvalid, }: Props_5<T>) => JSX.Element;
+declare const Combobox_2: <T extends string>({ options, value, onChange, labels, isSearchHidden, onSearch, isLoading, isDisabled, isClearable, icon, id, className, testId, "aria-describedby": describedBy, "aria-invalid": isInvalid, }: Props_7<T>) => JSX.Element;
 
 /**
  * Bileşenin çizdiği metinler.
@@ -514,6 +649,55 @@ export declare type ComboboxOption<T extends string = string> = {
     isDisabled?: boolean;
 };
 
+export declare type CommandItem = {
+    id: string;
+    label: string;
+    /** Ayırt edici ikincil satır — bir komutun nereye götürdüğü. */
+    description?: string;
+    /** Gruplama başlığı ("Gezinme", "Eylemler"). Aynı grup ardışık çizilir. */
+    group?: string;
+    icon?: ReactNode;
+    /** Kısayol ipucu ("⌘K"). Yalnızca GÖSTERİLİR; tuşu çağıran bağlar. */
+    shortcut?: string;
+    onSelect: () => void;
+};
+
+export declare const CommandPalette: typeof CommandPalette_2;
+
+/**
+ * Komut paleti — klavyeyle her şeye ulaşma.
+ *
+ * <h3>Neden `Combobox` + `Modal` bileşimi DEĞİL de ayrı bir bileşen</h3>
+ * Denendi ve iki yerde kırıldı. `Combobox` bir DEĞER seçtiriyor: seçim
+ * tetikleyicide kalıcı olarak görünüyor, `value`/`onChange` sözleşmesi var ve
+ * kapanınca seçili öğe hatırlanıyor. Palet ise bir EYLEM çalıştırıyor —
+ * hatırlanacak bir değer yok. İkincisi, `Combobox`ın tetikleyicisi var;
+ * palette tetikleyici KLAVYE KISAYOLU ve o kısayolu bağlamak çağıranın işi
+ * (hangi tuş, hangi sayfada — kütüphane bilemez).
+ *
+ * <h3>Kısayolu KÜTÜPHANE bağlamaz</h3>
+ * `⌘K` yaygın ama evrensel değil ve belge düzeyinde bir tuş dinleyicisi
+ * kurmak, tüketicinin kendi kısayollarıyla sessizce çakışmak demek. `shortcut`
+ * alanı yalnızca GÖSTERİLİYOR; `isOpen` çağıranın.
+ *
+ * <h3>Arama `matchesSearch` ile — aksan duyarsız</h3>
+ * "siparis" yazan kullanıcı "Sipariş"i bulmalı. Aynı normalizasyon
+ * `Combobox`ın yerel filtresinde de kullanılıyor; iki yerde iki farklı arama
+ * kuralı, aynı terimin iki farklı sonuç vermesi demekti.
+ *
+ * <h3>Klavye</h3>
+ * <table>
+ *   <tr><td>`ArrowDown` / `ArrowUp`</td><td>etkin komut; uçlarda DÖNER</td></tr>
+ *   <tr><td>`Home` / `End`</td><td>ilk / son komut</td></tr>
+ *   <tr><td>`Enter`</td><td>etkin komutu çalıştırır ve kapatır</td></tr>
+ *   <tr><td>`Escape`</td><td>kapatır, odak AÇAN öğeye döner</td></tr>
+ * </table>
+ * Odak arama kutusundan AYRILMAZ; etkin komut `aria-activedescendant` ile
+ * bildiriliyor. Odağı listeye taşımak yazmaya devam etmeyi imkânsız
+ * kılıyordu.
+ */
+declare const CommandPalette_2: ({ isOpen, onClose, items, label, searchPlaceholder, emptyMessage, className, testId, }: Props_42) => JSX.Element;
+
 /**
  * Her bileşenin kabul ettiği ortak kanca noktaları.
  *
@@ -528,6 +712,41 @@ export declare type CommonElementProps = Partial<{
     testId: string;
 }>;
 
+/**
+ * YOĞUN (compact) KİP — `<html data-hanui-density="compact">`.
+ *
+ * <h3>Gerekçe ölçülü</h3>
+ * Aynı bileşenleri iki uygulama kullanıyor: vitrin bir ekranda 8 satır,
+ * operasyon paneli 80 satır gösteriyor. Vitrin için doğru olan ferahlık,
+ * panelde kullanıcıyı kaydırmaya mahkûm ediyor; panel için doğru olan
+ * sıkılık vitrinde ucuz duruyor. İkisini tek ölçekle karşılamanın yolu yok.
+ *
+ * <h3>Yalnızca boşluk ve punto iner — ÖLÇEĞİN TAMAMI DEĞİL</h3>
+ * `space-0` ve `space-1` sabit kalır: 4 px'in altına inen bir boşluk kademesi
+ * bir boşluk değil bir çizim hatası. Yarıçap da sabit kalır — yuvarlaklık
+ * yoğunluğun değil markanın işi.
+ *
+ * <h3>DOKUNMA HEDEFİ KÜÇÜLMEZ</h3>
+ * `tap-target` görünmez bir örtü çiziyor ve ölçüsü (44 px) buraya girmiyor:
+ * yoğun kip bilgi yoğunluğunu artırmak içindir, dokunulabilirliği düşürmek
+ * için değil (WCAG 2.5.8). Görsel kutu küçülür, hedef küçülmez.
+ */
+export declare const COMPACT_DENSITY: {
+    readonly 'space-2': "6px";
+    readonly 'space-3': "8px";
+    readonly 'space-4': "12px";
+    readonly 'space-5': "16px";
+    readonly 'space-6': "24px";
+    readonly 'space-7': "32px";
+    readonly 'font-size-2xs': "11px";
+    readonly 'font-size-xs': "12px";
+    readonly 'font-size-sm': "13px";
+    readonly 'font-size-base': "15px";
+    readonly 'font-size-body': "16px";
+    readonly 'leading-normal': "1.5";
+    readonly 'leading-relaxed': "1.6";
+};
+
 export declare const ConfirmDialog: typeof ConfirmDialog_2;
 
 /**
@@ -569,7 +788,7 @@ export declare const ConfirmDialog: typeof ConfirmDialog_2;
  *   }}
  * />
  */
-declare const ConfirmDialog_2: FC<Props_30>;
+declare const ConfirmDialog_2: FC<Props_43>;
 
 export declare type ConfirmKind = 'destructive' | 'warning' | 'neutral';
 
@@ -601,7 +820,7 @@ export declare const CopyField: typeof CopyField_2;
  * kendisi kopyalayabilir. Sessizce hiçbir şey yapmamak, düğmeyi bozuk
  * gösteriyordu.
  */
-declare const CopyField_2: FC<Props_16>;
+declare const CopyField_2: FC<Props_22>;
 
 export declare type Crumb = {
     label: string;
@@ -634,8 +853,17 @@ export declare const DataTable: typeof DataTable_2;
  * <h3>Durum öncelik sırası</h3>
  * `error` &gt; `isLoading` &gt; boş &gt; satırlar. Hata varken yükleme veya boş
  * mesajı gösterilmez; yüklenirken bayat satır çizilmez.
+ *
+ * <h3>Görünmez başlık `aria-label` DEĞİL, gizlenmiş METİN</h3>
+ * Eylem sütununun adı önce `<th aria-label="Eylemler">` olarak yazılıyordu.
+ * Eksen taraması bunu ihlal olarak bildirdi (`empty-table-header`) ve haklı:
+ * `aria-label`ın hücre başlığı olarak kullanılması destek teknolojilerinde
+ * tutarsız — bazı ekran okuyucular tablo gezinme kipinde sütun adını
+ * hücrenin İÇERİĞİNDEN okur ve boş bir `<th>` orada adsız kalır. Görsel olarak
+ * gizlenmiş gerçek bir metin düğümü hem okunur hem de sayfa çevirisine,
+ * bulma-değiştirmeye ve seçime dahil olur.
  */
-declare const DataTable_2: FC<Props_33>;
+declare const DataTable_2: FC<Props_47>;
 
 export declare type DataTableColumn = {
     /** Sütun kimliği (React key). */
@@ -645,18 +873,89 @@ export declare type DataTableColumn = {
     /**
      * Görsel başlığı olmayan sütunun erişilebilir adı (eylem sütunu gibi).
      * Boş bir `<th>` ekran okuyucuda adsız bir sütun bırakıyordu.
+     *
+     * <p>Metin `aria-label` OLARAK DEĞİL, görsel olarak gizlenmiş gerçek bir
+     * metin düğümü olarak yazılır — gerekçe {@link DataTable} JSDoc'unda.
      */
     srLabel?: string;
     /**
-     * Sıralanabilir sütunun yönü (`aria-sort`). Sıralama düğmesi `label` içinde
-     * yaşar; yön bilgisi ekran okuyucu için başlık hücresine yazılır.
+     * Sıralanabilir sütunun yönü (`aria-sort`).
+     *
+     * <p>`onSort` ile birlikte verildiğinde başlık TIKLANABİLİR olur ve yön
+     * oku çizilir. Tek başına verildiğinde yalnızca durumu bildirir —
+     * sıralamayı başka bir denetim (bir `Select`) yapıyorsa doğrusu budur.
      */
     ariaSort?: 'ascending' | 'descending';
+    /**
+     * Sütun sıralanabilir. `DataTable.onSort` ile birlikte anlamlı; ikisinden
+     * biri eksikse başlık düz metin kalır — tıklanabilir görünüp hiçbir şey
+     * yapmayan bir başlık, kullanıcıya var olmayan bir yetenek vaat ediyordu.
+     */
+    isSortable?: boolean;
+    /**
+     * Sütun yatay kaydırmada YERİNDE kalır.
+     *
+     * <p>Yalnızca İLK sütunda anlamlı: geniş bir tabloda sağa kaydıran
+     * kullanıcı hangi satıra baktığını kaybediyordu. İkinci bir yapışkan sütun
+     * `left` ofsetinin elle hesaplanmasını gerektirir ve o hesap sütun
+     * genişliğine bağlı — desteklenmiyor.
+     */
+    isSticky?: boolean;
     className?: string;
 };
 
 export declare const DataTableRow: FC<RowProps>;
 
+export declare const DateField: typeof DateField_2;
+
+/**
+ * Tarih alanı — <strong>yerel</strong> `<input type="date">`.
+ *
+ * <h3>Neden taklit bir takvim YOK</h3>
+ * Bu kütüphanenin kuralı: yerel öğe korunur, taklit yazmanın tek gerekçesi
+ * ölçülmüş bir kusurdur ({@link Select} bunun tek istisnası ve gerekçesi
+ * orada yazılı). Tarih alanında böyle bir kusur YOK — tersine, yerel öğenin
+ * taklidin veremeyeceği dört şeyi var:
+ *
+ * <ul>
+ *   <li><b>Mobilde işletim sisteminin seçicisi.</b> iOS'ta tekerlek, Android'de
+ *       takvim — kullanıcının her gün kullandığı, alışkın olduğu arayüz. Hiçbir
+ *       web takvimi 360 px'lik bir ekranda ona yaklaşamıyor.</li>
+ *   <li><b>Klavyeyle YAZARAK giriş.</b> Doğum tarihini bilen biri "01.01.1980"i
+ *       üç saniyede yazıyor; taklit takvimde aynı iş kırk yıl geriye tıklamak
+ *       demek.</li>
+ *   <li><b>Yerel biçim.</b> Tarayıcı kullanıcının işletim sistemi ayarına göre
+ *       gg.aa.yyyy ya da mm/dd/yyyy gösteriyor; değer her zaman ISO
+ *       (`YYYY-MM-DD`) kalıyor. İki biçimi elle yönetmek, kütüphanenin
+ *       kullanıcının yerel ayarını TAHMİN etmesi demekti.</li>
+ *   <li><b>Ekran okuyucu.</b> Alan üç ayrı bölüm (gün/ay/yıl) olarak okunuyor
+ *       ve ok tuşlarıyla artırılıyor. APG'ye uygun bir takvim ızgarası bunu
+ *       ancak taklit edebilir.</li>
+ * </ul>
+ *
+ * <p>Bedeli: takvim açılışının görünüşü tarayıcıya ait ve tema token'larını
+ * izlemiyor. Kabul edildi — açılan panelin rengi, yukarıdaki dördünün
+ * yanında küçük bir bedel.
+ *
+ * <h3>`min` / `max` KULLANIN</h3>
+ * İkisi de yerel öğede var ve tarayıcı doğrulamayı kendisi yapıyor. Geçersiz
+ * bir tarihi yalnızca gönderimde yakalamak, kullanıcıyı formu doldurduktan
+ * sonra geri gönderiyordu.
+ */
+declare const DateField_2: ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+/** `date` (varsayılan) · `datetime-local` · `month` · `time`. */
+type?: "date" | "datetime-local" | "month" | "time";
+testId?: string;
+} & RefAttributes<HTMLInputElement>>;
+
+export declare const DateRange: MemoExoticComponent<({ value, onChange, startLabel, endLabel, separator, min, max, isSummaryVisible, isDisabled, className, testId, }: RangeProps) => JSX.Element>;
+
+export declare type DateRangeValue = {
+    /** ISO tarih (`YYYY-MM-DD`) ya da boş dize. */
+    start: string;
+    end: string;
+};
+
 /** Kütüphanenin varsayılan font yığınları — hepsi sistem fontlarına iner. */
 export declare const DEFAULT_FONTS: Required<HanuiFonts>;
 
@@ -764,7 +1063,41 @@ export declare const Divider: typeof Divider_2;
  * <p>Etiketli hâli `role="separator"` taşımaz: metin içerdiğinde ekran okuyucu
  * onu ayırıcı değil içerik olarak okumalı ("veya").
  */
-declare const Divider_2: FC<Props_17>;
+declare const Divider_2: FC<Props_23>;
+
+export declare const Drawer: typeof Drawer_2;
+
+/**
+ * Çekmece (drawer) — kenardan açılan kipsel panel.
+ *
+ * <h3>{@link BottomSheet} ile farkı: EKRAN, tercih değil</h3>
+ * İkisi de kipsel bir yan panel; ayrım hangi ekranda doğru olduklarında:
+ *
+ * <ul>
+ *   <li>`BottomSheet` DAR ekran içindir. Baş parmağın erişebildiği yer
+ *       ekranın dibi; kenardan gelen bir panel telefonda ekranın tamamını
+ *       kaplıyor ve "panel" olmaktan çıkıyor.</li>
+ *   <li><b>`Drawer` GENİŞ ekran içindir.</b> Filtre paneli ve ayrıntı
+ *       incelemesi sayfanın yanında durur; kullanıcı listeyi görmeye devam
+ *       eder. Aynı panel dipten gelseydi 1440 px'lik bir ekranda içeriğin
+ *       tamamını örtüyordu.</li>
+ * </ul>
+ *
+ * <h3>`isOpen` alır — ve bu {@link BottomSheet}ten bilinçli bir AYRILIK</h3>
+ * `BottomSheet` "açıkken çizilir, kapatmak için kaldırılır" sözleşmesini
+ * kullanıyor ve bunun bir bedeli var: React sökülen bir ağacı bekletmediği
+ * için <strong>çıkış animasyonu çizilemiyor</strong>, panel bir karede yok
+ * oluyor. Çekmece açık/kapalı durumu kendisi taşıyor; `<dialog>` kapanırken
+ * `@starting-style` + `allow-discrete` ile geri kayıyor.
+ *
+ * <h3>Klavye</h3>
+ * <table>
+ *   <tr><td>`Escape`</td><td>kapatır — üst üste açık panellerde YALNIZCA en üstteki</td></tr>
+ *   <tr><td>`Tab`</td><td>odak panelin içinde döner (tarayıcı: `showModal()`)</td></tr>
+ * </table>
+ * Açılışta odak kapatma düğmesine DEĞİL ilk anlamlı öğeye gider.
+ */
+declare const Drawer_2: ({ isOpen, onClose, title, closeLabel, children, side, size, footer, toolbar, className, testId, }: Props_44) => JSX.Element;
 
 export declare const EmptyState: typeof EmptyState_2;
 
@@ -776,11 +1109,17 @@ export declare const EmptyState: typeof EmptyState_2;
  * yapacağını bilmeli: aramayı temizle, filtreyi kaldır, listeye dön. `action`
  * isteğe bağlı ama çağıran taraf onu vermezse kullanıcı tıkanır.
  *
- * <p>Bir listenin BOŞ olması ile YÜKLENEMEMESİ ayrı durumlardır: ağ hatasında
- * bu bileşen çizilmez, hata kendi mesajıyla gösterilir. İkisini birleştirmek
- * kullanıcıya "kayıt kalmamış" dedirtiyordu.
+ * <h3>BOŞ ile YÜKLENEMEDİ ayrı durumlardır</h3>
+ * Ağ hatasını "kayıt kalmamış" diye okuyan kullanıcı yanlış karar veriyor.
+ * İkisi `tone` ile ayrılıyor: `error` farklı bir ton taşıyor ve
+ * `role="alert"` ile duyuruluyor, ama YERLEŞİM aynı — iki durum arasındaki
+ * geçiş sıçramıyor.
+ *
+ * <p>Ayrım önce bu bileşenin DIŞINDAYDI ("ağ hatasında çizilmez") ve sonucu
+ * şuydu: her çağıran kendi hata kutusunu yazıyor, kutular birbirinden farklı
+ * görünüyordu. Ayrım korunuyor, kararın yeri değişti.
  */
-declare const EmptyState_2: FC<Props_18>;
+declare const EmptyState_2: FC<Props_24>;
 
 export declare const Field: typeof Field_2;
 
@@ -808,7 +1147,7 @@ export declare const Field: typeof Field_2;
  * // `{...props}` yaymayan bileşenlerde (Combobox, Select) yalnızca `id`:
  * <Field label="Şehir">{props => <Combobox id={props.id} … />}</Field>
  */
-declare const Field_2: FC<Props_11>;
+declare const Field_2: FC<Props_15>;
 
 /** Girdiye yayılacak erişilebilirlik bağları. */
 export declare type FieldChildProps = {
@@ -828,6 +1167,39 @@ declare type FieldProps = {
     className?: string;
 };
 
+export declare const FileUpload: typeof FileUpload_2;
+
+/**
+ * Dosya yükleme — sürükle-bırak <strong>ve</strong> düğme.
+ *
+ * <h3>Yerel `<input type="file">` KORUNUR</h3>
+ * Görsel olarak gizlenir ama DOM'da kalır ve `<label>` ile alana bağlanır:
+ * klavyeyle `Tab` + `Enter`, ekran okuyucuda "dosya seç, düğme" duyurusu,
+ * işletim sisteminin dosya seçicisi ve mobilde kamera/galeri seçenekleri
+ * <em>bedava</em> gelir. `<div>` üzerine `onDrop` yazıp düğmeyi taklit etmek
+ * bunların hiçbirini getirmiyor — ve sürükle-bırak zaten <strong>tek başına
+ * erişilebilir değil</strong>: fare gerektiriyor (WCAG 2.5.7).
+ *
+ * <h3>Doğrulama BİLEŞENDE, ama yalnızca ÖLÇÜLEBİLİR olan</h3>
+ * Boyut sınırı burada uygulanıyor çünkü cevabı kesin ve anında verilebiliyor:
+ * aşan dosya `onSelect`e hiç ulaşmıyor, kullanıcı yüklemenin bitmesini
+ * beklemeden hatayı görüyor. Tür/içerik doğrulaması burada YAPILMIYOR —
+ * `accept` bir öneri, gerçek karar sunucunun ve istemcide "geçerli" demek
+ * yanlış bir söz olurdu.
+ *
+ * <h3>Sonuç DUYURULUYOR</h3>
+ * Dosya eklendiğinde ve reddedildiğinde `useAnnounce` ile ekran okuyucuya
+ * bildiriliyor. Listeye sessizce eklenen bir satır, görmeyen kullanıcı için
+ * hiç olmamış demekti.
+ *
+ * <h3>Klavye</h3>
+ * <table>
+ *   <tr><td>`Tab`</td><td>alana, sonra her dosyanın kaldırma düğmesine</td></tr>
+ *   <tr><td>`Enter` / `Space`</td><td>alanda: dosya seçiciyi açar</td></tr>
+ * </table>
+ */
+declare const FileUpload_2: ({ files, onSelect, onRemove, label, hint, accept, isMultiple, maxSize, removeLabel, dropLabel, sizeErrorText, isDisabled, error, children, className, testId, }: Props_16) => JSX.Element;
+
 export declare const FilterBar: typeof FilterBar_2;
 
 /**
@@ -847,7 +1219,7 @@ export declare const FilterBar: typeof FilterBar_2;
  * daraltılabilir kalır: alan tercihen 220px'tir ama sığmadığı yerde küçülür,
  * taşmaz.
  */
-declare const FilterBar_2: FC<Props_34>;
+declare const FilterBar_2: FC<Props_48>;
 
 /**
  * Şerit içindeki tek alanın genişlik sözleşmesi. İçine `Field` + girdi ya da
@@ -894,7 +1266,32 @@ export declare const FilterBarField: FC<FieldProps>;
 /** Sayı biçimlendiricileri: değere bağlı metinler dizeyle verilemez. */
 declare type Formatter<TArgs extends unknown[]> = (...args: TArgs) => string;
 
-/** Kullanıcının seçtiği tema. `system` işletim sistemi tercihini izler. */
+/**
+ * Kullanıcının SEÇİMİ. `system` = açık bir seçim yok, işletim sistemi tercihi
+ * izlenir (`prefers-color-scheme`).
+ *
+ * <h3>Bu tip neden sonradan eklendi</h3>
+ * `HanuiColorScheme`in JSDoc'u "`system` işletim sistemi tercihini izler"
+ * diyordu ama tipte `system` YOKTU — belge bir yeteneği anlatıyor, tip onu
+ * yasaklıyordu. İki çözüm vardı: cümleyi silmek ya da yeteneği gerçekten
+ * eklemek. İkincisi seçildi çünkü eksik olan gerçek bir davranıştı: üç
+ * durumlu tema anahtarı (Açık / Koyu / Sistem) yaygın bir kalıp ve kütüphane
+ * onu kuramıyordu — `system`e dönmenin yolu özniteliği ELLE silmekti ve bunu
+ * tüketicinin bilmesi gerekiyordu.
+ *
+ * <p>Ekleme KIRICI DEĞİL: `scheme` hâlâ çözülmüş değeri döndürüyor, yalnızca
+ * `preference` alanı ve `setScheme('system')` girişi eklendi.
+ */
+export declare type HanuiColorPreference = HanuiColorScheme | 'system';
+
+/**
+ * ÇÖZÜLMÜŞ tema — ekranda gerçekten hangisi çizili.
+ *
+ * <p>Burada `system` YOKTUR ve olamaz: `system` bir tercih, bir tema değil.
+ * Çözüldüğünde ya açık ya koyu olur ve bileşenlerin gördüğü şey o. İkisini tek
+ * tipte toplamak, `scheme === 'system'` yazan bir tüketiciye hangi renklerin
+ * çizildiğini hâlâ söylemiyordu.
+ */
 export declare type HanuiColorScheme = 'light' | 'dark';
 
 export declare type HanuiContextValue = {
@@ -916,6 +1313,15 @@ export declare type HanuiContextValue = {
     labels?: HanuiLabels;
 };
 
+/**
+ * Bilgi yoğunluğu. `default` vitrin, `compact` operasyon paneli.
+ *
+ * <p>Seçim `<html data-hanui-density>` ile taşınır — tıpkı tema gibi, ve aynı
+ * sebeple: bir ölçek kararı tek bir React ağacının değil BELGENİN kararıdır;
+ * portal ile gövdeye taşınan kip pencere de aynı yoğunlukta olmalı.
+ */
+export declare type HanuiDensity = 'default' | 'compact';
+
 /**
  * Yazı tipi ailesi sözleşmesi.
  *
@@ -1038,6 +1444,12 @@ export declare type HanuiLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
     [key: string]: unknown;
 };
 
+/** Ölçü ezmeleri. Kısmî verilebilir; verilmeyen her ölçü varsayılanında kalır. */
+export declare type HanuiMetrics = Partial<Record<HanuiMetricToken, string>>;
+
+/** Ölçü token adları — `METRIC_TOKENS`ten türetilir. */
+export declare type HanuiMetricToken = keyof typeof METRIC_TOKENS;
+
 /**
  * Kütüphane sağlayıcısı.
  *
@@ -1086,6 +1498,18 @@ export declare type HanuiThemeConfig = Partial<{
     light: HanuiThemeTokens;
     dark: HanuiThemeTokens;
     fonts: HanuiFonts;
+    /**
+     * Ölçü ezmeleri — yarıçap, boşluk, punto, süre.
+     *
+     * <p>Renk gibi tema başına DEĞİL tek blokta: bir markanın yuvarlaklığı açık
+     * temada 12 px, koyu temada 8 px olmaz. Ayrı verilebilseydi iki değerin
+     * ayrışması kaçınılmazdı ve fark yalnızca tema değiştirildiğinde
+     * görünürdü — yani neredeyse hiç.
+     *
+     * @example
+     * initHanui({ theme: { metrics: { 'radius-md': '2px', 'radius-lg': '4px' } } });
+     */
+    metrics: HanuiMetrics;
 }>;
 
 /** Bir temanın token → değer eşlemesi. Kısmî verilebilir; eksikler varsayılandan gelir. */
@@ -1094,6 +1518,12 @@ export declare type HanuiThemeTokens = Partial<Record<HanuiToken, string>>;
 /** Token adları — `LIGHT_THEME`den türetilir, elle listelenmez. */
 export declare type HanuiToken = keyof typeof LIGHT_THEME;
 
+declare type HubProps = {
+    /** Kapatma düğmelerinin erişilebilir adı. Verilmezse `labels.close`. */
+    closeLabel?: string;
+    className?: string;
+};
+
 export declare const IconButton: typeof IconButton_2;
 
 /**
@@ -1165,13 +1595,22 @@ export declare type IconButtonVariant = 'ghost' | 'outline' | 'solid' | 'cart' |
 export declare const initHanui: (options?: InitHanuiOptions) => void;
 
 export declare type InitHanuiOptions = Partial<{
-    /** Tema ezmeleri. Yalnızca değiştirilen token'lar verilir. */
+    /** Tema ve ölçü ezmeleri. Yalnızca değiştirilen token'lar verilir. */
     theme: HanuiThemeConfig;
     /**
      * Başlangıç şeması. Verilmezse `<html data-hanui-theme>` neyse o kalır;
      * o da yoksa sistem tercihi (`prefers-color-scheme`) devreye girer.
      */
     colorScheme: HanuiColorScheme;
+    /**
+     * Bilgi yoğunluğu. Verilmezse `<html data-hanui-density>` neyse o kalır;
+     * o da yoksa `default`.
+     *
+     * <p>Uygulama başına SABİT bir karar olduğunda (operasyon paneli her zaman
+     * `compact`) buradan verilir; kullanıcıya seçtiren bir uygulama özniteliği
+     * kendisi yazar.
+     */
+    density: HanuiDensity;
 }>;
 
 export declare const Input: typeof Input_2;
@@ -1213,7 +1652,7 @@ export declare const LIGHT_THEME: {
     readonly 'border-strong': "#c9d0da";
     readonly text: "#11151b";
     readonly 'text-2': "#5a6472";
-    readonly 'text-3': "#6b7583";
+    readonly 'text-3': "#626c7a";
     readonly graphite: "#1f2937";
     readonly 'graphite-2': "#2b3646";
     readonly 'graphite-3': "#3a4658";
@@ -1255,8 +1694,8 @@ export declare const LIGHT_THEME: {
     readonly 'sale-bg': "#e8f4eb";
     readonly 'sale-fg': "#1d6e31";
     readonly 'red-accent': "#dc2626";
-    readonly 'green-accent': "#34c759";
-    readonly 'green-accent-hover': "#2aae4b";
+    readonly 'green-accent': "#299d46";
+    readonly 'green-accent-hover': "#23883c";
     readonly 'on-green': "#06280f";
     readonly star: "#9a5f04";
     readonly 'danger-solid': "#dc2626";
@@ -1266,7 +1705,7 @@ export declare const LIGHT_THEME: {
     readonly 'nav-bg-2': "#eef0f4";
     readonly 'nav-fg': "#11151b";
     readonly 'nav-fg-2': "#5a6472";
-    readonly 'nav-fg-3': "#8a94a3";
+    readonly 'nav-fg-3': "#626c7a";
     readonly 'nav-line': "#e2e6ec";
     readonly 'nav-line-strong': "#c9d0da";
     readonly 'nav-hover': "#eef0f4";
@@ -1313,6 +1752,31 @@ declare type LinkProps = BaseProps_4 & {
     linkProps?: HanuiLinkExtraProps;
 };
 
+export declare type ListboxNavigation<T extends HTMLElement = HTMLElement> = {
+    activeIndex: number;
+    setActiveIndex: (index: number) => void;
+    /**
+     * Etkin seçeneği görünür alanda tutmak için LİSTEYE bağlanır.
+     *
+     * <p>Tip parametresi çağıran taraf için: `Select` bu referansı `<ul>`e
+     * veriyor ve panel açıldığında `focus()` çağırıyor. `HTMLElement`e sabitlense
+     * çağıran ikinci bir referans tutmak ve ikisini elle eşlemek zorunda kalırdı.
+     */
+    listRef: RefObject<T | null>;
+    handleKeyDown: (event: KeyboardEvent_2<HTMLElement>) => void;
+};
+
+export declare type ListboxNavigationOptions = {
+    /** Seçenek sayısı. Liste süzüldüğünde değişir. */
+    count: number;
+    isOpen: boolean;
+    /** Açılışta etkin olacak dizin — genellikle seçili olan. */
+    initialIndex?: number;
+    /** `Enter` / `Space` ile seçildiğinde. */
+    onSelect: (index: number) => void;
+    onClose: () => void;
+};
+
 /**
  * Aranan metin, hedefin içinde geçiyor mu?
  *
@@ -1322,6 +1786,134 @@ declare type LinkProps = BaseProps_4 & {
  */
 export declare const matchesSearch: (haystack: string, needle: string) => boolean;
 
+export declare const Menu: typeof Menu_2;
+
+/**
+ * Menü — bir listeden EYLEM seçme.
+ *
+ * <h3>{@link Select} ile farkı: seçim mi eylem mi</h3>
+ * Görsel olarak benzerler; ayrım seçilen şeyin ne olduğunda:
+ *
+ * <ul>
+ *   <li>`Select` bir DEĞER seçer. Seçim kalıcıdır, tetikleyicide görünür ve
+ *       geri alınabilir. ARIA rolü `listbox`.</li>
+ *   <li><b>`Menu` bir EYLEM çalıştırır.</b> "Sil", "Kopyala", "Dışa aktar".
+ *       Seçilen şey hatırlanmaz; menü kapanır ve iş yapılır. ARIA rolü
+ *       `menu`.</li>
+ * </ul>
+ *
+ * <p>Ayrım ekran okuyucuda duyuluyor: `listbox` "3 seçenekten 2.'si seçili"
+ * der, `menu` "menü, 3 öğe" der. Eylem listesini `listbox` olarak sunmak,
+ * kullanıcıya kalıcı bir seçim yaptığını söylüyordu.
+ *
+ * <h3>Odak GERÇEKTEN taşınır</h3>
+ * `Select` odağı tetikleyicide tutup etkin seçeneği `aria-activedescendant`
+ * ile bildiriyor; menüde bu YANLIŞ olurdu. APG menü deseni gerçek odak
+ * istiyor çünkü menü öğeleri düğme gibi davranıyor — ve harfe atlama
+ * (type-ahead) yalnızca odaklanmış bir öğe üzerinde anlamlı.
+ *
+ * <h3>Klavye (APG: menu button)</h3>
+ * <table>
+ *   <tr><td>`Enter` / `Space` / `ArrowDown`</td><td>tetikleyicide: açar, İLK öğeye odaklanır</td></tr>
+ *   <tr><td>`ArrowUp`</td><td>tetikleyicide: açar, SON öğeye odaklanır</td></tr>
+ *   <tr><td>`ArrowDown` / `ArrowUp`</td><td>öğeler arasında; uçlarda DÖNER</td></tr>
+ *   <tr><td>`Home` / `End`</td><td>ilk / son öğe</td></tr>
+ *   <tr><td>harf</td><td>o harfle başlayan ilk öğeye atlar</td></tr>
+ *   <tr><td>`Enter` / `Space`</td><td>öğeyi çalıştırır ve menüyü kapatır</td></tr>
+ *   <tr><td>`Escape` / `Tab`</td><td>kapatır, odak TETİKLEYİCİYE döner</td></tr>
+ * </table>
+ */
+declare const Menu_2: ({ trigger, items, label, side, align, className, testId, }: Props_4) => JSX.Element | null;
+
+export declare type MenuItem = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    onSelect: () => void;
+    isDisabled?: boolean;
+    /** Geri alınamaz eylem: yıkıcı tonda çizilir. */
+    isDanger?: boolean;
+};
+
+/**
+ * ÖLÇÜ TOKEN'LARI — temadan bağımsız, çalışma zamanında EZİLEBİLİR.
+ *
+ * <h3>Neden bunlar da CSS değişkeni</h3>
+ * Bir zamanlar yalnızca renkler ve font aileleri çalışma zamanında
+ * eziliyordu; yarıçap, boşluk, süre ve tipografi ölçeği `_variables.scss`
+ * içinde SCSS sabitiydi. Sonucu şuydu: bir tüketici markasının RENGİNİ
+ * verebiliyor ama YUVARLAKLIĞINI veremiyordu. Oysa bir markayı tanınır kılan
+ * şeylerin listesinde yarıçap renkten sonra gelir — keskin köşeli bir
+ * kurumsal panelle yumuşak köşeli bir vitrin aynı pakete aynı derecede
+ * ihtiyaç duyuyor. Aynısı bilgi yoğunluğu (boşluk ölçeği) ve hareket süresi
+ * için de geçerli.
+ *
+ * <h3>SCSS sabiti olarak KALANLAR ve nedenleri</h3>
+ * <ul>
+ *   <li><b>Kırılma noktaları</b> — `@media (max-width: var(--x))` GEÇERSİZ
+ *       CSS. Medya sorgusu özel özellik okuyamaz; taşınsalardı bütün duyarlı
+ *       yerleşim sessizce çökerdi.</li>
+ *   <li><b>Katman (`z-*`)</b> — bir yığılma bağlamı sayısı, marka kararı
+ *       değil. Tüketicinin ezmesi gereken bir şey değil; ezerse kip pencere
+ *       perdenin altında kalır.</li>
+ *   <li><b>Ağırlık, harf aralığı, kapsayıcı genişlikleri, sayfa dolgusu</b> —
+ *       ölçek değil tekil değer; ezme ihtiyacı ölçülmedi. Gerektiğinde
+ *       buraya taşınabilir, ters yön (geri alma) kırıcıdır.</li>
+ * </ul>
+ *
+ * <h3>Değerler DİZE, sayı değil</h3>
+ * `'4px'` yazılıyor çünkü çıktı doğrudan bir CSS bildirimi. Sayı tutulup
+ * birim sonradan eklenseydi, `radius-pill` (999px) ile `leading-normal`
+ * (birimsiz 1.62) aynı listede duramazdı.
+ */
+export declare const METRIC_TOKENS: {
+    readonly 'radius-xs': "4px";
+    readonly 'radius-sm': "6px";
+    readonly 'radius-md': "8px";
+    readonly 'radius-lg': "12px";
+    readonly 'radius-xl': "16px";
+    readonly 'radius-pill': "999px";
+    readonly 'space-0': "0";
+    readonly 'space-1': "4px";
+    readonly 'space-2': "8px";
+    readonly 'space-3': "12px";
+    readonly 'space-4': "16px";
+    readonly 'space-5': "24px";
+    readonly 'space-6': "32px";
+    readonly 'space-7': "48px";
+    readonly 'space-8': "64px";
+    readonly 'space-9': "96px";
+    readonly 'font-size-2xs': "12px";
+    readonly 'font-size-xs': "13px";
+    readonly 'font-size-sm': "15px";
+    readonly 'font-size-base': "16px";
+    readonly 'font-size-body': "17px";
+    readonly 'font-size-lg': "19px";
+    readonly 'font-size-xl': "23px";
+    readonly 'font-size-2xl': "29px";
+    readonly 'font-size-3xl': "37px";
+    readonly 'font-size-4xl': "47px";
+    readonly 'leading-none': "1";
+    readonly 'leading-tight': "1.16";
+    readonly 'leading-snug': "1.35";
+    readonly 'leading-normal': "1.62";
+    readonly 'leading-relaxed': "1.75";
+    readonly 'icon-xs': "14px";
+    readonly 'icon-sm': "16px";
+    readonly 'icon-md': "18px";
+    readonly 'icon-lg': "20px";
+    readonly 'icon-xl': "24px";
+    readonly 'duration-instant': "80ms";
+    readonly 'duration-fast': "140ms";
+    readonly 'duration-normal': "200ms";
+    readonly 'duration-slow': "320ms";
+    readonly 'ease-out': "cubic-bezier(0.22, 1, 0.36, 1)";
+    readonly 'ease-in-out': "cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly 'ease-spring': "cubic-bezier(0.34, 1.4, 0.64, 1)";
+    readonly 'duration-spin': "700ms";
+    readonly 'duration-shimmer': "1400ms";
+};
+
 /**
  * Kırılma noktaları — `styles/_variables.scss` içindeki `$breakpoint-*` ile
  * <strong>aynı</strong> değerler.
@@ -1362,8 +1954,18 @@ export declare const Modal: typeof Modal_2;
  * Dar ekranda ortalanmış bir pencere, klavye açıldığında yukarı sıkışıyor ve
  * dip düğmeleri klavyenin altında kalıyordu. Alt sayfa baş parmağın
  * erişebildiği yerde durur.
+ *
+ * <h3>Klavye</h3>
+ * <table>
+ *   <tr><td>`Escape`</td><td>kapatır — `isDismissable={false}` iken KAPATMAZ</td></tr>
+ *   <tr><td>`Tab`</td><td>odak panelin içinde döner (tarayıcı: `showModal()`)</td></tr>
+ * </table>
+ * Odak tuzağı tarayıcıdan gelir; kütüphanenin işi `cancel` olayını React
+ * durumuna bağlamak. Yakalanmadığında pencere kapanıyor ama `isOpen` `true`
+ * kalıyor ve bir daha açılamıyordu. Nöbetçi:
+ * `components/__tests__/keyboard.test.tsx`.
  */
-declare const Modal_2: ({ isOpen, onClose, title, closeLabel, children, description, footer, icon, tone, size, isDismissable, className, testId, }: Props_29) => JSX.Element;
+declare const Modal_2: ({ isOpen, onClose, title, closeLabel, children, description, footer, icon, tone, size, isDismissable, className, testId, }: Props_41) => JSX.Element;
 
 export declare type ModalTone = 'neutral' | 'danger' | 'warning' | 'success' | 'info';
 
@@ -1410,7 +2012,7 @@ export declare const PageHeader: typeof PageHeader_2;
  * Düğmeler başlık bloğunun ALT kenarına hizalanır. `baseline` verildiğinde iki
  * satırlık başlıklarda düğme ilk satıra çekiliyordu.
  */
-declare const PageHeader_2: FC<Props_19>;
+declare const PageHeader_2: FC<Props_25>;
 
 export declare const Pagination: typeof Pagination_2;
 
@@ -1433,7 +2035,7 @@ export declare const Pagination: typeof Pagination_2;
  * kalırlar — `<a>` etiketinin "devre dışı" hâli yok, `aria-disabled` ise
  * tıklamayı engellemez. Sayfa numaraları tarayıcıya zaten tam listeyi veriyor.
  */
-declare const Pagination_2: FC<Props_35>;
+declare const Pagination_2: FC<Props_49>;
 
 export declare const Panel: typeof Panel_2;
 
@@ -1458,7 +2060,7 @@ export declare const Panel: typeof Panel_2;
  *   <PanelForm>…alanlar…</PanelForm>
  * </Panel>
  */
-declare const Panel_2: FC<Props_20>;
+declare const Panel_2: FC<Props_26>;
 
 /**
  * Panel içindeki form ızgarası.
@@ -1490,6 +2092,72 @@ declare type PanelRowProps = {
     className?: string;
 };
 
+export declare const Popover: typeof Popover_2;
+
+/**
+ * Popover — <strong>eylem taşıyabilen</strong>, odaklanabilir yüzey.
+ *
+ * <h3>{@link Tooltip} ile farkı: içine ne konabildiği</h3>
+ * İkisi de tetikleyiciye yapışan bir yüzey açıyor; ayrım içeriğin
+ * ERİŞİLEBİLİR olup olmamasında:
+ *
+ * <ul>
+ *   <li>`Tooltip` yalnızca AÇIKLAMA taşır. `pointer-events: none` ve klavyeyle
+ *       içine girilemez — içine bir bağlantı konsa ona ulaşmanın yolu olmazdı
+ *       (fare balona giderken tetikleyiciden çıkıyor).</li>
+ *   <li><b>`Popover` odak alır.</b> Açıldığında odak içeri girer, `Escape`
+ *       kapatır ve odak tetikleyiciye döner. Bağlantı, düğme, kısa bir form
+ *       konabilir.</li>
+ * </ul>
+ *
+ * <h3>Kipsel DEĞİL</h3>
+ * Arka plan tıklanabilir kalır ve sayfa kaydırılabilir. Kararı bekleyen,
+ * kaçınılmaz bir seçim `Modal`ın işi; popover yardımcı bir yüzey ve
+ * kullanıcıyı hapsetmemeli. Bu yüzden `<dialog>` DEĞİL portal + `usePositioning`:
+ * `showModal()` arka planı inert bırakıyor, `<dialog open>` (kipsiz) ise üst
+ * katmana hiç girmiyor ve `z-index` yarışına dönüyordu.
+ *
+ * <h3>Klavye</h3>
+ * <table>
+ *   <tr><td>`Enter` / `Space`</td><td>tetikleyicide: açar</td></tr>
+ *   <tr><td>`Escape`</td><td>kapatır, odak TETİKLEYİCİYE döner</td></tr>
+ *   <tr><td>`Tab`</td><td>yüzeyin içinde gezinir; dışına çıkınca KAPANIR</td></tr>
+ * </table>
+ * Odak tuzağı YOK — kipsel olmayan bir yüzeyde odağı hapsetmek, kullanıcıyı
+ * sayfadan koparır. Odak dışarı çıktığında yüzey kapanır.
+ */
+declare const Popover_2: ({ trigger, children, label, side, align, isOpen: controlledOpen, onOpenChange, className, testId, }: Props_5) => JSX.Element | null;
+
+/** Tercih edilen kenar boyunca hizalama. */
+export declare type PositionAlign = 'start' | 'center' | 'end';
+
+export declare type PositioningOptions = {
+    side?: PositionSide;
+    align?: PositionAlign;
+    /** Tetikleyici ile yüzey arasındaki boşluk (px). */
+    offset?: number;
+    /** Görünüm alanının kenarından bırakılacak asgari pay (px). */
+    padding?: number;
+    /** Kapalıyken ölçüm yapılmaz ve dinleyici kurulmaz. */
+    isOpen: boolean;
+};
+
+export declare type PositioningState = {
+    /** Yüzeye uygulanacak stil — `position: fixed` + hesaplanmış koordinat. */
+    style: {
+        position: 'fixed';
+        top: number;
+        left: number;
+    };
+    /** ÇÖZÜLMÜŞ kenar: çarpışma yüzünden tercih edilenin karşıtı olabilir. */
+    side: PositionSide;
+    /** İlk ölçüm yapıldı mı. Yapılmadan çizilen yüzey sol üst köşede parlıyor. */
+    isPositioned: boolean;
+};
+
+/** Yüzeyin tercih ettiği kenar. Yer yoksa karşıtına düşer. */
+export declare type PositionSide = 'top' | 'bottom' | 'left' | 'right';
+
 /**
  * `showModal()` ÇAĞRILDIKTAN SONRA çağrılır. Odak bir metin alanına düştüyse
  * panelin kendisine geri alınır; düşmediyse hiçbir şey yapılmaz.
@@ -1513,7 +2181,36 @@ export declare const Price: typeof Price_2;
  * küçük bir yeşil rozet. Kırmızı fiyat ucuz durur ve kırmızıyı "olumsuz"
  * anlamından koparır.
  */
-declare const Price_2: FC<Props_21>;
+declare const Price_2: FC<Props_27>;
+
+export declare const Progress: typeof Progress_2;
+
+/**
+ * İlerleme çubuğu — <strong>ölçülebilir</strong> bekleme.
+ *
+ * <h3>{@link Spinner} ile farkı: sonu bilinip bilinmediği</h3>
+ * `Spinner` "bir şey oluyor" der ve başka bir şey söyleyemez. Ölçülebilir bir
+ * işte (dosya yükleme, içe aktarma, çok adımlı ödeme) bu yetmiyor: kullanıcı
+ * beklemeye değip değmeyeceğine karar veremiyor ve iki saniyeyle iki dakika
+ * arasındaki farkı ancak bekleyerek öğreniyordu.
+ *
+ * <p>`value` verilmediğinde çubuk BELİRSİZ kipe düşer: yine bir çubuk çizer
+ * ama `aria-valuenow` yazmaz. Bu kasıtlı — bilinmeyen bir değeri "0" diye
+ * bildirmek, ekran okuyucuya işin hiç ilerlemediğini söylüyordu.
+ *
+ * <h3>Yüzde tek başına yeterli DEĞİL</h3>
+ * `valueText` verildiğinde ekran okuyucu onu okur ("5 dosyadan 3'ü"), yüzdeyi
+ * değil. Aynı bilgi görsel tarafta `isValueVisible` ile yazılabiliyor; ikisi
+ * de aynı gerçeği söylemek zorunda.
+ *
+ * <h3>Renk tek başına anlam taşımaz</h3>
+ * `tone` yalnızca bir vurgu: "tamamlandı" ya da "başarısız" durumu çubuğun
+ * rengiyle DEĞİL, yanındaki metinle ve çağıran tarafın çizdiği ikonla
+ * anlatılır (WCAG 1.4.1).
+ */
+declare const Progress_2: ({ value, max, label, valueText, isValueVisible, tone, size, className, testId, }: Props_33) => JSX.Element;
+
+export declare const ProgressCircle: MemoExoticComponent<({ value, max, label, valueText, isValueVisible, tone, size, className, testId, }: CircleProps) => JSX.Element>;
 
 export declare const PromptDialog: typeof PromptDialog_2;
 
@@ -1536,7 +2233,7 @@ export declare const PromptDialog: typeof PromptDialog_2;
  * (`Modal` dip şeridi formun dışında çizer). `multiline` kipinde Enter satır
  * başı yapar, gönderme düğmeden.
  */
-declare const PromptDialog_2: FC<Props_31>;
+declare const PromptDialog_2: FC<Props_45>;
 
 declare type Props = {
     children: ReactNode;
@@ -1574,6 +2271,66 @@ declare type Props = {
 };
 
 declare type Props_10 = {
+    /** Radyo grubu adı — aynı gruptaki kartlar ok tuşlarıyla gezilir. */
+    name: string;
+    value: string;
+    isSelected: boolean;
+    isDisabled?: boolean;
+    onChange: (value: string) => void;
+    /** Zengin gövde: kartın içeriği çağırana aittir. */
+    children: ReactNode;
+} & CommonElementProps;
+
+declare type Props_11 = {
+    min: number;
+    max: number;
+    step?: number;
+    value: RangeValue;
+    /** Sürükleme sürerken her adımda çağrılır — ekrandaki değeri günceller. */
+    onChange: (value: RangeValue) => void;
+    /**
+     * Sürükleme <em>bittiğinde</em> çağrılır. Adres çubuğuna yazmak veya
+     * sunucuya istek atmak gibi pahalı işler buraya bağlanır.
+     */
+    onCommit?: (value: RangeValue) => void;
+    /** Ham sayıyı okunur metne çevirir ("125000" → "1.250 TL"). */
+    formatValue?: (value: number) => string;
+    /** Grubun erişilebilir adı ("Fiyat aralığı"). */
+    label: string;
+    /** Alt kulbun erişilebilir ad eki. Verilmezse `labels.range.min`. */
+    minLabel?: string;
+    /** Üst kulbun erişilebilir ad eki. Verilmezse `labels.range.max`. */
+    maxLabel?: string;
+    isDisabled?: boolean;
+    className?: string;
+    testId?: string;
+};
+
+declare type Props_12 = {
+    value: number | null;
+    onChange: (value: number) => void;
+    /** Grubun erişilebilir adı ("Ürün puanı"). */
+    label: string;
+    /**
+     * Puan açıklamaları. Hem ekran okuyucuya okunur hem de seçildiğinde
+     * yıldızların altında yazar. Verilmezse `labels.rating.scale`.
+     *
+     * <p>Dolu yıldız sayısı tek başına bir renk/şekil sinyali. Yanına açıklama
+     * yazmak hem anlamı netleştirir hem de renk körü kullanıcıya ikinci bir ipucu
+     * verir (WCAG 1.4.1).
+     */
+    ratingLabels?: RatingLabels;
+    /**
+     * Ekran okuyucuda yıldız sayısını okuyan biçimlendirici ("4 yıldız").
+     * Verilmezse `labels.rating.starCount`.
+     */
+    formatStarCount?: (star: number) => string;
+    isDisabled?: boolean;
+    className?: string;
+    testId?: string;
+};
+
+declare type Props_13 = {
     value: number;
     onChange: (value: number) => void;
     /** Grubun ve girdinin erişilebilir adı. Verilmezse `labels.quantity.label`. */
@@ -1590,7 +2347,27 @@ declare type Props_10 = {
     testId?: string;
 };
 
-declare type Props_11 = BaseProps_2 & {
+declare type Props_14 = {
+    values: string[];
+    onChange: (values: string[]) => void;
+    /** Alanın erişilebilir adı. ZORUNLU. */
+    label: string;
+    placeholder?: string;
+    /** Her etiketin kaldırma düğmesinin ad öneki ("Kaldır"). ZORUNLU. */
+    removeLabel: string;
+    /** Etiketi bitiren tuşlar. Varsayılan `Enter` ve virgül. */
+    separators?: string[];
+    /** En fazla kaç etiket. Dolduğunda girdi PASİF olur, gizlenmez. */
+    maxTags?: number;
+    isDisabled?: boolean;
+    id?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+    className?: string;
+    testId?: string;
+};
+
+declare type Props_15 = BaseProps_2 & {
     isRequired?: boolean;
     /**
      * Zorunluluk yıldızının ekran okuyucu karşılığı ("(zorunlu)").
@@ -1602,7 +2379,35 @@ declare type Props_11 = BaseProps_2 & {
     requiredLabel?: string;
 };
 
-declare type Props_12 = {
+declare type Props_16 = {
+    files: UploadFile[];
+    /** Kullanıcı dosya seçtiğinde/bıraktığında çağrılır — DOĞRULANMIŞ liste. */
+    onSelect: (files: File[]) => void;
+    onRemove: (id: string) => void;
+    /** Alanın görünür etiketi ve erişilebilir adı. ZORUNLU. */
+    label: string;
+    /** Etiketin altındaki kural cümlesi ("PDF veya JPG, en fazla 5 MB"). */
+    hint?: string;
+    /** `<input accept>` — tarayıcının dosya seçicisini süzer. */
+    accept?: string;
+    isMultiple?: boolean;
+    /** Bayt. Aşan dosya `onSelect`e HİÇ ulaşmaz; hata metni burada üretilir. */
+    maxSize?: number;
+    /** Kaldırma düğmelerinin erişilebilir ad öneki ("Kaldır"). */
+    removeLabel: string;
+    /** Sürükle-bırak alanının içine yazılan çağrı ("Dosyaları buraya bırakın"). */
+    dropLabel: string;
+    /** Boyut aşıldığında yazılan hata; `{name}` ve `{max}` yerine konur. */
+    sizeErrorText?: string;
+    isDisabled?: boolean;
+    /** Alanın tamamına ait hata (sunucu reddi). */
+    error?: string;
+    children?: ReactNode;
+    className?: string;
+    testId?: string;
+};
+
+declare type Props_17 = {
     children: ReactNode;
     tone?: AlertTone;
     title?: string;
@@ -1612,7 +2417,7 @@ declare type Props_12 = {
     testId?: string;
 };
 
-declare type Props_13 = {
+declare type Props_18 = {
     /** Tam ad; baş harfler buradan üretilir ve görsel yoksa `alt` metnidir. */
     name: string;
     /**
@@ -1633,7 +2438,7 @@ declare type Props_13 = {
     testId?: string;
 };
 
-declare type Props_14 = {
+declare type Props_19 = {
     children: ReactNode;
     tone?: BadgeTone;
     variant?: BadgeVariant;
@@ -1643,7 +2448,18 @@ declare type Props_14 = {
     testId?: string;
 };
 
-declare type Props_15 = {
+declare type Props_2 = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & {
+    href: string;
+    children: ReactNode;
+    /** Sonda ok gösterilir — "devam et" anlamı taşıyan bağlantılarda. */
+    hasArrow?: boolean;
+    tone?: 'brand' | 'muted';
+    size?: 'sm' | 'md';
+    /** Yönlendiriciye geçirilecek ek props. */
+    linkProps?: HanuiLinkExtraProps;
+};
+
+declare type Props_20 = {
     items: Crumb[];
     /** Gezinme bölgesinin erişilebilir adı. Verilmezse `labels.breadcrumb`. */
     label?: string;
@@ -1653,9 +2469,30 @@ declare type Props_15 = {
     testId?: string;
 };
 
-declare type Props_16 = {
-    /** Gösterilecek ve panoya kopyalanacak değer. */
-    value: string;
+declare type Props_21 = {
+    children: ReactNode;
+    /** Şeridin erişilebilir adı ("Öne çıkan ürünler"). ZORUNLU. */
+    label: string;
+    /** Önceki/sonraki düğmelerinin erişilebilir adları. ZORUNLU. */
+    previousLabel: string;
+    nextLabel: string;
+    /**
+     * Sayfa göstergesinin ad üreticisi (`index` 1 tabanlı).
+     *
+     * <p>Verilmediğinde nokta göstergesi ÇİZİLMEZ: adsız bir nokta ekran
+     * okuyucuda "düğme" diye okunuyor ve kullanıcı nereye gittiğini
+     * bilmiyordu.
+     */
+    formatDotLabel?: (index: number, total: number) => string;
+    /** Bir kartın asgari genişliği. Şerit buna göre kaç kart göstereceğine karar verir. */
+    itemMinWidth?: number;
+    className?: string;
+    testId?: string;
+};
+
+declare type Props_22 = {
+    /** Gösterilecek ve panoya kopyalanacak değer. */
+    value: string;
     /**
      * Kopyalama düğmesinin erişilebilir adı ve `title`ı.
      *
@@ -1682,13 +2519,13 @@ declare type Props_16 = {
     testId?: string;
 };
 
-declare type Props_17 = {
+declare type Props_23 = {
     /** Ortada gösterilen metin ("veya"). */
     label?: string;
     className?: string;
 };
 
-declare type Props_18 = {
+declare type Props_24 = {
     title: string;
     description?: string;
     icon?: ReactNode;
@@ -1696,12 +2533,27 @@ declare type Props_18 = {
     action?: ReactNode;
     /** İkincil eylem veya ipucu. */
     secondaryAction?: ReactNode;
+    /**
+     * `error` — liste BOŞ değil, ÇEKİLEMEDİ.
+     *
+     * <p>İkisi ayrı durumlar ve ayrı görünmek zorundalar: ağ hatasını "kayıt
+     * kalmamış" diye okuyan kullanıcı yanlış karar veriyor (ürün aramayı
+     * bırakıyor, siparişinin silindiğini sanıyor). Varyant `role="alert"`
+     * taşıyor ve tonu farklı — layout aynı kalıyor ki iki durum arasındaki
+     * geçiş sıçramasın.
+     *
+     * <p>Ayrım ÖNCE bu bileşenin dışındaydı ("ağ hatasında bu bileşen
+     * çizilmez") ve sonucu şuydu: her çağıran kendi hata kutusunu yazıyor,
+     * kutular birbirinden farklı görünüyordu. Ayrım korunuyor — ama artık
+     * BİLEŞENDE kodlu, çağıranın disiplinine bırakılmış değil.
+     */
+    tone?: 'empty' | 'error';
     size?: 'sm' | 'md';
     className?: string;
     testId?: string;
 };
 
-declare type Props_19 = {
+declare type Props_25 = {
     title: string;
     /** Başlığın üstündeki küçük bağlam etiketi ("HESABIM", "KATEGORİ"). */
     eyebrow?: string;
@@ -1724,18 +2576,7 @@ declare type Props_19 = {
     testId?: string;
 };
 
-declare type Props_2 = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & {
-    href: string;
-    children: ReactNode;
-    /** Sonda ok gösterilir — "devam et" anlamı taşıyan bağlantılarda. */
-    hasArrow?: boolean;
-    tone?: 'brand' | 'muted';
-    size?: 'sm' | 'md';
-    /** Yönlendiriciye geçirilecek ek props. */
-    linkProps?: HanuiLinkExtraProps;
-};
-
-declare type Props_20 = {
+declare type Props_26 = {
     children: ReactNode;
     /** Panel başlığı. Verilmezse başlık şeridi hiç çizilmez. */
     title?: string;
@@ -1757,11 +2598,25 @@ declare type Props_20 = {
     testId?: string;
 };
 
-declare type Props_21 = {
+declare type Props_27 = {
     /** BİÇİMLENMİŞ tutar: "1.299,90". Bileşen hesap yapmaz. */
     value: string;
     /** Para birimi simgesi ya da kodu. Verilmezse `labels.currency`. */
     currency?: string;
+    /**
+     * Değeri `Intl.NumberFormat` ile biçimlendirir.
+     *
+     * <p>`value` bu kipte de bir DİZE olarak kalıyor ve sayıya çevriliyor —
+     * bileşen hâlâ HESAP YAPMIYOR, yalnızca ayırıcıları ve para birimi
+     * konumunu yerel ayardan alıyor. Yerel ayar `labels.locale`den; verilmezse
+     * biçimlendirme YAPILMAZ ve değer olduğu gibi yazılır. Yanlış yerel ayarda
+     * biçimlendirilmiş bir tutar, biçimlendirilmemiş olandan kötü: "1,250" bir
+     * yerde bin iki yüz elli, başka bir yerde bir tam iki yüz elli.
+     *
+     * <p>Para birimi simgesinin ÖN/ARKA konumu da yerel ayara bağlı ve şu anda
+     * her zaman arkada — `Intl` açıldığında doğru konumu o veriyor.
+     */
+    isFormatted?: boolean;
     /** Üstü çizili liste fiyatı; indirim varsa verilir (biçimlenmiş). */
     listValue?: string;
     /** İndirim oranı (tam sayı yüzde). */
@@ -1773,7 +2628,7 @@ declare type Props_21 = {
     testId?: string;
 };
 
-declare type Props_22 = {
+declare type Props_28 = {
     /** 0–5 arası puan. Yarım yıldız desteklenir. */
     value: number;
     /** Değerlendirme sayısı; verilirse yıldızların yanında gösterilir. */
@@ -1794,7 +2649,7 @@ declare type Props_22 = {
     testId?: string;
 };
 
-declare type Props_23 = {
+declare type Props_29 = {
     title: string;
     description?: string;
     /** Üstte gösterilen küçük büyük-harf etiket. */
@@ -1807,7 +2662,54 @@ declare type Props_23 = {
     testId?: string;
 };
 
-declare type Props_24 = {
+declare type Props_3 = {
+    /** Balonda gösterilecek açıklama. */
+    content: ReactNode;
+    /** Açıklamanın bağlandığı öğe — düğme, ikon, etiket. */
+    children: ReactNode;
+    /**
+     * Tercih edilen kenar. Yer yoksa KARŞITINA düşer; üçüncü bir kenara
+     * atlamaz (bkz. `usePositioning`).
+     */
+    side?: PositionSide;
+    /**
+     * Açılma gecikmesi (ms). Fare bir araç çubuğunun üzerinden geçerken sıfır
+     * gecikme, art arda beş balon açıp kapatıyordu.
+     */
+    openDelay?: number;
+    /**
+     * @deprecated `side` kullanın. Bu prop bir sonraki büyük sürümde kalkacak.
+     *
+     * <p>Ad değişti çünkü davranış değişti: `position` SABİT bir kenar
+     * yazıyordu ve balon oraya sığmadığında görünüm alanının dışına taşıyordu.
+     * `side` yalnızca TERCİH — yer yoksa karşıt kenara düşülüyor. Aynı adı
+     * korumak, artık doğru olmayan bir sözü sürdürmek olurdu.
+     */
+    position?: 'top' | 'bottom';
+    className?: string;
+};
+
+declare type Props_30 = {
+    children: ReactNode;
+    /**
+     * Kaydırılabilir bölgenin erişilebilir adı. ZORUNLU.
+     *
+     * <p>Bölge klavyeyle odaklanabilir olduğunda ekran okuyucu onu duyuruyor;
+     * adsız bir bölge "bölge" diye okunuyor ve kullanıcı neyin içinde olduğunu
+     * bilmiyordu.
+     */
+    label: string;
+    /** Kaydırma yönü. `both` iki eksende de kaydırır. */
+    axis?: 'vertical' | 'horizontal' | 'both';
+    /** En fazla yükseklik — dikey kaydırmada zorunlu, yoksa kutu uzar gider. */
+    maxHeight?: number | string;
+    /** Kenarlarda içeriğin devam ettiğini gösteren solma. */
+    hasFade?: boolean;
+    className?: string;
+    testId?: string;
+};
+
+declare type Props_31 = {
     /** Genişlik: sayı px, dize doğrudan CSS değeri. */
     width?: number | string;
     height?: number | string;
@@ -1818,7 +2720,66 @@ declare type Props_24 = {
     className?: string;
 };
 
-declare type Props_25 = {
+declare type Props_32 = {
+    /** Ölçülen şeyin adı ("Bugünkü sipariş"). */
+    label: string;
+    /** Değerin KENDİSİ — biçimlendirilmiş dize. Bileşen hesap yapmaz. */
+    value: ReactNode;
+    /** Değerin yanındaki birim ("₺", "adet"). */
+    unit?: string;
+    /** Değişim metni ("%12", "+3"). `trend` ile birlikte anlamlı. */
+    delta?: string;
+    /**
+     * Değişimin yönü.
+     *
+     * <p>Yön TEK BAŞINA iyi/kötü demek değildir: "iade oranı %12 arttı" kötü,
+     * "ciro %12 arttı" iyi. Renk kararı {@link isUpPositive} ile ayrı veriliyor.
+     */
+    trend?: StatTrend;
+    /**
+     * Artış İYİ mi. Varsayılan `true`.
+     *
+     * <p>`false` verildiğinde yukarı ok kırmızı, aşağı ok yeşil çizilir — iade
+     * oranı, hata sayısı, terk edilen sepet gibi ölçüler için. Yönü her zaman
+     * yeşil çizmek, kötüleşen bir ölçüyü iyi haber gibi gösteriyordu.
+     */
+    isUpPositive?: boolean;
+    /** Değerin altındaki bir cümlelik bağlam ("geçen haftaya göre"). */
+    description?: ReactNode;
+    /** Sol üstte duran ikon madalyonu. */
+    icon?: ReactNode;
+    size?: 'sm' | 'md';
+    className?: string;
+    testId?: string;
+};
+
+declare type Props_33 = {
+    /**
+     * Tamamlanan miktar. `undefined` → BELİRSİZ ilerleme (sonu bilinmiyor);
+     * çubuk kendi kendine akar.
+     */
+    value?: number;
+    /** Ölçeğin üst ucu. */
+    max?: number;
+    /** Çubuğun erişilebilir adı ("Yükleme", "Ödeme adımı"). ZORUNLU. */
+    label: string;
+    /**
+     * Ekran okuyucuya okunan METİN karşılığı ("3 / 5 dosya").
+     *
+     * <p>Verilmezse ekran okuyucu ham yüzdeyi okur. Bir dosya yüklemesinde
+     * "yüzde altmış" ile "5 dosyadan 3'ü" arasındaki fark, kullanıcının
+     * bekleyip beklememeye karar verebilmesi.
+     */
+    valueText?: string;
+    /** Yüzdeyi çubuğun yanında GÖRÜNÜR olarak yazar. */
+    isValueVisible?: boolean;
+    tone?: 'brand' | 'success' | 'warning' | 'danger';
+    size?: 'sm' | 'md';
+    className?: string;
+    testId?: string;
+};
+
+declare type Props_34 = {
     size?: 'sm' | 'md' | 'lg';
     /**
      * Ekran okuyucuya okunacak metin; görsel olarak gizli.
@@ -1832,7 +2793,44 @@ declare type Props_25 = {
     className?: string;
 };
 
-declare type Props_26 = {
+declare type Props_35 = {
+    items: AccordionItem[];
+    /**
+     * Aynı anda YALNIZCA BİR bölüm açık kalır.
+     *
+     * <p>Varsayılan çoklu: bir SSS listesinde iki soruyu yan yana okumak
+     * yaygın bir ihtiyaç ve tek-açık kip, kullanıcının az önce açtığı bölümü
+     * habersizce kapatıyordu. Tek-açık yalnızca bölümler UZUN olduğunda
+     * (mobil filtre paneli) doğru.
+     */
+    isSingle?: boolean;
+    /** Kontrolsüz kullanımda açılışta açık olan bölümler. */
+    defaultOpenIds?: string[];
+    /** Kontrollü kullanım; `onChange` ile birlikte verilir. */
+    openIds?: string[];
+    onChange?: (openIds: string[]) => void;
+    className?: string;
+    testId?: string;
+};
+
+declare type Props_36 = {
+    steps: StepItem[];
+    /** Bulunulan adımın DİZİNİ (0 tabanlı). Öncesi tamamlanmış sayılır. */
+    currentIndex: number;
+    /**
+     * Bir adıma dönülebiliyorsa verilir. Verilmediğinde adımlar düğme DEĞİL
+     * düz metin olur — tıklanabilir görünüp hiçbir şey yapmayan bir adım,
+     * kullanıcıya var olmayan bir yol vaat ediyordu.
+     */
+    onStepClick?: (index: number) => void;
+    /** Akışın erişilebilir adı ("Ödeme adımları"). ZORUNLU. */
+    label: string;
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+    testId?: string;
+};
+
+declare type Props_37 = {
     items: TabItem[];
     /** Kontrolsüz kullanımda açılışta seçili sekme. */
     defaultTabId?: string;
@@ -1847,11 +2845,21 @@ declare type Props_26 = {
     onChange?: (id: string) => void;
     /** Sekme çubuğunun erişilebilir adı. */
     ariaLabel?: string;
+    /**
+     * Ok tuşu yalnızca ODAĞI taşır; seçim `Enter`/`Space` ile yapılır.
+     *
+     * <p>Varsayılan OTOMATİK etkinleştirme (ok tuşu odakla birlikte seçimi de
+     * taşır) ve APG panel içeriği hazır olduğu sürece onu öneriyor. Ama panel
+     * PAHALIYSA — her sekme bir istek atıyorsa — otomatik etkinleştirme,
+     * kullanıcı beşinci sekmeye giderken dört istek atıyor. Manuel kipte
+     * kullanıcı hedefine varıp `Enter`a basıyor: tek istek.
+     */
+    isManualActivation?: boolean;
     className?: string;
     testId?: string;
 };
 
-declare type Props_27 = {
+declare type Props_38 = {
     label: string;
     /** İkon DIŞARIDAN gelir: hangi ikonun hangi konuya ait olduğu uygulamanın bilgisi. */
     icon: ReactNode;
@@ -1865,7 +2873,27 @@ declare type Props_27 = {
     testId?: string;
 };
 
-declare type Props_28 = {
+declare type Props_39 = {
+    events: TimelineEvent[];
+    /** Akışın erişilebilir adı ("Sipariş geçmişi"). ZORUNLU. */
+    label: string;
+    className?: string;
+    testId?: string;
+};
+
+declare type Props_4 = {
+    /** Tetikleyici. TEK öğe; bileşen ona `ref` ve ARIA ekliyor. */
+    trigger: ReactElement;
+    items: MenuItem[];
+    /** Menünün erişilebilir adı ("Satır eylemleri"). ZORUNLU. */
+    label: string;
+    side?: PositionSide;
+    align?: PositionAlign;
+    className?: string;
+    testId?: string;
+};
+
+declare type Props_40 = {
     title: string;
     /** Kapatma düğmesinin erişilebilir adı. Verilmezse `labels.close`. */
     closeLabel?: string;
@@ -1891,7 +2919,7 @@ declare type Props_28 = {
     testId?: string;
 };
 
-declare type Props_29 = {
+declare type Props_41 = {
     isOpen: boolean;
     onClose: () => void;
     title: string;
@@ -1930,17 +2958,21 @@ declare type Props_29 = {
     testId?: string;
 };
 
-declare type Props_3 = {
-    /** Balonda gösterilecek açıklama. */
-    content: ReactNode;
-    /** Açıklamanın bağlandığı öğe — düğme, ikon, etiket. */
-    children: ReactNode;
-    /** Varsayılan üstte; alanı olmayan yerlerde `bottom`. */
-    position?: 'top' | 'bottom';
+declare type Props_42 = {
+    isOpen: boolean;
+    onClose: () => void;
+    items: CommandItem[];
+    /** Pencerenin erişilebilir adı ("Komut paleti"). ZORUNLU. */
+    label: string;
+    /** Arama kutusunun yer tutucusu ve erişilebilir adı. ZORUNLU. */
+    searchPlaceholder: string;
+    /** Sonuç yokken yazılan metin. ZORUNLU. */
+    emptyMessage: string;
     className?: string;
+    testId?: string;
 };
 
-declare type Props_30 = {
+declare type Props_43 = {
     isOpen: boolean;
     onClose: () => void;
     /**
@@ -1968,12 +3000,45 @@ declare type Props_30 = {
     cancelLabel?: string;
     /** Verilmezse `labels.close`. */
     closeLabel?: string;
+    /**
+     * Onayın türü — ikon, ton ve onay düğmesinin varyantını birlikte belirler.
+     *
+     * <p>Ad `kind`ten `variant`a taşındı: aynı işi yapan üçüncü bir ad
+     * kütüphanede zaten `variant` olarak duruyordu (`Button`, `Badge`) ve
+     * tüketici her bileşende hangisinin geçerli olduğunu hatırlamak zorunda
+     * kalıyordu. Nöbetçi: `src/__tests__/api-consistency.test.ts`.
+     */
+    variant?: ConfirmKind;
+    /** @deprecated `variant` kullanın. Bir sonraki büyük sürümde kalkacak. */
     kind?: ConfirmKind;
     /** Ek bağlam: silinecek kaydın özeti, uyarı kutusu. */
     children?: ReactNode;
 };
 
-declare type Props_31 = BaseProps_3 & {
+declare type Props_44 = {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    /** Kapatma düğmesinin erişilebilir adı. Verilmezse `labels.close`. */
+    closeLabel?: string;
+    children: ReactNode;
+    /**
+     * Panelin hangi kenardan geldiği. Mantıksal: `end` RTL'de sola açılır.
+     *
+     * <p>Varsayılan `end` — filtre ve ayrıntı panelleri okuma yönünün SONUNDAN
+     * gelir; `start` gezinme panelleri içindir.
+     */
+    side?: 'start' | 'end';
+    size?: 'sm' | 'md' | 'lg';
+    /** Dipte duran eylem şeridi; gövde kaydırılırken yerinde kalır. */
+    footer?: ReactNode;
+    /** Başlığın altında duran, gövdeyle birlikte kaymayan şerit. */
+    toolbar?: ReactNode;
+    className?: string;
+    testId?: string;
+};
+
+declare type Props_45 = BaseProps_3 & {
     /** Boş (yalnızca boşluk dahil) değer gönderilemez. */
     isRequired?: boolean;
     /**
@@ -1986,7 +3051,7 @@ declare type Props_31 = BaseProps_3 & {
     requiredLabel?: string;
 };
 
-declare type Props_32 = TableHTMLAttributes<HTMLTableElement> & Partial<{
+declare type Props_46 = TableHTMLAttributes<HTMLTableElement> & Partial<{
     /**
      * Hücre dolgusu. Tablolar aynı iskeleti paylaşır ama yoğunlukları içeriğe
      * göre değişir: yüzlerce satırlık bir liste sıkı, karşılaştırma matrisi
@@ -2004,7 +3069,7 @@ declare type Props_32 = TableHTMLAttributes<HTMLTableElement> & Partial<{
     hasRowHover: boolean;
 }>;
 
-declare type Props_33 = {
+declare type Props_47 = {
     columns: DataTableColumn[];
     /**
      * Gövde satırları (`<tr>`). Ekranların özel hücreleri, bağlantıları ve satır
@@ -2031,11 +3096,28 @@ declare type Props_33 = {
      * gidiyordu.
      */
     hasViewportCap?: boolean;
+    /**
+     * Sıralanabilir bir başlığa basıldığında çağrılır.
+     *
+     * <p>Sıralamanın KENDİSİ burada yapılmaz: veri çağıranın ve sıralama
+     * neredeyse her zaman sunucuda (sayfalanmış bir listede istemcide sıralamak
+     * yalnızca görünen sayfayı sıralar — kullanıcı "en ucuz" dediğinde en ucuz
+     * 24 ürünü değil, o sayfadaki en ucuzu görüyordu).
+     */
+    onSort?: (key: string, direction: 'ascending' | 'descending') => void;
+    /**
+     * Satır seçildiğinde beliren TOPLU EYLEM şeridi.
+     *
+     * <p>Tablonun ÜSTÜNDE ve yapışkan: kullanıcı yüzlerce satır arasında
+     * seçim yapıp aşağı kaydırdığında eylem şeridi ekranın dışında kalıyor ve
+     * seçimin ne işe yaradığı görünmüyordu.
+     */
+    bulkBar?: ReactNode;
     className?: string;
     testId?: string;
 };
 
-declare type Props_34 = {
+declare type Props_48 = {
     /**
      * Filtreler uygulanır. `preventDefault` bileşenin işi; çağıran yalnızca
      * durumunu günceller (sayfayı 1'e almak + aramayı uygulamak gibi).
@@ -2051,11 +3133,29 @@ declare type Props_34 = {
     testId?: string;
 };
 
-declare type Props_35 = LinkProps | ButtonProps;
+declare type Props_49 = LinkProps | ButtonProps;
+
+declare type Props_5 = {
+    /**
+     * Tetikleyici. TEK bir öğe olmak zorunda: bileşen ona `ref`, `onClick` ve
+     * `aria-expanded` ekliyor.
+     */
+    trigger: ReactElement;
+    children: ReactNode;
+    /** Yüzeyin erişilebilir adı. ZORUNLU — adsız bir bölge "grup" diye okunur. */
+    label: string;
+    side?: PositionSide;
+    align?: PositionAlign;
+    /** Kontrollü kullanım. Verilmezse bileşen durumu kendisi tutar. */
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    className?: string;
+    testId?: string;
+};
 
-declare type Props_4<T extends string> = SingleProps<T> | MultipleProps<T>;
+declare type Props_6<T extends string> = SingleProps<T> | MultipleProps<T>;
 
-declare type Props_5<T extends string> = {
+declare type Props_7<T extends string> = {
     options: ComboboxOption<T>[];
     value: T | null;
     onChange: (value: T | null) => void;
@@ -2087,7 +3187,20 @@ declare type Props_5<T extends string> = {
     testId?: string;
 };
 
-declare type Props_6<T extends string> = {
+declare type Props_8<T extends string> = {
+    options: SegmentOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    /** Grubun erişilebilir adı ("Görünüm"). ZORUNLU. */
+    label: string;
+    /** Etiketler gizlenir, yalnızca ikon çizilir. `label` yine okunur. */
+    isIconOnly?: boolean;
+    size?: 'sm' | 'md';
+    className?: string;
+    testId?: string;
+};
+
+declare type Props_9<T extends string> = {
     options: SelectOption<T>[];
     value: T;
     onChange: (value: T) => void;
@@ -2123,66 +3236,6 @@ declare type Props_6<T extends string> = {
     testId?: string;
 };
 
-declare type Props_7 = {
-    /** Radyo grubu adı — aynı gruptaki kartlar ok tuşlarıyla gezilir. */
-    name: string;
-    value: string;
-    isSelected: boolean;
-    isDisabled?: boolean;
-    onChange: (value: string) => void;
-    /** Zengin gövde: kartın içeriği çağırana aittir. */
-    children: ReactNode;
-} & CommonElementProps;
-
-declare type Props_8 = {
-    min: number;
-    max: number;
-    step?: number;
-    value: RangeValue;
-    /** Sürükleme sürerken her adımda çağrılır — ekrandaki değeri günceller. */
-    onChange: (value: RangeValue) => void;
-    /**
-     * Sürükleme <em>bittiğinde</em> çağrılır. Adres çubuğuna yazmak veya
-     * sunucuya istek atmak gibi pahalı işler buraya bağlanır.
-     */
-    onCommit?: (value: RangeValue) => void;
-    /** Ham sayıyı okunur metne çevirir ("125000" → "1.250 TL"). */
-    formatValue?: (value: number) => string;
-    /** Grubun erişilebilir adı ("Fiyat aralığı"). */
-    label: string;
-    /** Alt kulbun erişilebilir ad eki. Verilmezse `labels.range.min`. */
-    minLabel?: string;
-    /** Üst kulbun erişilebilir ad eki. Verilmezse `labels.range.max`. */
-    maxLabel?: string;
-    isDisabled?: boolean;
-    className?: string;
-    testId?: string;
-};
-
-declare type Props_9 = {
-    value: number | null;
-    onChange: (value: number) => void;
-    /** Grubun erişilebilir adı ("Ürün puanı"). */
-    label: string;
-    /**
-     * Puan açıklamaları. Hem ekran okuyucuya okunur hem de seçildiğinde
-     * yıldızların altında yazar. Verilmezse `labels.rating.scale`.
-     *
-     * <p>Dolu yıldız sayısı tek başına bir renk/şekil sinyali. Yanına açıklama
-     * yazmak hem anlamı netleştirir hem de renk körü kullanıcıya ikinci bir ipucu
-     * verir (WCAG 1.4.1).
-     */
-    ratingLabels?: RatingLabels;
-    /**
-     * Ekran okuyucuda yıldız sayısını okuyan biçimlendirici ("4 yıldız").
-     * Verilmezse `labels.rating.starCount`.
-     */
-    formatStarCount?: (star: number) => string;
-    isDisabled?: boolean;
-    className?: string;
-    testId?: string;
-};
-
 export declare const QuantityStepper: typeof QuantityStepper_2;
 
 /**
@@ -2195,7 +3248,7 @@ export declare const QuantityStepper: typeof QuantityStepper_2;
  * vuruşunda değil: "12" yazarken "1"i anında 1'e sabitlemek kullanıcının
  * yazmasını engellerdi.
  */
-declare const QuantityStepper_2: FC<Props_10>;
+declare const QuantityStepper_2: FC<Props_13>;
 
 export declare const Radio: typeof Radio_2;
 
@@ -2244,7 +3297,26 @@ export declare const RadioCard: typeof RadioCard_2;
  *
  * <p>{@link Radio} yalın satır içindir, gövde taşıyamaz — ikisi karışmaz.
  */
-declare const RadioCard_2: FC<Props_7>;
+declare const RadioCard_2: FC<Props_10>;
+
+declare type RangeProps = {
+    value: DateRangeValue;
+    onChange: (value: DateRangeValue) => void;
+    /** Başlangıç alanının erişilebilir adı ("Başlangıç"). ZORUNLU. */
+    startLabel: string;
+    /** Bitiş alanının erişilebilir adı ("Bitiş"). ZORUNLU. */
+    endLabel: string;
+    /** İki alanın arasındaki ayraç. Varsayılan yarım tire. */
+    separator?: string;
+    /** Ölçeğin uçları; ikisi de yerel öğeye geçer. */
+    min?: string;
+    max?: string;
+    /** Seçilen aralığın okunur özetini gösterir. */
+    isSummaryVisible?: boolean;
+    isDisabled?: boolean;
+    className?: string;
+    testId?: string;
+};
 
 export declare const RangeSlider: typeof RangeSlider_2;
 
@@ -2270,8 +3342,20 @@ export declare const RangeSlider: typeof RangeSlider_2;
  * Kaydırırken her adımda adres çubuğuna yazmak, tek bir sürüklemede onlarca
  * gezinme kaydı bırakıp geri tuşunu kullanılamaz hâle getiriyordu. Ekran anında
  * güncellenir (`onChange`), sorgu yalnızca kulp bırakılınca yazılır.
+ *
+ * <h3>Klavye</h3>
+ * <table>
+ *   <tr><td>`ArrowRight` / `ArrowUp`</td><td>bir adım artırır</td></tr>
+ *   <tr><td>`ArrowLeft` / `ArrowDown`</td><td>bir adım azaltır</td></tr>
+ *   <tr><td>`Home` / `End`</td><td>ölçeğin ucuna gider</td></tr>
+ *   <tr><td>`PageUp` / `PageDown`</td><td>büyük adım</td></tr>
+ * </table>
+ * Tamamı YEREL öğeden gelir — kütüphane hiçbir tuşu kendisi işlemez. Buraya
+ * ait olan iki şey ayrıca ölçülüyor: kulpların birbirini geçmemesi ve
+ * `onCommit`in tuş bırakıldığında (`keyup`) çalışması. Nöbetçi:
+ * `components/__tests__/keyboard.test.tsx`.
  */
-declare const RangeSlider_2: ({ min, max, step, value, onChange, onCommit, formatValue, label, minLabel, maxLabel, isDisabled, className, testId, }: Props_8) => JSX.Element;
+declare const RangeSlider_2: ({ min, max, step, value, onChange, onCommit, formatValue, label, minLabel, maxLabel, isDisabled, className, testId, }: Props_11) => JSX.Element;
 
 export declare type RangeValue = [number, number];
 
@@ -2286,7 +3370,7 @@ export declare const Rating: typeof Rating_2;
  *
  * <p>Etkileşimli kardeşi {@link RatingInput}.
  */
-declare const Rating_2: FC<Props_22>;
+declare const Rating_2: FC<Props_28>;
 
 export declare const RatingInput: typeof RatingInput_2;
 
@@ -2303,8 +3387,19 @@ export declare const RatingInput: typeof RatingInput_2;
  * <p>{@link Rating} genişletilemez: o `<span>` üretiyor ve açıkça
  * salt-gösterim. İkisini tek bileşende toplamak, gösterim tarafına hiç
  * kullanılmayan etkileşim kodu taşımak olurdu.
+ *
+ * <h3>Klavye (APG: radio group — tamamı YEREL)</h3>
+ * <table>
+ *   <tr><td>`ArrowRight` / `ArrowDown`</td><td>bir sonraki yıldız</td></tr>
+ *   <tr><td>`ArrowLeft` / `ArrowUp`</td><td>bir önceki yıldız</td></tr>
+ *   <tr><td>`Tab`</td><td>grubu TEK durak olarak geçer</td></tr>
+ * </table>
+ * Kütüphane hiçbir tuşu işlemiyor; nöbetçi bu yüzden tuşları değil DEVRİ
+ * ölçüyor — beş gerçek radyo, tek grup adı, okunabilir adlar
+ * (`components/__tests__/keyboard.test.tsx`). Yıldızlar `<span>`e dönerse
+ * test kırılır.
  */
-declare const RatingInput_2: ({ value, onChange, label, ratingLabels, formatStarCount, isDisabled, className, testId, }: Props_9) => JSX.Element;
+declare const RatingInput_2: ({ value, onChange, label, ratingLabels, formatStarCount, isDisabled, className, testId, }: Props_12) => JSX.Element;
 
 /** Beş puanın her birinin ne anlama geldiği. */
 export declare type RatingLabels = Record<1 | 2 | 3 | 4 | 5, string>;
@@ -2326,6 +3421,37 @@ declare type RowProps = HTMLAttributes<HTMLTableRowElement> & {
     isWarning?: boolean;
 };
 
+export declare const ScrollArea: typeof ScrollArea_2;
+
+/**
+ * Kaydırma kutusu — <strong>klavyeyle erişilebilir</strong> kaydırma bölgesi.
+ *
+ * <h3>Neden bir bileşen: `overflow: auto` TEK BAŞINA yetmiyor</h3>
+ * Kaydırılabilir bir bölge klavyeyle ulaşılabilir olmak zorunda (WCAG 2.1.1).
+ * İçinde odaklanabilir öğe olmayan bir kutu — uzun bir metin, bir tablo, bir
+ * kod bloğu — `tabindex` verilmediğinde klavye kullanıcısı için
+ * <strong>ulaşılamaz</strong>: `Tab` onu atlıyor ve ok tuşları sayfayı
+ * kaydırıyor, kutuyu değil. Firefox bunu kendiliğinden yapıyor, Chrome ve
+ * Safari yapmıyor.
+ *
+ * <p>Ama `tabindex="0"` KOŞULSUZ verilemez: içerik sığdığında kutu
+ * kaydırılamaz olur ve gereksiz bir `Tab` durağına dönüşür. Bileşen taşmayı
+ * ÖLÇÜYOR ve `tabindex`i yalnızca gerçekten kaydırılabilirken yazıyor.
+ *
+ * <h3>Kaydırma çubuğu temalı</h3>
+ * İşletim sisteminin açık çubuğu koyu temada kutunun kenarında parlak bir
+ * şerit bırakıyordu.
+ *
+ * <h3>Klavye</h3>
+ * <table>
+ *   <tr><td>`Tab`</td><td>kaydırılabilir bölgeye odaklanır (yalnızca taşma varsa)</td></tr>
+ *   <tr><td>ok tuşları · `PageUp`/`PageDown` · `Home`/`End`</td><td>kaydırır</td></tr>
+ * </table>
+ * Tuşların hepsi TARAYICIDAN geliyor; bileşenin işi yalnızca bölgeyi
+ * odaklanabilir kılmak.
+ */
+declare const ScrollArea_2: FC<Props_30>;
+
 declare type ScrollerProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * Çerçeve (hairline + yarıçap + yüzey). Gömülü tablolarda kapatılır: orada
@@ -2345,7 +3471,52 @@ export declare const SectionHeader: typeof SectionHeader_2;
  * İkisini birbirine bağlamak, doğru görünüm için yanlış başlık düzeyi seçmeye
  * zorlardı.
  */
-declare const SectionHeader_2: FC<Props_23>;
+declare const SectionHeader_2: FC<Props_29>;
+
+export declare const SegmentedControl: typeof SegmentedControl_2;
+
+/**
+ * Bölmeli denetim — <strong>görünüm</strong> değiştirme.
+ *
+ * <h3>{@link ChipGroup} ile farkı: filtre mi görünüm mü</h3>
+ * İkisi de `radiogroup` ve ikisi de tek seçim; ayrım seçilen şeyin ne
+ * olduğunda:
+ *
+ * <ul>
+ *   <li>`ChipGroup` bir FİLTRE. Seçim listeyi daraltıyor, seçenek sayısı
+ *       değişken ve "hiçbiri" geçerli bir durum — çipe ikinci kez basmak
+ *       seçimi kaldırıyor.</li>
+ *   <li><b>`SegmentedControl` bir GÖRÜNÜM anahtarı.</b> Liste/ızgara,
+ *       aylık/yıllık, gelen/giden. Seçenek sayısı 2-4 ve SABİT; <strong>seçili
+ *       durum her zaman tektir</strong> — "hiçbiri" diye bir hâl yok, çünkü
+ *       ekranda bir şey çizilmek zorunda.</li>
+ * </ul>
+ *
+ * <p>Bu yüzden seçili öğeye ikinci kez basmak hiçbir şey yapmaz; `ChipGroup`ta
+ * aynı hareket seçimi kaldırıyor. Aynı bileşeni iki iş için kullanmak, bu
+ * davranış farkını kaybetmek olurdu.
+ *
+ * <h3>Neden `Tabs` değil</h3>
+ * `Tabs` bir PANEL değiştirir ve `aria-controls` ile ona bağlanır; bölmeli
+ * denetim aynı içeriğin başka bir SUNUMUNU seçiyor — gösterilen veri aynı.
+ * Sekme olarak sunmak ekran okuyucuya var olmayan bir panel vaat ediyordu.
+ *
+ * <h3>Klavye (APG: radio group)</h3>
+ * <table>
+ *   <tr><td>`ArrowRight` / `ArrowDown`</td><td>sonraki seçenek; uçlarda DÖNER</td></tr>
+ *   <tr><td>`ArrowLeft` / `ArrowUp`</td><td>önceki seçenek</td></tr>
+ *   <tr><td>`Tab`</td><td>grubu TEK durak olarak geçer (dönen `tabindex`)</td></tr>
+ * </table>
+ */
+declare const SegmentedControl_2: <T extends string>({ options, value, onChange, label, isIconOnly, size, className, testId, }: Props_8<T>) => JSX.Element;
+
+export declare type SegmentOption<T extends string = string> = {
+    value: T;
+    label: string;
+    /** Yalnızca ikon gösterilecekse `label` erişilebilir ad olarak kalır. */
+    icon?: ReactNode;
+    isDisabled?: boolean;
+};
 
 export declare const Select: typeof Select_2;
 
@@ -2370,11 +3541,22 @@ export declare const Select: typeof Select_2;
  * Seçenekleri tek tek odaklanabilir yapmak, aynı bileşende iki ayrı klavye
  * modeli demekti (APG: listbox + activedescendant).
  *
+ * <table>
+ *   <tr><td>`ArrowDown`/`ArrowUp`/`Enter`/`Space` (kapalıyken)</td><td>paneli açar</td></tr>
+ *   <tr><td>`ArrowDown` / `ArrowUp`</td><td>etkin seçenek bir alt/üst; uçlarda DÖNER</td></tr>
+ *   <tr><td>`Home` / `End`</td><td>ilk / son seçenek</td></tr>
+ *   <tr><td>`Enter` / `Space`</td><td>etkin seçeneği seçer</td></tr>
+ *   <tr><td>`Escape`</td><td>seçim yapmadan kapatır, odak tetikleyicide</td></tr>
+ *   <tr><td>`Tab`</td><td>kapatır, gezinme sürer</td></tr>
+ * </table>
+ * Etkin seçenek açılışta SEÇİLİ olandan başlar. Nöbetçi:
+ * `components/__tests__/keyboard.test.tsx`.
+ *
  * <h3>20+ seçenek varsa bu bileşen DEĞİL</h3>
  * Aramasız bir liste 20 satırdan sonra taranamaz hâle gelir; orada
  * {@link Combobox} kullanılır.
  */
-declare const Select_2: <T extends string>({ options, value, onChange, label, placeholder, closeLabel, icon, size, align, isDisabled, id, className, testId, "aria-describedby": describedBy, "aria-invalid": isInvalid, }: Props_6<T>) => JSX.Element;
+declare const Select_2: <T extends string>({ options, value, onChange, label, placeholder, closeLabel, icon, size, align, isDisabled, id, className, testId, "aria-describedby": describedBy, "aria-invalid": isInvalid, }: Props_9<T>) => JSX.Element;
 
 export declare type SelectOption<T extends string = string> = {
     value: T;
@@ -2382,6 +3564,12 @@ export declare type SelectOption<T extends string = string> = {
     isDisabled?: boolean;
 };
 
+declare type ShapeProps = {
+    /** Kaç kopya çizilecek — bir listenin bilinen satır sayısı. */
+    count?: number;
+    className?: string;
+};
+
 declare type SingleProps<T extends string> = BaseProps<T> & {
     isMultiple?: false;
     value: T | null;
@@ -2402,7 +3590,15 @@ export declare const Skeleton: typeof Skeleton_2;
  * <p>`aria-hidden`: ekran okuyucuya "yükleniyor" bilgisini veren, iskeletin
  * kendisi değil onu saran bölgenin `aria-busy` özelliğidir.
  */
-declare const Skeleton_2: FC<Props_24>;
+declare const Skeleton_2: FC<Props_31>;
+
+export declare const SkeletonCard: NamedExoticComponent<ShapeProps>;
+
+export declare const SkeletonRows: NamedExoticComponent<ShapeProps>;
+
+export declare const SkeletonTable: NamedExoticComponent<ShapeProps & {
+columns?: number;
+}>;
 
 export declare const Spinner: typeof Spinner_2;
 
@@ -2413,7 +3609,137 @@ export declare const Spinner: typeof Spinner_2;
  * bilinmeyen</em> bir bekleme için — düğme içi işlem veya belirsiz süreli bir
  * sorgu gibi.
  */
-declare const Spinner_2: FC<Props_25>;
+declare const Spinner_2: FC<Props_34>;
+
+export declare const Stat: typeof Stat_2;
+
+/**
+ * Ölçüm kutusu (KPI).
+ *
+ * <h3>Bileşen HESAP YAPMAZ</h3>
+ * `value` ve `delta` biçimlendirilmiş dizeler. Yüzde hesabı, para birimi ve
+ * yuvarlama çağıranın: bir gösterge panelinde "%12,5" ile "%13" arasındaki
+ * farkı belirleyen şey ürün kararı, bileşenin varsayılanı değil. Aynı sebeple
+ * `Price` de hesap yapmıyor.
+ *
+ * <h3>Yön TEK BAŞINA iyi/kötü demek DEĞİL</h3>
+ * "İade oranı %12 arttı" kötü haber, "ciro %12 arttı" iyi. Yükselen her oku
+ * yeşile boyamak, kötüleşen bir ölçüyü iyi gibi gösteriyordu — `isUpPositive`
+ * bu kararı çağırana bırakıyor.
+ *
+ * <h3>Renk tek sinyal değil</h3>
+ * Değişim üç şeyle birden anlatılıyor: <strong>ok yönü</strong> (biçim),
+ * <strong>renk</strong> ve ekran okuyucuya okunan <strong>metin</strong>
+ * ("artış" / "azalış" / "değişim yok"). Yalnızca renk kullanılsaydı renk körü
+ * bir kullanıcı için artışla azalış aynı görünüyordu (WCAG 1.4.1).
+ *
+ * <h3>Rakamlar TABULAR</h3>
+ * Alt alta duran ölçüm kutularında orantılı rakamlar sütunu tırtıklı
+ * gösteriyor; `tabular-nums` her basamağı aynı genişlikte çiziyor.
+ */
+declare const Stat_2: FC<Props_32>;
+
+/** Değişimin yönü. `flat` "değişmedi" — yokluk DEĞİL. */
+export declare type StatTrend = 'up' | 'down' | 'flat';
+
+export declare type StepItem = {
+    id: string;
+    label: string;
+    /** Etiketin altındaki bir cümlelik açıklama. */
+    description?: ReactNode;
+};
+
+export declare const Steps: typeof Steps_2;
+
+/**
+ * Adım göstergesi (stepper) — çok adımlı akışta NEREDE olunduğu.
+ *
+ * <h3>Üç durum, ÜÇ AYRI işaret</h3>
+ * Tamamlanan adım <strong>tik</strong>, bulunulan adım <strong>dolu
+ * madalyon + sıra numarası</strong>, sıradaki adım <strong>boş
+ * madalyon</strong> taşıyor. Renk bunlara EŞLİK ediyor, tek başına
+ * anlatmıyor (WCAG 1.4.1): üçünü yalnızca renkle ayırmak, renk körü bir
+ * kullanıcı için "üç aynı daire" demekti.
+ *
+ * <p>Durum ayrıca METİN olarak okunuyor — her adımın erişilebilir adına
+ * "tamamlandı" / "şu anki adım" / "sıradaki" ekleniyor. Görsel işaret ekran
+ * okuyucuya geçmiyor; `aria-current` tek başına yalnızca BULUNULAN adımı
+ * söylüyor, tamamlananları değil.
+ *
+ * <h3>Geri dönülebilirlik AÇIKÇA bildirilir</h3>
+ * `onStepClick` verilmediğinde adımlar `<button>` bile değil: tıklanabilir
+ * görünüp hiçbir şey yapmayan bir adım, kullanıcıya var olmayan bir yol vaat
+ * ediyordu. Verildiğinde yalnızca TAMAMLANMIŞ adımlar tıklanabilir — ileri
+ * atlamak, atlanan adımın verisini toplamadan devam etmek demek.
+ *
+ * <h3>Klavye</h3>
+ * <table>
+ *   <tr><td>`Tab`</td><td>tıklanabilir adımlar arasında gezinir</td></tr>
+ *   <tr><td>`Enter` / `Space`</td><td>adıma döner</td></tr>
+ * </table>
+ * Ok tuşu YOK: adımlar bir seçim listesi değil, her biri bağımsız bir
+ * gezinme bağlantısı.
+ */
+declare const Steps_2: FC<Props_36>;
+
+export declare const Switch: typeof Switch_2;
+
+/**
+ * Anahtar (switch) — <strong>anında</strong> uygulanan aç/kapa.
+ *
+ * <h3>`Checkbox` ile farkı: NE ZAMAN etkili olduğu</h3>
+ * İkisi de iki durumlu ve ikisi de yerel `<input type="checkbox">` üzerine
+ * kurulu; ayrım görünüşte değil ZAMANLAMADA:
+ *
+ * <ul>
+ *   <li>{@link Checkbox} bir formda <strong>gönderilecek</strong> seçimdir.
+ *       "Sözleşmeyi okudum" işaretlendiğinde hiçbir şey olmaz; karar
+ *       "Kaydet"e basıldığında geçerli olur. Geri almak için işareti kaldırıp
+ *       yeniden göndermek gerekir.</li>
+ *   <li><b>`Switch` ANINDA uygulanır.</b> "Kampanya bildirimleri" açıldığı
+ *       anda sunucuya gider. Kaydet düğmesi yoktur, olmamalıdır da —
+ *       kullanıcı anahtarı çevirdikten sonra bir düğme aramak zorunda
+ *       kalıyordu.</li>
+ * </ul>
+ *
+ * <p>Ayrım keyfi değil ekran okuyucuda DUYULUYOR: `role="switch"` "açık/kapalı"
+ * diye okunur, onay kutusu "işaretli/işaretsiz" diye. İkisi kullanıcıya farklı
+ * bir söz veriyor.
+ *
+ * <h3>Yerel öğe korunur</h3>
+ * `<input type="checkbox" role="switch">` — `Space` ile değiştirme, `Tab`
+ * sırası, form gönderimine katılma ve `:disabled` semantiği tarayıcıdan gelir.
+ * `<div role="switch" tabindex="0">` yazmak bunların hepsini elle yeniden
+ * kurmak demekti.
+ *
+ * <h3>Durum RENKLE ANLATILMAZ</h3>
+ * Açık ve kapalı hâl arasındaki fark yalnızca zemin rengi olsaydı renk körü
+ * bir kullanıcı için iki durum aynı görünürdü (WCAG 1.4.1). Kulp KONUM
+ * değiştiriyor — bu bir biçim farkı — ve zorlanmış renk kipinde çerçeve +
+ * konum tek başına yeterli kalıyor.
+ *
+ * <h3>Klavye</h3>
+ * <table>
+ *   <tr><td>`Space`</td><td>durumu değiştirir</td></tr>
+ * </table>
+ *
+ * @example
+ * <Switch
+ *   label="Kampanya bildirimleri"
+ *   hint="E-posta ile ayda en fazla iki ileti"
+ *   checked={isSubscribed}
+ *   onChange={event => subscribe(event.target.checked)}
+ * />
+ */
+declare const Switch_2: ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "role" | "type"> & {
+/** Anahtarın görünür etiketi. */
+label: ReactNode;
+/** Etiketin altındaki açıklama; `aria-describedby` ile bağlanır. */
+hint?: string;
+/** Etiket anahtarın SOLUNDA durur — ayar listelerinin yaygın düzeni. */
+isLabelFirst?: boolean;
+testId?: string;
+} & RefAttributes<HTMLInputElement>>;
 
 export declare type TabItem = {
     id: string;
@@ -2443,7 +3769,7 @@ export declare const Table: typeof Table_2;
  * <p>Operasyon ekranlarının durum satırlı (yükleniyor/hata/boş) sürümü için
  * {@link DataTable}.
  */
-declare const Table_2: FC<Props_32>;
+declare const Table_2: FC<Props_46>;
 
 export declare const TableCheckbox: typeof TableCheckbox_2;
 
@@ -2458,6 +3784,13 @@ export declare const TableCheckbox: typeof TableCheckbox_2;
  *
  * <p>Renk `Checkbox` ile aynı kaynaktan: `accent-color` mavi — onay kutusu bir
  * seçimdir, bir dönüşüm değil.
+ *
+ * <h3>Klavye</h3>
+ * <table>
+ *   <tr><td>`Space`</td><td>seçimi değiştirir</td></tr>
+ * </table>
+ * Yerel öğe: `Space`, `indeterminate` durumu ve form gönderimine katılma
+ * platformdan gelir. Nöbetçi: `components/__tests__/keyboard.test.tsx`.
  */
 declare const TableCheckbox_2: ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-label"> & {
 /**
@@ -2507,8 +3840,52 @@ export declare const Tabs: typeof Tabs_2;
  *   <li><b>Kontrollü + panelsiz</b> — `activeId` + `onChange` verilir,
  *       `content` verilmez; bileşen yalnızca çubuğu çizer.</li>
  * </ul>
+ *
+ * <h3>Klavye (APG: tabs, OTOMATİK etkinleştirme)</h3>
+ * <table>
+ *   <tr><td>`ArrowRight` / `ArrowLeft`</td><td>sonraki / önceki sekme; uçlarda DÖNER</td></tr>
+ *   <tr><td>`Tab`</td><td>çubuktan panele çıkar — çubuk TEK durak</td></tr>
+ * </table>
+ * Ok tuşu odakla birlikte seçimi de taşır (otomatik etkinleştirme). Panel
+ * içeriği hazır ve ucuz olduğu sürece APG'nin önerdiği budur; her sekmesi bir
+ * istek atan pahalı bir panelde `isManualActivation` verilir — orada otomatik
+ * etkinleştirme, kullanıcı beşinci sekmeye giderken dört istek atıyordu.
+ * Nöbetçi: `components/__tests__/keyboard.test.tsx`.
+ */
+declare const Tabs_2: FC<Props_37>;
+
+export declare const TagInput: typeof TagInput_2;
+
+/**
+ * Etiket girdisi — yazılan metni kaldırılabilir çiplere çevirir.
+ *
+ * <h3>Yerel `<input>` KORUNUR</h3>
+ * Yazma, panodan yapıştırma, mobil klavye ve `Tab` sırası tarayıcıdan geliyor.
+ * Çipler girdinin İÇİNDE görünüyor ama DOM'da kardeşi: `<input>` çocuk
+ * alamıyor ve çipleri içine koymanın tek yolu girdiyi taklit etmekti.
+ *
+ * <h3>Neden {@link Combobox} değil</h3>
+ * `Combobox` BİLİNEN bir listeden seçtiriyor; burada değer serbest — kullanıcı
+ * listede olmayan bir şey yazıyor (arama terimi, OEM kodu, e-posta). Seçilecek
+ * bir liste varsa `Combobox` doğrusu.
+ *
+ * <h3>Yinelenen değer sessizce YUTULMAZ</h3>
+ * Aynı etiket ikinci kez yazıldığında eklenmiyor ama girdi de temizleniyor;
+ * kullanıcı "yazdım, kayboldu" diyordu. Artık var olan çip bir kare
+ * vurgulanıyor ve ekran okuyucuya "zaten ekli" duyuruluyor.
+ *
+ * <h3>Klavye</h3>
+ * <table>
+ *   <tr><td>`Enter` / `,`</td><td>yazılanı etikete çevirir</td></tr>
+ *   <tr><td>`Backspace` (girdi BOŞken)</td><td>SON etiketi kaldırır</td></tr>
+ *   <tr><td>`Tab`</td><td>girdiden çıkar — yazılan metin de etikete DÖNER</td></tr>
+ *   <tr><td>çipin çarpısı</td><td>o etiketi kaldırır</td></tr>
+ * </table>
+ * `Tab`ta yazılanın etikete dönmesi bilinçli: yarım kalmış bir metin alanı
+ * terk edildiğinde kayboluyordu ve kullanıcı bunu ancak gönderdikten sonra
+ * fark ediyordu.
  */
-declare const Tabs_2: FC<Props_26>;
+declare const TagInput_2: ({ values, onChange, label, placeholder, removeLabel, separators, maxTags, isDisabled, id, className, testId, "aria-describedby": describedBy, "aria-invalid": isInvalid, }: Props_14) => JSX.Element;
 
 export declare const Textarea: typeof Textarea_2;
 
@@ -2521,8 +3898,33 @@ export declare const Textarea: typeof Textarea_2;
  *
  * <p>Yeniden boyutlandırma yalnızca <strong>dikey</strong>: yatayda büyütmek
  * alanı kapsayıcısının dışına taşırıp yerleşimi bozuyordu.
+ *
+ * <h3>Otomatik yükseklik neden CSS ile değil</h3>
+ * `field-sizing: content` bu işi tek satırda yapıyor ama bugün yalnızca
+ * Chromium'da var. Ölçüm yolu her yerde çalışıyor ve tarayıcı desteği
+ * geldiğinde tek dosyada değiştirilecek.
  */
 declare const Textarea_2: ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
+/**
+* Alan içeriğiyle birlikte BÜYÜR — kaydırma çubuğu yerine yükseklik.
+*
+* <p>Sabit yükseklikli bir alanda kullanıcı yazdığının tamamını göremiyor:
+* dört satırlık bir kutuya on satır yazan kişi, gönderdiğinde ne yazdığını
+* kontrol etmek için kutunun içinde kaydırmak zorunda kalıyordu. `maxRows`
+* ile tavan konur; ötesinde kaydırma geri döner (sayfa boyunca uzayan bir
+* alan, altındaki gönder düğmesini ekrandan çıkarıyordu).
+*/
+isAutoSize?: boolean;
+/** Otomatik büyümenin tavanı (satır). */
+maxRows?: number;
+/**
+* Kalan karakter sayacını gösterir. `maxLength` ile birlikte anlamlı.
+*
+* <p>Sayaç `aria-hidden`: aynı bilgi her tuşta duyurulsaydı yazma
+* kesintiye uğrardı. Sınıra YAKLAŞILDIĞINDA (son %10) sayaç uyarı tonuna
+* geçiyor — sınıra çarpıp yazamamak, yaklaştığını görmemekten kötü.
+*/
+hasCounter?: boolean;
 testId?: string;
 } & RefAttributes<HTMLTextAreaElement>>;
 
@@ -2548,8 +3950,20 @@ export declare const TextLink: typeof TextLink_2;
 declare const TextLink_2: ({ href, children, hasArrow, tone, size, className, linkProps, ...rest }: Props_2) => JSX.Element;
 
 declare type ThemeState = {
+    /**
+     * ÇÖZÜLMÜŞ tema — ekranda çizili olan. `preference` `system` iken bu alan
+     * işletim sisteminin o anki tercihini taşır.
+     */
     scheme: HanuiColorScheme;
-    setScheme: (scheme: HanuiColorScheme) => void;
+    /**
+     * Kullanıcının SEÇİMİ. Üç durumlu bir tema anahtarı (Açık / Koyu / Sistem)
+     * bunu okur; `scheme` okunsaydı "Sistem" seçiliyken düğme "Koyu"yu işaretli
+     * gösterirdi.
+     */
+    preference: HanuiColorPreference;
+    /** `'system'` verildiğinde AÇIK seçim silinir ve sistem tercihi izlenir. */
+    setScheme: (preference: HanuiColorPreference) => void;
+    /** Açık ↔ koyu. `system` iken ÇÖZÜLMÜŞ değerin tersine geçer. */
     toggle: () => void;
     /**
      * Sunucu çıktısında ve hidrasyondan önceki ilk karede `false`.
@@ -2582,7 +3996,113 @@ export declare const Tile: typeof Tile_2;
  * "1.248 ürün" cümlesi hem sayı biçimine hem dile bağlı. Bileşen içinde
  * `toLocaleString` çağırmak, o kararı kütüphanenin varsayımına bağlıyordu.
  */
-declare const Tile_2: ({ label, icon, href, meta, isActive, linkProps, className, testId }: Props_27) => JSX.Element;
+declare const Tile_2: ({ label, icon, href, meta, isActive, linkProps, className, testId }: Props_38) => JSX.Element;
+
+export declare const Timeline: typeof Timeline_2;
+
+/**
+ * Zaman çizelgesi — sipariş durumu, işlem geçmişi.
+ *
+ * <h3>{@link Steps} ile farkı: ileri mi geri mi bakıyor</h3>
+ * İkisi de sıralı ve durumlu; ayrım yönlerinde:
+ *
+ * <ul>
+ *   <li>`Steps` İLERİ bakar: kullanıcı bir akışın içinde ve kalan adımları
+ *       görüyor. Adım sayısı sabit, adımlara dönülebilir.</li>
+ *   <li><b>`Timeline` GERİ bakar:</b> olmuş şeylerin kaydı. Olay sayısı
+ *       değişken, hiçbiri tıklanabilir değil ve <strong>başarısız</strong>
+ *       diye bir durum var — bir adım "başarısız" olamaz, akış orada durur;
+ *       bir olay olabilir ve kayıtta kalır.</li>
+ * </ul>
+ *
+ * <h3>Zaman biçimlendirmesi ÇAĞIRANIN</h3>
+ * `time` biçimlendirilmiş bir dize. Kütüphane `Intl` çağırsaydı yerel ayarı
+ * ve "3 saat önce" mi "14:32" mi yazılacağını kendisi seçmiş olurdu — ikisi
+ * de bağlama bağlı kararlar.
+ *
+ * <h3>Durum renkle DEĞİL, üç şeyle birden</h3>
+ * İşaretin <strong>biçimi</strong> (dolu / halka / tik / çarpı), rengi ve
+ * ekran okuyucuya okunan <strong>metni</strong>. Yalnızca renk kullanılsaydı
+ * "tamamlandı" ile "başarısız" renk körü bir kullanıcı için aynı daireydi.
+ */
+declare const Timeline_2: FC<Props_39>;
+
+export declare type TimelineEvent = {
+    id: string;
+    title: string;
+    /** Zaman damgası — BİÇİMLENDİRİLMİŞ dize. Bileşen tarih biçimlendirmez. */
+    time?: string;
+    description?: ReactNode;
+    status?: TimelineStatus;
+    /** Varsayılan işaretin yerine geçen ikon. */
+    icon?: ReactNode;
+};
+
+/** Bir olayın durumu. `pending` HENÜZ olmadı — başarısız değil. */
+export declare type TimelineStatus = 'done' | 'current' | 'pending' | 'failed';
+
+/**
+ * BİLDİRİM SÖZLEŞMESİ — süre, ikon ve renk kararları TEK YERDE.
+ *
+ * <h3>Neden harici bir kütüphaneye sarmalayıcı DEĞİL</h3>
+ * Tüketici `react-hot-toast` taşıyordu ve gövdeyi kendi yazmak zorunda
+ * kalmıştı: kütüphanenin goober sınıfı bizim modül sınıfımızla AYNI
+ * özgüllükteydi ve kazananı kaynak sırası belirliyordu — aynı bildirim
+ * geliştirmede ve üretimde İKİ FARKLI RENKTE çıkıyordu. Bir sarmalayıcı bu
+ * sorunu çözmez, erteler.
+ *
+ * @example
+ * toast.success('Adres kaydedildi');
+ * toast.error('Kart reddedildi', { action: { label: 'Yeniden dene', onClick: retry } });
+ */
+export declare const toast: {
+    show: (message: string, options?: ToastOptions) => number;
+    info: (message: string, options?: ToastOptions) => number;
+    success: (message: string, options?: ToastOptions) => number;
+    warning: (message: string, options?: ToastOptions) => number;
+    error: (message: string, options?: ToastOptions) => number;
+    dismiss: (id: number) => void;
+    /** Tümünü kapatır — sayfa geçişinde bayat bildirim taşınmasın. */
+    clear: () => void;
+};
+
+export declare const ToastHub: typeof ToastHub_2;
+
+/**
+ * Bildirim yığını — uygulamada <strong>BİR KEZ</strong> çizilir.
+ *
+ * <h3>Neden tek yığın</h3>
+ * Birden fazla canlı bölge, ekran okuyucuların duyuruları birleştirip sırayla
+ * okumasına ya da tamamen atlamasına yol açıyor. Yığın kök yerleşimde bir kez
+ * durur; `toast.*` çağrıları React ağacının dışından da çalışır.
+ *
+ * <h3>Duyuru bölgesi HER ZAMAN DOM'da</h3>
+ * Kapsayıcı bildirim yokken de çiziliyor. Sonradan DOM'a eklenen bir canlı
+ * bölgenin ilk duyurusu güvenilmez — ekran okuyucu bölgeyi izlemeye
+ * başlamadan içerik gelmiş oluyor.
+ *
+ * <h3>Klavye</h3>
+ * <table>
+ *   <tr><td>`Tab`</td><td>bildirimin eylemine ve kapatma düğmesine ulaşır</td></tr>
+ *   <tr><td>odak/hover</td><td>kapanma sayacını DURDURUR</td></tr>
+ * </table>
+ */
+declare const ToastHub_2: ({ closeLabel, className }: HubProps) => ReactPortal | null;
+
+export declare type ToastOptions = {
+    tone?: ToastTone;
+    /** Görüntülenme süresi (ms). `0` → kendiliğinden kapanmaz. */
+    duration?: number;
+    /** Başlığın altındaki bir cümlelik ayrıntı. */
+    description?: ReactNode;
+    /** Bildirimin içindeki tek eylem ("Geri al"). */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+};
+
+export declare type ToastTone = 'info' | 'success' | 'warning' | 'danger';
 
 export declare const Tooltip: typeof Tooltip_2;
 
@@ -2595,19 +4115,41 @@ export declare const Tooltip: typeof Tooltip_2;
  * bir arayüzde "üzerine gelince açıklama çıkar" demek, kullanıcıların çoğu
  * için açıklamanın hiç olmaması demek.
  *
+ * <h3>Balon PORTAL ile gövdede</h3>
+ * Önce tetikleyicinin içinde `position: absolute` ile duruyordu ve üç yerde
+ * birden bozuluyordu: `overflow: hidden` taşıyan bir kapsayıcının içinde
+ * (kart, tablo hücresi, `Panel`) KIRPILIYOR, ekranın kenarında görünüm
+ * alanının dışına TAŞIYOR, `transform` taşıyan bir atanın altında yığılma
+ * bağlamına HAPSOLUYORDU. Konum artık `usePositioning` ile ölçülüyor;
+ * gerekçenin tamamı orada.
+ *
  * <h3>Neden yalnızca AÇIKLAMA taşır</h3>
  * Balonda <em>yalnızca</em> yardımcı metin durur — bağlantı, düğme veya
- * okunması zorunlu bir bilgi değil. İpucu klavyeyle odaklanınca ve fareyle
- * üzerine gelince açılıyor; içine bir eylem konsaydı ona erişmenin yolu
- * olmazdı (fare balona giderken tetikleyiciden çıkıyor). Kalıcı olması
- * gereken metin için `Field`ın `hint`i kullanılır.
- *
- * <h3>Erişilebilirlik</h3>
- * Tetikleyici `aria-describedby` ile balona bağlanır — ekran okuyucu öğenin
- * adını okuduktan sonra açıklamayı da okur. Balon `role="tooltip"`. `Escape`
- * kapatır: klavye kullanıcısı ipucunu kapatabilmeli.
+ * okunması zorunlu bir bilgi değil. İçine bir eylem konsaydı ona erişmenin
+ * yolu olmazdı: balon `pointer-events: none` ve klavyeyle içine girilemiyor.
+ * Eylem taşıyan yüzey `Popover`ın işi; kalıcı olması gereken metin `Field`ın
+ * `hint`i.
+ *
+ * <h3>Dokunmatik: uzun basma</h3>
+ * Dokunmatikte `hover` yok — ipucu orada hiç açılmıyordu. Uzun basma balonu
+ * açar; ekranın herhangi bir yerine dokunmak kapatır. Bağlam menüsü
+ * bastırılır: uzun basmada iOS'ta seçim büyüteci, Android'de kopyala menüsü
+ * çıkıyor ve ikisi de balonun üstüne biniyordu.
+ *
+ * <h3>Kapanma toleransı</h3>
+ * İmleç tetikleyiciden çıkar çıkmaz kapatmak, balonun kendisine ulaşmayı
+ * imkânsız kılıyordu (metin seçilemiyor). Kapanış {@link CLOSE_DELAY} kadar
+ * bekletilir ve bu sürede balona giren imleç onu açık tutar.
+ *
+ * <h3>Klavye</h3>
+ * <table>
+ *   <tr><td>`Tab`</td><td>tetikleyiciye gelince GECİKMESİZ açılır</td></tr>
+ *   <tr><td>`Escape`</td><td>kapatır; odak tetikleyicide kalır</td></tr>
+ * </table>
+ * Gecikme fare için var; Tab ile gelen kullanıcı zaten bilinçli olarak orada
+ * duruyor.
  */
-declare const Tooltip_2: FC<Props_3>;
+declare const Tooltip_2: ({ content, children, side, position, openDelay, className }: Props_3) => JSX.Element;
 
 /**
  * Ölçü basamakları.
@@ -2676,6 +4218,23 @@ export declare enum UIVariant {
     DANGER = "DANGER"
 }
 
+export declare type UploadFile = {
+    id: string;
+    name: string;
+    /** Bayt. Ekranda okunur biçime çevrilir. */
+    size: number;
+    /** 0-100. `undefined` → yükleme başlamadı ya da bitti. */
+    progress?: number;
+    /** Bu dosyaya ait hata. Satır kırmızı çizilir ve metin okunur. */
+    error?: string;
+};
+
+/**
+ * Duyuru fonksiyonu döndürür. Referans SABİT: bağımlılık dizisine güvenle
+ * konur, her render'da yeni bir kapanış üretip etkileri tetiklemez.
+ */
+export declare const useAnnounce: () => ((message: string, politeness?: AnnouncePoliteness) => void);
+
 /**
  * Sağlayıcı ZORUNLU DEĞİL.
  *
@@ -2711,6 +4270,92 @@ export declare const useHanui: () => HanuiContextValue;
  */
 export declare const useHanuiTheme: () => ThemeState;
 
+/**
+ * LISTBOX KLAVYE GEZİNMESİ — `Select` ve `Combobox`ın ortak modeli.
+ *
+ * <h3>Neden bir kanca</h3>
+ * İki bileşen aynı klavye modelini <strong>kopya kod</strong> olarak
+ * taşıyordu: `ArrowDown`/`ArrowUp` uçlarda dönme, `Home`/`End`, `Enter` ile
+ * seçme, `Escape` ile kapatma, `Tab` ile kapatıp gezinmeye devam etme ve
+ * etkin seçeneği görünür alanda tutma. Altı davranış, iki yerde. Kopya kod
+ * ayrışmaya açık ve ayrışma sessiz: bir bileşende `Home` çalışıp diğerinde
+ * çalışmadığında hiçbir test kırılmıyordu — ikisinin de kendi testi vardı ve
+ * ikisi de kendi davranışını doğruluyordu.
+ *
+ * <p>Kanca yalnızca <strong>gezinmeyi</strong> taşıyor. Açılma kararı (panel
+ * mi alt sayfa mı), filtreleme ve seçim sözleşmesi (`value`/`onChange`) hâlâ
+ * bileşenlerin: ikisi orada gerçekten farklı ve tek bir kancaya toplamak
+ * `Select`e hiç kullanmayacağı arama koduna taşıtırdı.
+ *
+ * <h3>Klavye</h3>
+ * <table>
+ *   <tr><td>`ArrowDown` / `ArrowUp`</td><td>etkin seçenek; uçlarda DÖNER</td></tr>
+ *   <tr><td>`Home` / `End`</td><td>ilk / son</td></tr>
+ *   <tr><td>`Enter` / `Space`</td><td>etkin seçeneği seçer</td></tr>
+ *   <tr><td>`Escape`</td><td>kapatır</td></tr>
+ *   <tr><td>`Tab`</td><td>kapatır, gezinme SÜRER (`preventDefault` yok)</td></tr>
+ * </table>
+ *
+ * <p>`Space` yalnızca `hasSpaceSelect` ile: `Combobox`ın arama kutusunda boşluk
+ * bir KARAKTER ve onu seçime çevirmek "fren balatası" yazmayı imkânsız
+ * kılıyordu.
+ */
+export declare const useListboxNavigation: <T extends HTMLElement = HTMLElement>({ count, isOpen, initialIndex, onSelect, onClose }: ListboxNavigationOptions, { hasSpaceSelect }?: {
+    hasSpaceSelect?: boolean | undefined;
+}) => ListboxNavigation<T>;
+
+/**
+ * ÇARPIŞMAYA DUYARLI KONUMLANDIRMA — `Tooltip`, `Popover`, `Menu` ve açılır
+ * listelerin ortak temeli.
+ *
+ * <h3>Neden var: `position: absolute` yetmiyordu</h3>
+ * `Tooltip` balonu tetikleyicinin içinde, `position: absolute` ile duruyordu.
+ * Üç somut sonucu vardı:
+ *
+ * <ul>
+ *   <li><b>Kırpılma.</b> `overflow: hidden` taşıyan her kapsayıcı (kart,
+ *       tablo kaydırma kutusu, `Panel`) balonu kesiyordu. Bir tablo hücresinde
+ *       ipucu görünmüyordu — hiç.</li>
+ *   <li><b>Taşma.</b> Ekranın sağ kenarındaki bir tetikleyicinin balonu
+ *       görünüm alanının dışına çıkıyor, yatay kaydırma açıyordu.</li>
+ *   <li><b>Yığılma bağlamı.</b> `transform` taşıyan bir ata (`Card` hover
+ *       animasyonu) yeni bir yığılma bağlamı açıyor ve `z-index` orada
+ *       hapsoluyordu; balon kendi kartının altında kalıyordu.</li>
+ * </ul>
+ *
+ * <p>Çözüm portal + `position: fixed`: yüzey gövdeye taşınır, koordinat
+ * görünüm alanına göre hesaplanır. Kırpılacak bir kapsayıcı ve yarışılacak bir
+ * yığılma bağlamı kalmaz.
+ *
+ * <h3>Neden yeni bir bağımlılık YOK</h3>
+ * `floating-ui` bu işi yapıyor ve iyi yapıyor; ama paketin tek çalışma zamanı
+ * bağımlılığının ikon seti olması bilinçli bir karar (bkz. README). Burada
+ * ihtiyaç duyulan şey o kütüphanenin küçük bir alt kümesi: bir kenar, bir
+ * hizalama ve karşıt kenara düşme. Ok konumlandırma, otomatik yerleşim
+ * (`autoPlacement`), sanal öğe ve middleware zinciri gerekmiyor — ve
+ * gerektiğinde eklenecek yer burası.
+ *
+ * <h3>CSS Anchor Positioning neden kullanılmıyor</h3>
+ * Denendi ve BUGÜN kullanılamıyor: `anchor-name` / `position-anchor` yalnızca
+ * Chromium'da var (Safari ve Firefox'ta bayrak arkasında bile değil). İki
+ * kod yolu tutmak — biri modern tarayıcıda, biri yedekte — konumlandırmayı iki
+ * kez yazmak ve ikisinin ayrışmasını beklemek demek. Ölçüm tabanlı yol her
+ * yerde çalışıyor; tarayıcı desteği geldiğinde geçiş TEK dosyada.
+ *
+ * <h3>Ölçüm ne zaman yenileniyor</h3>
+ * Açılışta, pencere yeniden boyutlandığında ve <em>herhangi bir atanın</em>
+ * kaydırılmasında. Sonuncusu için `capture: true` ile belge düzeyinde tek bir
+ * dinleyici: kaydırma olayı baloncuklanmıyor ve her ata için ayrı dinleyici
+ * kurmak, derin bir ağaçta onlarca dinleyici demekti.
+ */
+export declare const usePositioning: (anchorRef: {
+    current: HTMLElement | null;
+}, surfaceRef: {
+    current: HTMLElement | null;
+}, { side, align, offset, padding, isOpen }: PositioningOptions) => PositioningState;
+
+export declare const useScrollLock: (isLocked?: boolean) => void;
+
 /**
  * Alt sayfayi <strong>gorunen</strong> alana yaslar.
  *
@@ -2738,4 +4383,57 @@ export declare const useHanuiTheme: () => ThemeState;
  */
 export declare const useSheetViewport: (isActive?: boolean) => void;
 
+/**
+ * SANALLAŞTIRMA — yalnızca görünen satırları çiz.
+ *
+ * <h3>Ölçülen sorun</h3>
+ * 1121 markalı bir `Combobox` listesinde DOM 1121 satır taşıyordu. Panel
+ * açılışı mobilde gözle görülür şekilde donuyor, her tuş vuruşunda liste
+ * yeniden çiziliyordu. Ekran okuyucu tarafında da bedeli var: 1121 öğelik bir
+ * `listbox`ta gezinmek pratikte imkânsız.
+ *
+ * <h3>Neden kütüphane içinde</h3>
+ * `react-window` / `@tanstack/virtual` bu işi yapıyor ve iyi yapıyor; ama
+ * paketin tek çalışma zamanı bağımlılığının ikon seti olması bilinçli bir
+ * karar. Burada gereken şey o kütüphanelerin küçük bir alt kümesi: SABİT
+ * yükseklikli satırlar, tek eksen, yatay yok, değişken yükseklik yok.
+ *
+ * <h3>SABİT satır yüksekliği — ve bu bir kısıt</h3>
+ * Değişken yükseklikli sanallaştırma her satırın ölçülmesini ve bir konum
+ * haritası tutulmasını gerektiriyor. Açılır liste satırları zaten sabit
+ * yükseklikte (`min-height` + tek satır metin); ikincil satır taşıyan
+ * seçeneklerde ölçü `rowHeight` ile verilir.
+ *
+ * <h3>`overscan` neden var</h3>
+ * Yalnızca görünen satırlar çizilseydi hızlı kaydırmada alt kenarda bir kare
+ * boyunca boşluk görünüyordu — tarayıcı kaydırma olayını boyamadan sonra
+ * veriyor. Görünür alanın üstüne ve altına birkaç satır fazladan çizilir.
+ *
+ * <h3>Klavye gezinmesiyle ilişkisi</h3>
+ * Etkin seçeneği görünür tutan `scrollIntoView`, o seçenek ÇİZİLMEMİŞSE
+ * çalışmaz. `scrollToIndex` bu yüzden var: klavyeyle listenin dibine giden
+ * kullanıcı için konum önce hesaplanır, satır sonra çizilir.
+ */
+export declare const useVirtualList: (count: number, { rowHeight, overscan, isEnabled }?: {
+    rowHeight?: number | undefined;
+    overscan?: number | undefined;
+    isEnabled?: boolean | undefined;
+}) => {
+    scrollRef: RefObject<HTMLElement | null>;
+    range: VirtualRange;
+    scrollToIndex: (index: number) => void;
+    measure: () => void;
+};
+
+export declare type VirtualRange = {
+    /** Çizilecek ilk öğenin dizini. */
+    start: number;
+    /** Çizilecek son öğenin dizini (dahil DEĞİL). */
+    end: number;
+    /** Listenin gerçek toplam yüksekliği — kaydırma çubuğu doğru boyda olmalı. */
+    totalHeight: number;
+    /** Görünen ilk öğenin üstünde bırakılacak boşluk. */
+    offset: number;
+};
+
 export { }