@ahmetilhn/hanui 2.0.4 → 2.0.6

package/build/index.d.ts

@@ -121,6 +121,24 @@ export declare const Badge: typeof Badge_2;
  * <p>Doygun dolgu yalnızca <strong>miktar</strong> tonlarında (`action`,
  * `link`) anlamlı: onlar bir durumu değil bir sayıyı bildirir ve tıklanabilir
  * bir öğenin parçasıdır.
+ *
+ * <h3>Koyu bandın üzerinde: `neutral` yeniden bağlanır</h3>
+ * Nötr rozet üç CSS özel özelliği okur — `--hanui-badge-bg`,
+ * `--hanui-badge-fg`, `--hanui-badge-line`. Kapsayıcıda tanımlanmadıklarında
+ * varsayılan tint çizilir; koyu bir gezinme rayının içinde ise kapsayıcı
+ * üçünü kendi tonlarına bağlayarak rozeti oraya taşır. İç sınıflara kural
+ * yazmak bir sonraki yayında sessizce düşerdi.
+ *
+ * ```scss
+ * .rail__badge {
+ *   --hanui-badge-bg: #{$rail-hover};
+ *   --hanui-badge-fg: #{$rail-fg-2};
+ *   --hanui-badge-line: #{$rail-line};
+ * }
+ * ```
+ *
+ * <p>Durum tonları bilinçli olarak ezilemez: bir hata rozetini kapsayıcının
+ * sessizce nötrleştirmesi, rengin taşıdığı anlamı yok ederdi.
  */
 declare const Badge_2: FC<Props_19>;
 
@@ -475,6 +493,13 @@ export declare const Chip: typeof Chip_2;
  * Seçili çip pasifleştirilmez: kullanıcı seçimini geri alabilmeli. Basılı
  * düğme semantiği (`aria-pressed`) ekran okuyucuya "seçili, kapatılabilir"
  * bilgisini verir.
+ *
+ * <h3>Native `title` YAZILMAZ</h3>
+ * Görünür metni olmayan çip `label`ı yalnızca `aria-label`a koyar. Önce
+ * ikisini birden yazıyordu; tarayıcının balonu dokunmatikte hiç görünmez,
+ * klavyede gecikmeli çıkar ve biçimi işletim sistemine bağlıdır — yani
+ * "üzerine gelince ne olduğu yazar" sözü kullanıcıların çoğunda tutmuyordu.
+ * Açıklama isteyen çağıran çipi {@link Tooltip} ile sarar.
  */
 declare const Chip_2: ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
 /** Görünen metin. Yalnız ikon taşıyan çipte verilmez; `label` zorunlu olur. */
