@stisocial/ui 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,246 @@
+# Değişiklikler
+
+Sürüm numaraları anlamlıdır: kırıcı değişiklik yalnız büyük sürümde, önceden kullanımdan kaldırma
+uyarısıyla gelir. `1.0`'a kadar (dalga 2 sonu) küçük sürümler de kırıcı olabilir; burada yazılır.
+
+## 0.1.0 — 2026-11-07
+
+İlk genel sürüm: 246 bileşen (temel dalganın tamamı, uygulama dalgasının büyük bölümü), tasarım
+değerleri, temalar ve ikonlar. Kalan bileşenler sonraki küçük sürümlerde gelir (docs/envanter.md).
+
+
+- Bileşenler, parti 1 (86 bileşen hazır; liste ve durum: docs/envanter.md). Eylem: Button, IconButton,
+  ButtonGroup, ToggleButton, ToggleGroup, SegmentedControl, CloseButton, FloatingActionButton, Link,
+  ArrowLink, BackLink, SkipLink, CopyButton, ShareButton, DownloadButton, PrintButton. Düzen:
+  Container, Stack, Inline, Grid, Columns, Center, AspectRatio, Section, Surface, Spacer, Divider,
+  Bleed, Masonry, ScrollArea, ScrollShadow, Sticky, ActionBar, Show, Portal. Yazı ve değer gösterimi:
+  Blockquote, List, DescriptionList, Mark, Prose, Footnote, ReadMore, Truncate, Highlight, Amount,
+  FormattedNumber, DateTime, RelativeTime, Duration, FileSize, PhoneLink, EmailLink, AddressText,
+  IbanText. Form: Field parçaları, TextField. Geri bildirim: Spinner, Alert, Callout, InlineMessage,
+  ProgressBar, ProgressCircle, Meter, Skeleton, StatusDot, EmptyState. Veri: Card, CardLink, Badge,
+  Tag, Chip/ChipGroup, Avatar, AvatarGroup, Stat, StatGroup, KeyValue.
+- Form: Checkbox (React Aria CheckboxField; kısmi seçim, zorunlu onay), CheckboxGroup, RadioGroup ve
+  Radio (APG radyo grubu).
+- Form: Switch (APG Switch, etiket başta/sonda), TextArea (kendiliğinden büyüme, yumuşak karakter sınırı),
+  CharacterCounter (görünen karakter sayımı, eşiklerde duyuru), SearchField (Escape/Enter, yükleniyor,
+  "/" ve Ctrl/⌘+K kısayolu).
+- Form: Form (yerel doğrulama, başarısız gönderimde hata özeti ve odak, sunucu hatalarını alanlara
+  bağlama, değerler nesne olarak, meşgul durumu), FormErrorSummary (alanlara giden bağlantılar, Türkçe
+  ve İngilizce çoğul başlık), Fieldset (başlık, açıklama ve grup hatası bağı, toplu devre dışı),
+  UnsavedChangesPrompt ve `useUnsavedChanges` (sayfadan çıkış uyarısı, uygulama içi bağlantıyı
+  yakalayıp onaya bağlama), InputGroup (ön ve son ek alanın adına katılır, değere katılmaz; son öğe
+  ayrı sekme durağı). `FieldLabel` isteğe bağlı `id` alır.
+- Form: EmailField (alan adı yazım önerisi, onayla uygulanır; `suggestEmail`), UrlField (şemasız
+  adresi https:// ile tamamlar, yalnız http/https; `javascript:` reddedilir), PasswordField
+  (göster/gizle, büyük harf kilidi uyarısı, gönderimde yeniden gizleme, yazım denetimi her durumda
+  kapalı), PasswordStrength (yerel güç tahmini: yaygın Türkçe şifreler, kişisel bilgi, tekrar ve
+  sıra; `estimatePasswordStrength`), NewPasswordField (anlık kurallar, tekrar alanı, kesmeyen uzunluk
+  sınırı, `passwordrules`). InputGroup `password` türünü, `spellCheck` ve `autoCapitalize` alır;
+  Field biçim hatasında web adresi için ayrı metin verir.
+- Form: NumberField (APG spinbutton, PageUp/PageDown büyük adım, dile göre ayraçlar sağlayıcısız da
+  Türkçe, para/yüzde/birim, tekerlek varsayılan kapalı), MaskedField (genel maske; sabitlerle yürüyen
+  ayrıştırma, imleç korunur, sabit üstünden silme, Türkçe büyük harf, ham değer gönderimi),
+  InlineEdit (yerinde düzenleme; Enter/Escape, odak dönüşü, bekleme ve sunucu hatası).
+- Form: hata özeti, yük altında alanlar farklı karelerde güncellense de bütün hataları listeler
+  (liste kararlı olana kadar yeniden okunur).
+- Form: Select (APG Select-Only Combobox, Türkçe harfle arama, gruplar, açıklamalı seçenekler,
+  otomatik doldurma), MultiSelect (onay kutulu, Türkçe birleşik liste), Combobox (Türkçe harf
+  duyarsız süzme: "sisli" → Şişli; yükleniyor, sonuç yok; `searchFold`), Listbox (APG; Shift aralık,
+  Ctrl+A devre dışılar hariç). Ortak seçenek listesi `_internal/listbox`.
+- `@stisocial/ui/csp`: Select'in gizli yerel seçimi için ikinci özet (`ARIA_HIDDEN_SELECT_STYLE`);
+  aynı gizleme `scoped.css`'te sınıfla.
+- Açılır katmanlar (menü ve seçenek listesi) ekrandan geniş olamaz: tam genişlikte alanda katmanın
+  ekranı taşırıp titremesi düzeltildi.
+- Form: RadioCards, CheckboxCards, ChoiceCards (kart ve döşeme seçimi; kartın her yerine basmak
+  seçer, açıklama ve fiyat açıklama olarak bağlı, devre dışı kartın açıklaması da devre dışı),
+  Slider ve RangeSlider (APG; Türkçe biçimli değer, eşit uçlarda tek değer, adlı tutamaçlar;
+  tutamaçlar yalnız tarayıcıda çizilir, rayın sabit stili CSP özetli: `ARIA_SLIDER_TRACK_STYLE`).
+- Form: Rating ve RatingDisplay (APG radyo grubu, önizleme, kesirli gösterim), OtpField (tek alan,
+  SMS'ten otomatik doldurma, yapıştırılan kod hane kaybetmeden ayıklanır), TagInput (Enter/virgül,
+  yapıştırılan liste, Türkçe harf duyarsız yinelenen denetimi, öğe doğrulaması, sınır).
+- CSP: ChipGroup hücresinin sabit stili için dördüncü özet (`ARIA_GRID_CELL_STYLE`) ve sınıfla
+  yedek kural; önceden sıkı CSP'de etiket grubu düzeni bozulabiliyordu.
+- Form: ColorSwatchPicker (adlı renkler, renge göre onay tonu), ColorPicker (2D alan, ton ve
+  saydamlık, hex, hazır renkler; katman tema bağlamını taşır), TransferList (iki Listbox arası
+  aktarım, Türkçe harf duyarsız arama, kap sorgusuyla dar yerleşim). Renk örnekleri satır içi stil
+  özniteliği olmadan, CSSOM ile çizilir.
+- Form: FileUpload (sürükle-bırak ve dosya seçme, tür/boyut/sayı/boş dosya denetimi ve duyurusu,
+  ilerleme ve sunucu hatası, gerçek dosya alanıyla form gönderimi; `partitionFiles`), SignaturePad
+  (yumuşatılmış ve basınca duyarlı çizim, geri al, yazarak imza, temadan bağımsız koyu PNG),
+  TurnstileField (Cloudflare Turnstile; tek kez, yalnız Cloudflare'den yükleme, nonce, tema ve dil).
+- CSP: React Aria dosya alanı için beşinci özet (`ARIA_FILE_TRIGGER_STYLE`) ve yedek kural. Katalog
+  CSP'si Turnstile için `frame-src` ve `script-src` adresini içerir.
+- Form: IconPicker (ikon setinden kategori başlıklı ızgara, Türkçe/İngilizce arama, `iconLabel`) ve
+  EmojiPicker (134 Türkçe adlı emoji, Türkçe arama, son kullanılanlar bu cihazda, aynı emoji arka
+  arkaya eklenebilir); ortak seçici paneli `_internal/picker`.
+- Form: TreeSelect (APG ağaçtan tek ya da çoklu seçim, düğmede yol, yalnız yapraklar, Türkçe arama ve
+  ataların açılması, Escape seçimi korur) ve ImageUpload (PNG/JPEG/WebP, EXIF yönü, kırpma penceresi:
+  sürükleme, oklar, yakınlaştırma; istenen oranda yeniden kodlama ile EXIF silinir; SVG reddedilir);
+  kategori "Form temeli" tamamlandı.
+- Türkiye: TcknField, VknField, TaxIdField (TCKN ya da VKN; tür uzunluktan anlaşılır ve yazılır),
+  IdCardSerialField (yeni kimlik kartı seri numarası, Latin büyük harf), MersisField, KepAddressField,
+  IbanField (TR öneki sabit, dörderli gruplar, banka kodundan banka adı) ve BankSelect (EFT kodlu
+  Türkiye bankaları, türlere göre gruplu, Türkçe arama). Doğrulama: `isValidIdCardSerial`,
+  `isValidMersis`, `isValidKep`, `ibanBankCode`; banka listesi `TR_BANKS`, `bankByCode`.
+- MaskedField: `minFilled` (uzunluğu değişen değerlerde kabul edilen en az dolu yer sayısı). Field:
+  boş yardım bölgesi yer kaplamaz.
+- Türkiye: PhoneField (alan içinde ülke kodu seçimi, Türkiye biçimi, "+49 …" ile ülke değişimi,
+  E.164 saklama), CurrencyField (para biçimi, kuruş basamağı, para birimi seçimi), CountrySelect
+  (ISO 3166-1 ve Kosova, adlar dile göre), ProvinceSelect (81 il, plaka kodu), PostalCodeField (il
+  uyumu), PlateField ("34 ABC 123" biçimi ve yönetmelik dizileri), CompanyTypeSelect (TTK türleri,
+  unvan kısaltmaları).
+- Türkiye: DistrictSelect, NeighborhoodSelect ve TaxOfficeSelect (üst değere bağlı, uygulamanın
+  yükleyicisiyle beslenen seçimler: kapalı bekleme, yükleniyor, hata ve yeniden deneme, üst değer
+  değişince sıfırlama, önbellek ve iptal), NaceCodeSelect (sunucuda arama, seyreltme, kodla arama),
+  AddressFields (il, ilçe, mahalle, açık adres, posta kodu; mahalleden posta kodu), KvkkConsent
+  (Aydınlatma Metni bağlantılı, belirli konuya, işaretsiz ve zorunsuz açık rıza; metin sürümü) ve
+  IysConsent (İYS kanalları, işaretsiz); kategori "Türkiye'ye özel alanlar" tamamlandı.
+- Geri bildirim: Banner (sayfa üstü duyuru şeridi, kapatma bu cihazda hatırlanır), Announcer ve
+  `announce()` (kalıcı canlı bölgeden ekran okuyucu duyurusu), TopProgressBar (sayfa geçişi; kısa
+  işte görünmez), LoadingOverlay (bölge `inert` ve `aria-busy`, odak geri döner), ErrorState
+  (yeniden deneme, başvuru kodu, teknik ayrıntı yok), SuccessState, Countdown (saniye sınırına
+  hizalı, eşik ve bitiş duyurusu), OfflineIndicator ve UpdatePrompt (odak çalmayan yeni sürüm
+  bildirimi); EmptyState'e `tone`. Kategori "Geri bildirim ve durum" tamamlandı.
+- Altyapı: ThemeScript (tema ilk boyamadan önce; `themeScriptHash`, `setTheme`, `useTheme`, başka
+  sekmeyle eşitleme; değerler kaçışlanır ve izinli listeyle sınırlanır), FocusTrap (Tab döngüsü,
+  kaçan odağın geri alınması, odağın geri dönmesi), ClientOnly (`useIsClient`), ErrorBoundary
+  (ayrıntısız hata durumu, `resetKeys`, `onError`) ve LoadingBoundary (gecikmeli adlı gösterge,
+  isteğe bağlı hata sınırı). Kategori "Altyapı bileşenleri" tamamlandı.
+- Tarih ve saat (1. parça): Calendar, RangeCalendar (pazartesiyle başlayan hafta, bugün işareti,
+  sınırlar ve seçilemeyen günler), DateField, TimeField (parçalı giriş, 24 saat), DatePicker,
+  DateRangePicker (hazır aralıklar: bugün, dün, son 7/30 gün, bu ay, geçen ay, bu yıl) ve
+  DateTimePicker (katmanda saat). Değerler ISO metnidir; `@internationalized/date` bağımlılığı
+  eklendi. CSP: parçalı tarih alanının iki sabit stili için özet ve sınıf yedeği
+  (`ARIA_DATE_INPUT_STYLE`, `ARIA_DATE_SEGMENT_STYLE`).
+- Tarih ve saat (2. parça): WeekPicker (ISO 8601 haftası, `isoWeekOf`, `isoWeekRange`),
+  MonthPicker, QuarterPicker (`quarterRange`), YearPicker (on iki yıllık sayfa; dönem ızgarası APG
+  oklarıyla, sınırlar, zorunlu alan doğrulaması ve Form hata özetiyle uyum), DurationField (saat,
+  dakika, saniye; taşma; saniye ya da ISO süre) ve TimeZoneSelect (IANA, UTC farkına göre,
+  `timeZoneOffset`). Takvim içi günlere ek sınıf (`cellClassName`, iç).
+- Tarih ve saat (3. parça): TimeSlotPicker (randevu saatleri, dolu saatler, gün bölümleri,
+  `timeSlots`), WorkingHoursEditor (gün gün aralıklar, çakışma ve sıra denetimi,
+  `validateWorkingHours`) ve RecurrencePicker (RFC 5545 RRULE, Türkçe özet, `parseRRule`,
+  `formatRRule`, `describeRecurrence`). Parçalı tarih alanında her parça en az 24 piksel (WCAG
+  2.5.8); aralık alanı dar kapta alt satıra iner. Kategori "Tarih ve saat" tamamlandı.
+- Gezinme (1. parça): Breadcrumbs (APG sayfa yolu; çok öğede aradakiler "…" menüsüne toplanır, uzun
+  ad kısalır), Tabs (APG sekmeler; alt çizgili ve hap türü, dikey yön, elle etkinleştirme, rozet,
+  sığmayan liste kayar), Pagination (sabit öğe sayılı sayfa penceresi `pageItems`, düğme ya da
+  bağlantı kipi, kayıt aralığı, dar kapta "Sayfa 3 / 20"), PrevNext (önceki ve sonraki sayfa kartları),
+  Steps (tamamlanan, geçerli, bekleyen ve hatalı adım; yalnız geriye dönülebilir; dar kapta dikey) ve
+  Toolbar (APG araç çubuğu; tek sekme durağı, oklar, Home/End, grup ve yöne dik ayırıcı).
+- Test: birim projesi `test/` altındaki tarayıcı testlerini artık almaz (ortam testi yanlışlıkla
+  Node'da çalışıyordu).
+- Gezinme (2. parça): SegmentedNav (segment görünüşlü sayfa bağlantıları), SideNav (başlıklı
+  bölümler, açılıp kapanan gruplar, sabit üst ve alt yuva), NavRail (ikon ve her zaman görünen ad)
+  ve BottomNav (mobil alt çubuk, güvenli alan). Ortak rozet: sayı ("99+") ya da nokta; okunan metni
+  "3 yeni" / "yeni içerik var" bağlantının adının sonunda.
+- Gezinme (3. parça): Menu (öğe, bölüm, ayırıcı, kısayol, tek/çoklu seçim, alt menü, tehlikeli
+  eylem; `MenuPopover`), DropdownMenu (APG menü düğmesi) ve ContextMenu (sağ tıklama, uzun dokunma,
+  Shift+F10 ve menü tuşu; Shift+sağ tıklama tarayıcının menüsüne bırakılır). Erişilebilirlik
+  raporu ihlal eden öğenin HTML'ini de yazar.
+- Düzeltme: DatePicker, DateRangePicker ve DateTimePicker katmanı daralıp takvim sığmıyordu (katmanın
+  içindeki kap sorgusu, içerikten genişlik alan katmanı sıfıra çekiyordu). Katman artık içeriği kadar
+  geniş; geniş ve 320 piksellik ekranda ölçen gerileme testi eklendi.
+- Gezinme (4. parça): TableOfContents (kaydırmaya göre etkin başlık, `aria-current="location"`),
+  AnchorNav (yapışkan bölüm çubuğu, etkin bağlantı görünür alana gelir), ThemeSwitch (segmentli ya
+  da menü; ThemeScript ile aynı saklama) ve LanguageSwitch (diller kendi adları ve dil etiketleriyle,
+  bayraksız). Menu: `lang` ve `disallowEmptySelection`.
+- Gezinme (5. parça): TopNav (üst çubuk; 48rem altı kapta bağlantılar çekmeceye taşınır, ürün adı
+  kısalır, eylemler görünür kalır), MobileNav (kenardan kayan kipli çekmece, içinde SideNav; bağlantı
+  açılınca kapanır) ve NotificationBell (okunmamış sayılı zil, son bildirimler, tümünü okundu
+  işaretleme, boş durum).
+- Katalog: her bileşenin örnekleri yalnız kendi klasöründeki gösterim ve örnek stil dosyalarını
+  kullanır (19 örnek başka bileşenin dosyasından besleniyordu; "Kodu göster" yabancı dosya
+  gösteriyordu). Ortak yardımcılar `test/exampleParts.tsx`'e taşındı; kural testle korunur.
+- Gezinme (6. parça): TreeView (APG Tree; açık dalda → ilk çocuğa iner, tek/çoklu seçim, ek bilgi
+  sütunu), CommandPalette (Ctrl+K / ⌘K, gruplu komutlar, Türkçe harf kurallarıyla süzme, sanal odak,
+  Escape önce temizler) ve InfiniteList (düğme her zaman var, otomatik kipte istek kilidi, yeni
+  kayıt duyurusu ve odağı, hata ve yeniden deneme). Menu: `renderEmptyState`. Kategori "Gezinme"
+  tamamlandı.
+- Katmanlar (1. parça): Dialog (APG kipli pencere; başlık, açıklama, kendi kayan gövde, sabit eylemler,
+  ekrana sığar), AlertDialog (alertdialog; odak güvenli seçenekte, bekleyen onay, adı yazarak onay),
+  PromptDialog (tek alan; metin seçili açılır, doğrulama ve sunucu hatası alanda), Drawer (yan panel)
+  ve BottomSheet (alt sayfa; tutamaktan sürükleyerek kapanır). Ortak kipli pencere iskeleti.
+- Katmanlar (2. parça): Popover (oklu açılır kutu), Tooltip (APG ipucu; dokunmatikte uzun basma,
+  basmanın eylemi çalışmaz), HoverCard (kipsiz önizleme kartı, odak yerinde kalır), ContextualHelp
+  (yardım/bilgi balonu) ve Coachmark (tek ipucu balonu; odak ana düğmeye taşınır ve geri döner).
+- Test: canlandırma bekleme üst sınırı 3 saniye (yük altında ara renkte ölçüm yapılmaz); OtpField ve
+  InfiniteList testleri sonucu bekler.
+- Katmanlar (3. parça, kategori tamam): Toast (`toast.success/info/warning/error/show`,
+  `createToastQueue`; ton adı metin olarak okunur, varsayılan 6 sn, en az 5 sn, `danger` ve eylemli
+  bildirim kalıcı, `id` ile yinelenmez), ToastQueue (bildirim bölgesi; altı yerleşim, en çok üç
+  görünür, F6 yer işareti, fare üzerinde ya da odak içerideyken süre durur, odak sonraki bildirime ve
+  önceki yere döner), Lightbox (koyu sahnede görsel görüntüleyici; ←/→, Home/End, + / − / 0,
+  çift tıklama ve sürüklemeyle yakınlaştırma, dokunmatik kaydırma, küçük resim şeridi, komşu
+  görsellerin önceden yüklenmesi, geçişte duyuru), Tour (adımlı tanıtım; hedefi görünür alana
+  kaydırır, olmayan adımı atlar, odağı her adımda ana düğmeye taşır ve sonda geri verir),
+  FullscreenOverlay (tam ekran kipli katman; gövde okunabilir genişlikte ortalı).
+- Düzeltme: Coachmark (ve Tour) odak sayfaya çıkınca ya da sayfaya tıklanınca kapanmaz; Escape yalnız
+  odak balondayken kapatır (React Aria kipsiz katmanı odak kaybında kapatıyordu).
+- Uygulama kalıpları (1. parça): AppShell (atlama bağlantısı, yapışkan üst çubuk, üst çubuğun altında
+  sabit yan gezinme, `main`, yardımcı panel ve alt bilgi; 64rem altında yan gezinme gizli, 80rem altında
+  panel içeriğin altında), AppHeader (ürün adı ve bağlam, ortada arama, eylemler; dar kapta menü
+  düğmesi MobileNav çekmecesini açar, arama ikinci satıra iner, bağlam çekmeceye taşınır), PageHeader
+  (kırıntı yolu, başlık ve durum, açıklama, ek bilgiler, eylemler, alt bölüm gezinmesi), EntityHeader
+  (kayıt görseli, ad ve durum, tanım listesi bilgileri, eylemler), MasterDetail (geniş kapta iki bölme,
+  dar kapta tek bölme ve "Listeye dön"; odak ayrıntıya taşınır ve seçilen öğeye döner).
+- Test: görsel döküm, kendi `main` bölgesini çizen örneklerde döküm kabını özniteliğiyle bulur.
+- Uygulama kalıpları (2. parça): SettingsSection (başlıkla adlanan bölge, satırlı kart, kaydetme
+  şeridi, `split` düzen), SettingsRow (denetim satırın adı ve açıklamasıyla adlanır; sığmayan denetim
+  alta iner), DangerZone (kırmızı kenarlı tehlikeli işlemler bölümü), FilterPanel (APG Disclosure
+  grupları, grup ve toplam etkin süzgeç sayısı, tümünü temizleme), SearchResults (özet ve duyuru,
+  Türkçe kurallarla vurgu, iki satırlık metin parçası, yükleniyor ve boş durumları).
+- Switch: görünür etiket dışarıdaysa `aria-labelledby`/`aria-describedby` alır (`children` o zaman
+  verilmez). CheckboxGroup ve RadioGroup: `hideLabel`.
+- Uygulama kalıpları (3. parça): Wizard (adım başına denetim, bekleme, odağın adım başlığına taşınması
+  ve duyuru, oturum deposuyla kaldığı yerden devam; yalnız adım kimliği saklanır), OnboardingChecklist
+  (ilerleme, görev eylemleri, daraltma, tebrik), UploadQueue (toplam ve dosya başına ilerleme, durumlar,
+  iptal/yeniden dene/kaldır, duyurular), InviteMembers (denetimli e-posta etiketleri, rol, ileti,
+  kısmi başarısızlıkta adresler alanda kalır; `isEmailAddress`), RoleMatrix (rol–izin tablosu; satır ve
+  sütun başlığıyla adlanan onay kutuları, kilitli rol, salt okunur görünüm, yapışkan izin sütunu).
+- Checkbox: görünür etiketsiz kullanım için `aria-label`/`aria-labelledby` (tür düzeyinde `children`
+  yerine); `CheckboxBaseProps` dışa açıldı.
+- Uygulama kalıpları (4. parça): NotificationCenter (gün grupları, okunmamış süzgeci, tekil ve toplu
+  okundu işaretleme, daha fazla yükleme), CommentThread (anmalı yorumlar, tek düzey yanıtlar, yerinde
+  düzenleme, onaylı silme, Ctrl/⌘+Enter), Mentions (@ ile kişi önerileri; `aria-activedescendant`, ↓/↑,
+  Enter/Tab, Escape; `mentionQuery`, `findMentions`), ChatMessage (sohbet balonu, gruplama, gönderim
+  durumları, yeniden gönderme), ShortcutsDialog (gruplu, aranabilir kısayollar; ? tuşuyla açılır).
+- TextArea: `hideLabel`.
+- Uygulama kalıpları (5. parça): UsageMeter (kota kullanımı; %80'de uyarı, aşımda kırmızı ve metin,
+  sınırsız plan), PricingTable (aylık / yıllık dönem, plan kartları, önerilen ve mevcut plan, dahil
+  olan ve olmayan özellikler, KDV notu).
+- İkon seti: `smile` (gülen yüz) eklendi; 147 ikon.
+- Eylem: SplitButton (ana eylem + APG menü düğmesi), ConfirmButton (iki aşamalı yerinde onay, süre,
+  Escape ve odak kaybında iptal, duyuru), FavoriteToggle (kalp/yıldız/yer imi, aria-pressed, kısaltılmış
+  sayı), ReactionPicker (tepki çipleri + dört yönde oklarla gezilen tepki ızgarası); açılır katmanlar
+  kaynağın tema bağlamını taşır; kategori "Eylem" tamamlandı.
+- SplitView: yeniden boyutlandırılan iki panel (APG Window Splitter: oklar, Shift, Home/End, Enter ile
+  daraltma; sürükleme, çift tıklama, sağdan sola, saklanan boy, dar ekranda üst üste); kategori
+  "Düzen" tamamlandı.
+- Markdown: kendi güvenli ayrıştırıcımız (CommonMark alt kümesi + GFM tablo, üstü çizili, görev listesi,
+  çıplak bağlantı); HTML üretmez ve işlemez, adresleri izin listesiyle süzer (`safeUrl`), doğrusal
+  süre, Türkçe başlık kimlikleri (`headingSlug`); kategori "Yazı ve içerik" tamamlandı.
+- `@stisocial/ui/csp`: React Aria'nın gizli input stili için CSP özeti (`CSP_STYLE_ATTR_DIRECTIVE`);
+  aynı gizleme `scoped.css`'te sınıfla da yapılır, sıkı CSP'de görünüş bozulmaz.
+- `foundation.css` artık `scoped.css`'i de içerir (en yakın temalı ataya göre değişen bileşen kuralları).
+
+- Tasarım değerleri: 12 adımlı OKLCH ölçekleri (nötr, vurgu, başarı, uyarı, tehlike, bilgi), anlamlı
+  katman, koyu / açık / sistem temaları, yüksek karşıtlık, zorunlu renkler, P3, eski motor yedeği,
+  yoğunluk, marka teması altyapısı; boşluk, köşe, gölge, yazı, hareket, katman ve kırılım ölçekleri.
+  `tokens.css`, `media.css`, `@stisocial/ui/tokens` (TypeScript), düz JSON ve DTCG 2025.10.
+- `UIProvider`, `useLocale`, `VisuallyHidden`; `@stisocial/ui/next`: `NextUIProvider`, `CspNonceMeta`.
+- `@stisocial/ui/foundation.css`: tasarım değerleri, yazı yüzleri, sıfırlama ve temel stiller (odak
+  halkası, bağlantı, seçim, kaydırma çubuğu, tablo rakamları, `sti-visually-hidden` yardımcıları).
+- Yazı yüzleri: ölçüsü Türkçe metne göre ayarlı yedek yüzler ("STI Text Fallback", "STI Display
+  Fallback", Android için Roboto yüzleri); tablo rakamı "STI Numeric" (0–9, Inter'den, SIL OFL 1.1,
+  `dist/fonts/`). `--sti-font-numeric` markaya bağlı; müşteri markaları `fontNumeric` verebilir.
+- Yazı bileşenleri: `Heading`, `Text`, `Eyebrow`, `Accent`, `Code`, `Kbd`; tasarım değeri `fg-signal`.
+- `@stisocial/ui/icons`: 146 ikon, `Icon`, `iconCatalog`.
+- Türkçe yardımcılar: `createFormatter` ve tarih, sayı, para, süre, dosya boyutu biçimleri;
+  `parseNumber`; `toUpper`, `toLower`, `capitalize`, `compare`, `sortBy`, `searchKey`,
+  `containsStrict`, `matchesLoose`, `initials`, `template`; `isValidTckn`, `isValidVkn`,
+  `isValidIban`, `normalizeIban`, `formatIban`, `normalizeTrPhone`, `formatTrPhone`, `isTrMobile`.
+- `UIProvider`: `timeZone` ve `messages` (yerleşik Türkçe ve İngilizce metinler), `useMessages`,
+  `useFormatter`; `LOCALES`, `toLocale`.
+- Tasarım değeri `border-selected` (seçili durumun sınırı, zemine karşı 3:1); `foundation.css`:
+  yüzen eylem düğmesi payı yardımcısı `sti-fab-clearance` (`--sti-fab-clearance`, `--sti-fab-clearance-extra`).

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 stisocial
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,240 @@
-# Temporary Holding Version
+# @stisocial/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+stisocial'ın tasarım sistemi (SİNYAL 1.0): tasarım değerleri, temalar ve bileşenler. stisocial'ın
+bütün sitelerinde, uygulamalarında, e-postalarında ve belgelerinde aynı dil.
+
+> Durum: **0.x, dalga 1 sürüyor.** Hazır olanlar: tasarım değerleri ve temalar, temel stiller, yazı
+> yüzleri, yazı bileşenleri, ikon seti, Türkçe biçimlendirme ve doğrulama yardımcıları, sağlayıcılar,
+> paketleme hattı. Etkileşimli bileşenler sırayla eklenir. Karar belgesi: STI ID deposunda
+> `docs/decisions/0127`.
+
+## Kurulum (Next.js 16, React 19)
+
+```bash
+npm install @stisocial/ui
+```
+
+```tsx
+// app/layout.tsx
+import "@stisocial/ui/foundation.css"; // tasarım değerleri, yazı yüzleri, sıfırlama, temel stiller
+import { CspNonceMeta, NextUIProvider } from "@stisocial/ui/next";
+import { headers } from "next/headers";
+import { clash, general } from "./fonts"; // next/font/local (aşağıda)
+
+export default async function RootLayout({ children }: LayoutProps<"/">) {
+  const nonce = (await headers()).get("x-nonce") ?? undefined;
+  return (
+    <html lang="tr" className={`${clash.variable} ${general.variable}`}>
+      <head>
+        <CspNonceMeta nonce={nonce} />
+      </head>
+      <body>
+        <NextUIProvider locale="tr-TR">{children}</NextUIProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+`lang="tr"` gereklidir: büyük harf dönüşümü ("istanbul" → "İSTANBUL") ve tarayıcının dil kuralları
+buna göre çalışır. `foundation.css` kök düzende bir kez içe aktarılır; bileşenler kendi stillerini
+kendileri yükler (kullanılmayan bileşenin stili uygulamaya girmez). Bundler kullanmayan ortamlar için
+her şeyi tek dosyada veren `@stisocial/ui/styles.css` vardır. Yalnız tasarım değerleri gerekiyorsa
+`@stisocial/ui/tokens.css`.
+
+## Yazı tipleri
+
+Clash Display ve General Sans (Indian Type Foundry, Fontshare) lisansı (ITF FFL 2.0) şunları yasaklar:
+- dosyaları herkese açık bir pakette dağıtmak,
+- biçim dönüştürmek,
+- alt kümelemek.
+
+Bu yüzden **bu iki yazı tipinin dosyaları bu pakette yoktur.** stisocial uygulaması resmî dosyaları Fontshare'den kendi deposuna koyar ve `next/font/local` ile yükler. İki koşul vardır:
+- değişkenler `<html>` üzerinde tanımlanır;
+- `adjustFontFallback: false` verilir (ölçüsü ayarlı yedek yüzleri paket verir).
+
+```ts
+// app/fonts.ts
+import localFont from "next/font/local";
+
+export const general = localFont({
+  src: "./fonts/GeneralSans-Variable.woff2",
+  weight: "200 700",
+  variable: "--font-general",
+  display: "swap",
+  adjustFontFallback: false,
+});
+export const clash = localFont({
+  src: "./fonts/ClashDisplay-Bold.woff2",
+  weight: "700",
+  variable: "--font-clash",
+  display: "swap",
+  adjustFontFallback: false,
+});
+```
+
+`foundation.css` iki tür yüz getirir.
+
+**Yedek yüzler** ("STI Text Fallback", "STI Display Fallback"):
+- **Amaç:** yazı tipi yüklenene dek metin aynı yeri kaplar, sayfa kaymaz.
+- **Kaynak:** ölçüleri Türkçe metne göre ayarlanmış Arial; Linux ve ChromeOS'ta ölçüsü aynı Arimo ya da Liberation Sans, Android'de Roboto.
+- **İçerik:** dosya değil, yalnız ölçü değerleridir.
+
+**STI Numeric** (tablo rakamı):
+- **Neden:** General Sans'ta eşit genişlikte (tablo) rakam yoktur. Tablolarda, tutarlarda ve sayaçlarda alt alta duran rakamların hizalanması için gerekir.
+- **Kapsam:** yalnız 0–9. Rakam yüksekliği ve çizgi kalınlığı General Sans'a göre ayarlıdır. Ayraçlar, ₺ ve harfler General Sans'ta kalır.
+- **Lisans:** Inter'in değiştirilmiş sürümüdür; SIL Open Font License 1.1 ile dağıtılır (`dist/fonts/OFL.txt`, `dist/fonts/NOTICE`).
+- **Boyut:** ağırlık başına yaklaşık 1,5 KB. Yalnız sayfada rakam kullanıldığında indirilir.
+- **Kullanım:** `td`, `th`, `time`, `data` ve `output` öğelerinde ve `<Text numeric>` içinde kendiliğinden devreye girer. Başka yerde `font-family: var(--sti-font-numeric)` yazılır.
+
+**Müşteri projeleri:**
+- stisocial'ın yazı tipi kopyası verilmez; müşteri teması kendi yazı tiplerini kullanır.
+- Rakamlar o yazı tipinin kendi tablo rakamlarıyla (`tabular-nums`) çizilir. STI Numeric yalnız General Sans ile uyumludur.
+
+## Yazı bileşenleri
+
+Hepsi sunucu bileşenidir; tarayıcıya JavaScript göndermez.
+
+```tsx
+import { Accent, Code, Eyebrow, Heading, Kbd, Text } from "@stisocial/ui";
+
+<Eyebrow>Hesap</Eyebrow>
+<Heading level={1} size="display-lg">Güvenli <Accent>giriş</Accent></Heading>
+<Text tone="muted">Açıklama metni</Text>
+<Text numeric>{f.currency(1234.5)}</Text>
+<Code>sti_n4Gj</Code> <Kbd keys={["Ctrl", "K"]} />
+```
+
+| Bileşen | Özellikler |
+|---|---|
+| `Heading` | `level`: 1–6, belge yapısını belirler.<br>`size`: görünüşü belirler (`sm`…`4xl`, `heading-lg/xl`, `display-lg/xl/2xl`); verilmezse düzeyden gelir.<br>`tone`: `default` ya da `muted`.<br>`align`. |
+| `Text` | `as`, `weight`, `numeric`, `align`.<br>`size`: `xs`, `sm`, `md`, `body`, `lg`, `lead`, `prose`.<br>`tone`: `default`, `muted`, `signal`, `accent`, `success`, `warning`, `danger`, `info`.<br>`truncate`: `true` ya da 2–4 satır. |
+| `Eyebrow` | Başlık üstündeki küçük etiket. `tone`: `signal` ya da `muted`. |
+| `Accent` | Başlıkta SİNYAL vurgusu (turkuaz). |
+| `Code` | Satır içi kod. |
+| `Kbd` | Klavye kısayolu: `keys`, isteğe bağlı `label`. |
+
+## İkonlar
+
+146 çizgi ikon, tek aile (24×24 ızgara, 1,75 çizgi). Her ikon ayrı dosyadadır ve sunucu bileşenidir; yalnız kullanılanlar uygulamaya girer.
+
+```tsx
+import { AlertTriangleIcon, CheckIcon } from "@stisocial/ui/icons";
+
+<CheckIcon />                                   // süs: ekran okuyucudan gizli, yazı boyutunu izler
+<AlertTriangleIcon size="lg" label="Uyarı" />   // tek başına anlam taşıyorsa adı verilir
+```
+
+- **Boyut:** `size` alır: `sm` 16, `md` 20, `lg` 24 piksel. Verilmezse yazı boyutunu (1em) izler.
+- **Renk:** metinden gelir.
+- **Ad:** düğmenin içindeki ikona ad verilmez; adı düğme taşır.
+- **Liste ve kurallar:** ikon listesi ve arama sözcükleri `iconCatalog`'dadır; tasarım kuralları depodaki `packages/ui/icons/README.md` dosyasındadır.
+
+## Türkçe yardımcılar
+
+Sunucuda ve istemcide aynı sonucu verirler. Saat dilimi varsayılanı `Europe/Istanbul`'dur.
+
+```ts
+import { createFormatter, isValidTckn, sortBy, toUpper } from "@stisocial/ui";
+
+const f = createFormatter({ locale: "tr-TR" });
+f.currency(1234.5);            // "₺1.234,50"
+f.date(new Date(), "long");    // "6 Kasım 2026"
+toUpper("istanbul");           // "İSTANBUL"
+sortBy(["Ilgaz", "İzmir", "Çorum"], (s) => s); // Türk alfabesine göre
+isValidTckn("10000000146");    // true
+```
+
+- **Biçimlendirme:**
+  - tarih, saat, tarih aralığı, göreli zaman, süre;
+  - sayı, para, yüzde, kısa sayı, liste, dosya boyutu;
+  - Türkçe sayı ayrıştırma (`parseNumber`).
+- **Metin:**
+  - Türkçe büyük/küçük harf;
+  - sıralama (`compare`, `sortBy`);
+  - harfe duyarlı ve duyarsız arama (`containsStrict`, `matchesLoose`): "ı" Işık'ı, "i" İzmir'i bulur;
+  - baş harfler, şablon.
+- **Doğrulama:**
+  - T.C. kimlik numarası, vergi numarası;
+  - IBAN (biçimleme dahil);
+  - Türkiye telefon numarası (cep ayrımı, uluslararası biçime çevirme).
+- **Sağlayıcı:** `UIProvider` (Next.js'te `NextUIProvider`) üç şey verir:
+  - dil,
+  - saat dilimi,
+  - bileşenlerin yerleşik metinleri (Türkçe ve İngilizce; değiştirilebilir).
+
+  İstemci bileşenlerinde `useLocale`, `useMessages` ve `useFormatter` kullanılır.
+
+## Tasarım değerleri
+
+Bileşenler yalnız **anlamlı** değerleri kullanır; uygulamalar da öyle yapmalıdır:
+
+```css
+.kart {
+  background: var(--sti-bg-surface);
+  color: var(--sti-fg);
+  border: var(--sti-border-width) solid var(--sti-border);
+  border-radius: var(--sti-radius-lg);
+  box-shadow: var(--sti-shadow-md);
+  padding: var(--sti-space-6);
+}
+```
+
+| Grup | Örnekler |
+|---|---|
+| Zemin | `bg-canvas`, `bg-subtle`, `bg-surface`, `bg-surface-hover`, `bg-surface-active`, `bg-inverse`, `bg-<durum>-subtle` |
+| Yazı | `fg`, `fg-muted`, `fg-signal` (SİNYAL turkuazı, metin olarak 4,5:1), `fg-link`, `fg-link-hover`, `fg-inverse`, `fg-<durum>` (renkli durum metni), `fg-<durum>-strong`, `fg-on-<niyet>` |
+| Dolgu | `fill-<niyet>`, `fill-<niyet>-hover` (niyet: neutral, accent, success, warning, danger, info) |
+| Çizgi | `border-subtle`, `border`, `border-strong`, `border-<durum>` (süs çizgisi), `border-control` (denetim sınırı, 3:1), `border-selected` (seçili durumun sınırı, 3:1), `focus-ring` |
+| Diğer | `scrim`, `selection-bg`, `selection-fg`, `shadow-sm…xl` |
+| Ölçü | `space-0…32` (4 piksel birim: `space-4` = 16px), `radius-xs…xl`, `radius-pill`, `control-h-sm/md/lg`, `row-h` |
+| Yazı | `font-display`, `font-text`, `font-numeric`, `font-mono`, `font-size-*`, `line-height-*`, `tracking-*`, `font-weight-*` |
+
+| Hareket | `duration-fast/base/slow/reveal/loop`, `ease-out`, `ease-in-out`, `ease-snap` |
+| Katman | `z-dropdown`, `z-sticky`, `z-header`, `z-overlay`, `z-modal`, `z-popover`, `z-toast`, `z-tooltip` |
+
+`fill-*` dolgularının yalnız üzerindeki `fg-on-*` yazısıyla okunabilirliği garanti edilir; açık
+temada turkuaz, bilgi ve uyarı dolgusu sayfa zeminine karşı 3:1'in altındadır. Bir denetimin durumunu
+tek başına gösteren parça (anahtar izi, ilerleme çubuğu) için bu dolgular kullanılmaz; bileşenler
+kendi 3:1 değerleriyle gelir.
+
+Okunabilirlik garantisi: izin verilen her ön plan–zemin çifti, her tema ve karşıtlık düzeyinde WCAG
+2.2 AA'yı geçer (metin 4,5:1, denetim sınırı ve odak 3:1); bu derlemede ölçülür.
+
+TypeScript'ten: `import { cssVar, colors, breakpoints } from "@stisocial/ui/tokens"`.
+`colors` CSS değişkeni okuyamayan yerler içindir (e-posta, paylaşım görseli, PDF).
+
+Ekran kırılımları (en az genişlik): `sm` 40rem, `md` 48rem, `lg` 64rem, `xl` 80rem, `2xl` 96rem.
+CSS'te bu değerler doğrudan yazılır (`@media (min-width: 48rem)`); TypeScript'te `breakpoints`.
+`@stisocial/ui/media.css` aynı kırılımları `@custom-media` (`--sti-md`) olarak da verir; ancak bu
+söz dizimini tarayıcılar henüz tanımaz ve Next.js'in varsayılan CSS derlemesi de açmaz: yalnız
+`@custom-media` açan bir derleme adımı (PostCSS `postcss-custom-media` ya da Lightning CSS
+`drafts.customMedia`) kullanan uygulamalar içindir. Açılmadığında sorgu sessizce hiç eşleşmez.
+
+## Temalar ve modlar
+
+| Öznitelik | Nerede | Değerler |
+|---|---|---|
+| `data-theme` | `<html>` ya da herhangi bir öğe, iç içe | `dark` (stisocial varsayılanı), `light`, `system` |
+| `data-density` | `<html>` ya da herhangi bir öğe, iç içe | `compact`, `comfortable` (varsayılan), `spacious`; dokunmatikte denetimler 44 pikselin altına inmez |
+| `data-contrast` | yalnız `<html>` (bütün sayfanın tercihidir) | `more` (yüksek karşıtlık), `normal` (sistem tercihini kapatır); öznitelik yoksa işletim sistemi tercihi izlenir |
+
+İç içe tema `light-dark()` destekleyen tarayıcılarda çalışır (Chrome 123, Safari 17.5, Firefox 120
+ve sonrası); daha eski tarayıcılar temayı yalnız `<html data-theme>`'dan alır.
+
+Windows zorunlu renkler modu ve geniş renk uzaylı (P3) ekranlar kendiliğinden desteklenir.
+
+## Stilleri ezmek
+
+Paketin bütün stilleri CSS katmanlarındadır
+(`sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities`). Uygulamanın kendi
+(katmansız) CSS'i, seçici gücüne bakılmaksızın her zaman kazanır; `!important` gerekmez.
+
+## İçerik güvenlik politikası (CSP)
+
+Paket satır içi stil üretmez. Nonce'lu CSP kullanan uygulama `<head>` içine `CspNonceMeta` koyar.
+
+## Lisans
+
+MIT. Clash Display ve General Sans bu pakette yoktur ve bu lisansın kapsamında değildir. STI Numeric
+rakam yüzleri (`dist/fonts/`) SIL Open Font License 1.1 iledir (`dist/fonts/OFL.txt`).

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,12 @@
+// \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+export { __exportAll };

package/dist/components/Accent/Accent.css

@@ -0,0 +1,6 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Accent-root-647d8 {
+    color: var(--sti-fg-signal);
+  }
+}

package/dist/components/Accent/Accent.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export interface AccentProps {
+  children: ReactNode;
+}
+/**
+ * Başlıktaki vurgulu kelime (SİNYAL: başlığın son kelimesi turkuaz; tüm cümle değil). Renk
+ * `fg-signal`tir: koyu temada logonun turkuazı, açık temada okunur koyu tonu.
+ */
+export declare function Accent({ children }: AccentProps): import("react").JSX.Element;

package/dist/components/Accent/Accent.js

@@ -0,0 +1,14 @@
+import Accent_module_default from "./Accent.module.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/Accent/Accent.tsx
+/**
+* Başlıktaki vurgulu kelime (SİNYAL: başlığın son kelimesi turkuaz; tüm cümle değil). Renk
+* `fg-signal`tir: koyu temada logonun turkuazı, açık temada okunur koyu tonu.
+*/
+function Accent({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: Accent_module_default.root,
+		children
+	});
+}
+export { Accent };

package/dist/components/Accent/Accent.module.js

@@ -0,0 +1,4 @@
+import './Accent.css';
+// src/components/Accent/Accent.module.css
+var Accent_module_default = { "root": "sti-Accent-root-647d8" };
+export { Accent_module_default as default };

package/dist/components/Accent/index.d.ts

@@ -0,0 +1,2 @@
+import { Accent, AccentProps } from "./Accent.js";
+export { Accent, AccentProps };

package/dist/components/ActionBar/ActionBar.css

@@ -0,0 +1,74 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ActionBar-root-d3832 {
+    --sti-action-bar-bg: var(--sti-bg-canvas);
+    --sti-action-bar-py: var(--sti-space-3);
+    --sti-action-bar-px: 0px;
+    --sti-action-bar-gap: var(--sti-space-2);
+    --sti-action-bar-offset: 0px;
+    align-items: center;
+    gap: var(--sti-action-bar-gap) var(--sti-space-4);
+    min-width: 0;
+    padding-block: var(--sti-action-bar-py)
+      calc(var(--sti-action-bar-py) + env(safe-area-inset-bottom, 0px));
+    padding-inline: max(var(--sti-action-bar-px), env(safe-area-inset-left, 0px))
+      max(var(--sti-action-bar-px), env(safe-area-inset-right, 0px));
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-action-bar-bg);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-ActionBar-root-d3832[data-surface="surface"] {
+    --sti-action-bar-bg: var(--sti-bg-surface);
+  }
+
+  .sti-ActionBar-root-d3832[data-sticky] {
+    z-index: var(--sti-z-sticky);
+    position: sticky;
+    inset-block-end: var(--sti-action-bar-offset);
+  }
+
+  .sti-ActionBar-status-dd38f {
+    min-width: 0;
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    flex: auto;
+    margin: 0;
+  }
+
+  .sti-ActionBar-actions-71470 {
+    justify-content: flex-end;
+    gap: var(--sti-action-bar-gap);
+    flex-wrap: wrap;
+    min-width: 0;
+    margin-inline-start: auto;
+    display: flex;
+  }
+
+  @media (width <= 39.9375rem) {
+    .sti-ActionBar-root-d3832 {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0;
+    }
+
+    .sti-ActionBar-status-dd38f:not(:empty) {
+      margin-block-end: var(--sti-space-3);
+    }
+
+    .sti-ActionBar-actions-71470 {
+      grid-template-columns: minmax(0, 1fr);
+      margin-inline-start: 0;
+      display: grid;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ActionBar-root-d3832 {
+      border-block-start-color: canvastext;
+    }
+  }
+}