@@ -721,11 +746,16 @@ export declare type CommonElementProps = Partial<{
  * 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>
+ * <h3>Boşluk ve punto iner; yarıçap ve dokunma hedefi inmez</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.
  *
+ * <p>Punto ölçeğinin <strong>tamamı</strong> iner. Bir dönem yalnızca küçük
+ * uç (`2xs`–`body`) iniyordu ve bu ölçülebilir bir hataydı: gövde 15 px'e
+ * inerken başlıklar 29 px'te kaldığı için oran vitrindekinin çok üstüne
+ * çıkıyor, panelde başlıklar ekranı yiyordu.
+ *
  * <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
@@ -743,6 +773,11 @@ export declare const COMPACT_DENSITY: {
     readonly 'font-size-sm': "13px";
     readonly 'font-size-base': "15px";
     readonly 'font-size-body': "16px";
+    readonly 'font-size-lg': "18px";
+    readonly 'font-size-xl': "21px";
+    readonly 'font-size-2xl': "25px";
+    readonly 'font-size-3xl': "31px";
+    readonly 'font-size-4xl': "39px";
     readonly 'leading-normal': "1.5";
     readonly 'leading-relaxed': "1.6";
 };
@@ -814,6 +849,12 @@ export declare const CopyField: typeof CopyField_2;
  * dibinde "kopyalandı" yazması <em>hangisinin</em> kopyalandığını
  * söylemiyordu. İkon yerinde tike dönünce cevap tıklanan yerde.
  *
+ * <h3>Düğmede native `title` YOK</h3>
+ * Ad yalnızca `aria-label`da. `title` aynı metni bir kez daha yazıyordu ve
+ * tarayıcı balonu dokunmatikte hiç görünmediği için hiçbir şey kazandırmıyor,
+ * bazı ekran okuyucularda adı iki kez okutuyordu. Simgenin kendisi zaten bir
+ * pano ve kopyalandığında tikli panoya dönüyor.
+ *
  * <h3>Pano erişimi reddedilirse</h3>
  * `navigator.clipboard` güvenli olmayan bağlamda (HTTP) ve izin verilmediğinde
  * reddeder. O durumda değer sessizce <em>seçilir</em>: kullanıcı Ctrl+C ile
@@ -1213,6 +1254,15 @@ export declare const FilterBar: typeof FilterBar_2;
  * (birden çok alanı olan formda tarayıcının örtük gönderimi ancak bir gönderme
  * düğmesi varsa çalışır).
  *
+ * <h3>Denetimler tek hizada</h3>
+ * Şerit alanları alt kenardan hizalar; etiketli ve etiketsiz alanın yan yana
+ * durması bunu bozmaz. Bozan şey denetimin <strong>altına</strong> yazılan
+ * yardım/hata metniydi: alanın alt kenarı artık denetimin değil metnin kenarı
+ * oluyor ve denetim komşularından yukarı kaçıyordu (ölçüldü: bir ekranda 24 px
+ * kaçık iki girdi). Şeridin içindeki `Field` mesajı denetimin
+ * <em>üstüne</em> alır — etiket, ipucu, denetim. DOM sırası değişmez, yani
+ * ekran okuyucu yine "etiket, denetim, hata, ipucu" duyar.
+ *
  * <h3>320px'te taşma yok</h3>
  * Alanlar `min-width: 240–280px` taşıyordu ve en dar ekranda şerit sayfayı yana
  * kaydırıyordu. Genişlik artık `flex-basis` ile istenir, `min-width: 0` ile
@@ -1545,6 +1595,18 @@ export declare const IconButton: typeof IconButton_2;
  * <p>Bağlantı kipinde `disabled` YOKTUR — `<a>` etiketinin devre dışı hâli
  * yok ve `aria-disabled` tıklamayı engellemez. Erişilemez olması gereken bir
  * eylem hiç çizilmez.
+ *
+ * <h3>Native `title` YAZILMAZ</h3>
+ * Düğme `label`ı yalnızca `aria-label`a koyar. Önce ikisi birlikte
+ * yazılıyordu (`title="Şifreyi göster" aria-label="Şifreyi göster"`) ve bu üç
+ * ayrı sorun üretiyordu: tarayıcının balonu <strong>dokunmatikte hiç
+ * görünmez</strong> — trafiğin ağırlığı mobil olan bir arayüzde açıklamanın
+ * hiç olmaması demek; klavyeyle gelen kullanıcıda gecikmeli çıkar ve biçimi
+ * işletim sistemine bağlıdır; bazı ekran okuyucular `aria-label` ile birlikte
+ * ikisini de okuyup adı <em>iki kez</em> söyler. Görünür bir açıklama isteyen
+ * çağıran düğmeyi {@link Tooltip} ile sarar — balon dokunmatikte uzun basmayla
+ * da açılır. Yine de `title` geçirmek isteyen `...rest` ile geçirebilir; karar
+ * artık çağıranın.
  */
 declare const IconButton_2: ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
 icon: ReactNode;
@@ -1662,6 +1724,27 @@ export declare const LIGHT_THEME: {
     readonly 'on-action': "#ffffff";
     /** Pasif dolgu; saydamlık DEĞİL kendi rengi (bkz. Button `:disabled`). */
     readonly 'action-soft': "#c9d0da";
+    /**
+     * PASİF DOLGU ÜZERİNDEKİ METİN.
+     *
+     * <p>ÖLÇÜLDÜ: pasif düğme `action-soft` zeminine `on-action` (beyaz) metin
+     * yazıyordu — açık temada <strong>1,55:1</strong>, koyu temada 1,93:1.
+     * Ekranda "Ara", "Sorgula", "Giriş yap" yıkanmış duruyor; etiketin ne
+     * dediği okunmuyordu.
+     *
+     * <p>WCAG pasif denetimleri hem 1.4.3'te hem 1.4.11'de açıkça muaf tutuyor,
+     * yani bu bir İHLAL DEĞİLDİ — ve tam da bu yüzden hiçbir katman uyarmadı:
+     * çift denetçinin listesinde de yoktu. Ama okunamayan bir etiket, düğmenin
+     * neyi engellediğini de söylemez; kullanıcı "neden pasif" sorusunu
+     * soramadan önce "bu neydi" sorusunda takılıyor. Pasiflik dolgunun
+     * geri çekilmesiyle bildirilir, metnin silinmesiyle değil — `opacity` ile
+     * soluklaştırma yasağının (`A11Y.md`) aynı gerekçesi.
+     *
+     * <p>Ton merdivenin kendisinden: açıkta `n700` (6,52:1), koyuda `n300`
+     * (5,76:1). Çift artık `check-contrast.mjs`te ve eşiği tutmayan bir tema
+     * derlemeyi kırar.
+     */
+    readonly 'on-action-soft': "#3a424f";
     readonly amber: "#f59e0b";
     readonly 'amber-hover': "#d98706";
     readonly 'amber-active': "#b87205";
@@ -2055,6 +2138,15 @@ export declare const Panel: typeof Panel_2;
  * sayfanın üçte biri kadar kalıp yanındaki boşluğa bakıyordu; sorun formun
  * değil PANELİN daraltılmasıydı.
  *
+ * <h3>Dip şeridi o sütunu izler</h3>
+ * Panelde bir `PanelForm` varsa `footer` içeriği <strong>aynı sütunda</strong>
+ * biter. Şeridin kendisi (zemin + üst çizgi) tam genişlikte kalır; hizalanan
+ * yalnızca içeriği. Ölçüldü: form 565 px'lik sütununu bitirirken kaydet
+ * düğmesi panelin öbür ucunda, formdan 576 px uzakta duruyordu — göz formu
+ * bitiriyor, düğmeyi arıyordu. `PanelForm` kullanılmayan panelde kural
+ * uygulanmaz: orada sınırlanacak bir sütun yok ve şeridin sağa yaslanması
+ * doğru davranış.
+ *
  * @example
  * <Panel title="Profil bilgileri" description="Fatura bu bilgilerle kesilir">
  *   <PanelForm>…alanlar…</PanelForm>
@@ -2494,7 +2586,7 @@ declare type Props_22 = {
     /** Gösterilecek ve panoya kopyalanacak değer. */
     value: string;
     /**
-     * Kopyalama düğmesinin erişilebilir adı ve `title`ı.
+     * Kopyalama düğmesinin erişilebilir adı.
      *
      * <p>Verilmezse `labels.copyField.copy(value)` çağrılır. Config bir DİZE
      * değil biçimlendirici tutar: ad değeri İÇERMELİ — bir listede on beş
@@ -2748,6 +2840,20 @@ declare type Props_32 = {
     description?: ReactNode;
     /** Sol üstte duran ikon madalyonu. */
     icon?: ReactNode;
+    /**
+     * `plain` KUTUYU kaldırır: zemin, kenarlık ve dolgu gider, yalnızca sayı
+     * kalır. Varsayılan `card`.
+     *
+     * <p>Kendi zemini olan bir bandın (kahraman, güvence şeridi) üzerinde
+     * ölçümler kart olarak istenmiyor. Bunun tek yolu kapsayıcıda
+     * `--hanui-surface: transparent` yazmaktı ve iki şeyi birden bozuyordu:
+     * dolgu <em>görünmez oluyor ama YER KAPLIYOR</em> — ölçüldü, telefonda 2×2
+     * ızgarada satır arası 48 px'e çıkıyor ve dört sayı tek bir grup gibi
+     * okunmuyordu — ayrıca o değişken kapsayıcıdaki <strong>her</strong> hanui
+     * yüzeyini birden düzleştiriyordu. `plain` niyeti tek yerde söyler ve
+     * yüzey değişkenine dokunmaya gerek bırakmaz.
+     */
+    variant?: 'card' | 'plain';
     size?: 'sm' | 'md';
     className?: string;
     testId?: string;
@@ -3636,6 +3742,24 @@ export declare const Stat: typeof Stat_2;
  * <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.
+ *
+ * <h3>GENİŞLİK KARARI KAPSAYICININ</h3>
+ * `Stat` kendine `flex` ya da `width` yazmaz ve bu bilinçli. Esnek bir sırada
+ * içeriği kadar büzülür — yan yana dört kutu 148-177 px arasında tırtıklı
+ * çıkabilir — ama çözüm kutuya `flex: 1` yazmak DEĞİL: aynı bileşen bir
+ * ızgara hücresinde, bir kartın içinde ve tek başına da kullanılıyor ve orada
+ * `flex: 1` çağıranın kararını sessizce eziyor. Eşit genişlik isteniyorsa
+ * kapsayıcı söyler:
+ *
+ * ```scss
+ * .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
+ * ```
+ *
+ * <h3>Kendi zemini olan bandın üzerinde: `variant="plain"`</h3>
+ * Kart görünümü (zemin + kenarlık + dolgu) sayfa yüzeyi için. Bir kahraman
+ * bandının içinde ölçümler kart olarak istenmediğinde `plain` verilir; zemini
+ * `transparent`a çevirmek dolguyu <em>görünmez</em> yapar ama kaldırmaz ve
+ * ızgara sessizce dağılır.
  */
 declare const Stat_2: FC<Props_32>;