@logosphere-ui/core 0.0.0-alpha.40 → 0.0.0-alpha.43

package/AGENTS.md

@@ -36,45 +36,6 @@ import "@logosphere-ui/core/input";
 | **Hata/yardım** | `error="..."` ve `helper="..."` prop'ları tüm form bileşenlerinde mevcuttur |
 | **Disabled/Readonly** | Tüm form bileşenlerinde `disabled` ve `readonly` boolean prop'ları bulunur |
 | **Event dinleme** | `element.addEventListener("change", handler)` veya inline `@change=${handler}` (Lit) |
-| **Birleşik event** | Form bileşenleri (Input, Textarea, Checkbox, Switch, Combobox, DatePicker, TimePicker) ek olarak **`lgsChange`** yayınlar → `detail: { value?, checked?, selected? }`. Bileşene özel eski event'ler aynen korunur |
-
----
-
-## Tema: Bileşen Token Katmanı
-
-Global token'ları (`--color-secondary`, `--spacing-4` vb.) `:root`'ta ezmek **tüm** bileşenleri etkiler. Tek bir bileşeni tema'lamak için aşağıdaki bileşen token'larını kullanın — hepsi ilgili global token'a fallback yapar; hiçbirini tanımlamazsanız davranış değişmez.
-
-```css
-/* Örnek: sadece pagination'ı tema'la, diğer bileşenlere dokunma */
-logosphere-pagination {
-  --pagination-color: #0a58ca;
-  --pagination-padding: 8px 12px;
-}
-
-/* Örnek: eski tasarımın 36px form alanı */
-logosphere-input { --formfield-min-height: 36px; --input-field-height: 20px; }
-
-/* Örnek: focus'ta border rengi değişmesin */
-logosphere-input { --formfield-border-color-focus: var(--color-border); }
-
-/* Örnek: alan koyu, takvim popup'ı beyaz kalsın */
-logosphere-datepicker { --color-body-bg: #1e1e1e; --datepicker-popup-bg: #ffffff; }
-```
-
-| Bileşen | Token | Fallback |
-|---------|-------|----------|
-| FormField | `--formfield-min-height` / `--formfield-min-height-large` | `32px` / `40px` |
-| FormField | `--formfield-border-color` / `--formfield-border-color-focus` | `--color-border` / `--color-body-text` |
-| FormField | `--formfield-border-radius`, `--formfield-border-{top,right,bottom,left}[-width]` | `--radius-base`, `1px solid` |
-| Input | `--input-field-height` / `--input-field-height-large` | `16px` / `24px` |
-| DatePicker | `--datepicker-popup-bg` / `--datepicker-popup-border-color` | `--color-body-bg` / `--color-border` |
-| Pagination | `--pagination-color` / `--pagination-color-disabled` | `--color-secondary` / `--color-secondary-disabled` |
-| Pagination | `--pagination-bg` / `--pagination-item-bg` / `--pagination-item-bg-hover` | `--color-body-bg` / `--color-body-bg` / `--color-body-bg-hover` |
-| Pagination | `--pagination-active-bg` / `--pagination-active-color` | `--color-secondary` / `white` |
-| Pagination | `--pagination-padding` | `--spacing-4 --spacing-6` (mobil: `--spacing-3 --spacing-4`) |
-| Badge (default varyant) | `--badge-bg` / `--badge-color` | `--color-light-bg-2` / `--color-secondary` |
-| Chatbot | `--chatbot-bg` / `--chatbot-color` | `--color-body-bg` / `--color-secondary` |
-| Combobox | `--combobox-tag-bg` / `--combobox-tag-color` / `--combobox-clear-color` | `--color-light` / `--color-body-text` / `--color-secondary` |
 
 ---
 
@@ -166,8 +127,6 @@ Onay kutusu, toggle switch veya radio buton.
 
 **Events:** `lgsChange` → `detail: { checked, indeterminate, value }`
 
-> **Kontrollü kullanım:** `checked` property'sine yapılan her dış atama — değer öncekiyle aynı olsa bile — görsel state'i prop'a senkronlar. Parent bir seçimi reddederse (`lgsChange` sonrası `checked`'ı değişmeyen değerle yeniden atarsa) bileşen görsel olarak geri döner; iki radio'nun birden seçili kalması engellenir.
-
 ```html
 <logosphere-checkbox label="Beni hatırla" value="remember"></logosphere-checkbox>
 
@@ -200,7 +159,7 @@ Bağımsız toggle switch.
 | `disabled` | `boolean` | `false` | Devre dışı |
 | `size` | `"sm" \| "md"` | `"md"` | Boyut |
 
-**Events:** `change` → `detail: { checked }`, `lgsChange` → `detail: { checked }`
+**Events:** `change` → `detail: { checked }`
 
 ```html
 <logosphere-switch></logosphere-switch>
@@ -254,9 +213,6 @@ Metin girişi; maske, parola, temizle ve tüm formfield özellikleri.
 | `placeholder` | `string` | `""` | Yer tutucu |
 | `name` | `string` | `""` | Form adı |
 | `mask` | `string` | `""` | Giriş maskesi: `0`=rakam, `a`=harf, `*`=rakam/harf, diğerleri literal. Örn: `"(000) 000-0000"`, `"00/00/0000"`, `"00:00"` |
-| `showPasswordToggle` | `boolean` | `true` | `type="password"` iken göster/gizle butonunu render et (attribute: `show-password-toggle`). Şifrenin hiç gösterilmemesi gereken ekranlarda `false` verin |
-| `suppressNativeValidation` | `boolean` | `false` | Tarayıcının yerel (dil bağımlı) `validationMessage`'ının iç hata olarak gösterilmesini kapatır (attribute: `suppress-native-validation`). Uygulama kendi hata metnini yönetiyorsa açın |
-| `errorDisplay` | `"always" \| "on-invalid"` | `"always"` | Hata gösterim modu (attribute: `error-display`). `"on-invalid"`: hata yalnızca alan geçersizken görünür — blur/change'de doğrulanır, yazarken temizlenir (vaadin semantiği) |
 | `label` | `string` | `""` | Etiket |
 | `helper` | `string` | `""` | Yardım metni |
 | `error` | `string` | `""` | Hata mesajı |
@@ -344,7 +300,7 @@ Metin girişi; maske, parola, temizle ve tüm formfield özellikleri.
 | `size` | `"default" \| "large"` | `"default"` | Boyut |
 | `variant` | `"default" \| "subtle"` | `"default"` | Stil |
 
-**Events:** `input`, `change`, `clear`, `keydown`, `keyup`, `lgsChange` → `detail: { value }`
+**Events:** `input`, `change`, `clear`, `keydown`, `keyup`
 
 ```html
 <!-- Temel kullanım -->
@@ -392,7 +348,7 @@ Başlık, içerik ve ayak bölümü olan kart.
 
 | Property | Tip | Varsayılan | Açıklama |
 |----------|-----|-----------|---------|
-| `title` | `string` | `""` | Kart başlığı |
+| `title` | `string` | `""` | Kart başlığı (attribute: `card-title`) |
 | `description` | `string` | `""` | Başlık altı açıklama |
 | `header` | `boolean` | `true` | Başlık bölümünü göster |
 | `footer` | `boolean` | `true` | Ayak bölümünü göster |
@@ -407,13 +363,13 @@ Başlık, içerik ve ayak bölümü olan kart.
 
 ```html
 <!-- Temel kart -->
-<logosphere-card title="Kullanıcı Bilgileri" description="Profil bilgilerinizi güncelleyin">
+<logosphere-card card-title="Kullanıcı Bilgileri" description="Profil bilgilerinizi güncelleyin">
   <logosphere-input label="Ad" placeholder="Adınızı girin"></logosphere-input>
   <logosphere-input label="E-posta" type="email"></logosphere-input>
 </logosphere-card>
 
 <!-- Onay diyaloğu gibi -->
-<logosphere-card title="Emin misiniz?" okLabel="Evet, Sil" cancelLabel="Hayır">
+<logosphere-card card-title="Emin misiniz?" okLabel="Evet, Sil" cancelLabel="Hayır">
   Bu işlem geri alınamaz.
 </logosphere-card>
 
@@ -433,7 +389,7 @@ Tetikleyici elemana konumlanmış açılır panel.
 
 | Property | Tip | Varsayılan | Açıklama |
 |----------|-----|-----------|---------|
-| `title` | `string` | `""` | Popover başlığı |
+| `title` | `string` | `""` | Popover başlığı (attribute: `popover-title`) |
 | `trigger` | `"click" \| "hover"` | `"click"` | Açılma tetikleyicisi |
 | `placement` | Popper Placement | `"bottom"` | Konum (`"top"`, `"bottom"`, `"left"`, `"right"`, `"bottom-start"` vb.) |
 | `offset` | `number` | `8` | Tetikleyiciden mesafe (px) |
@@ -445,7 +401,7 @@ Tetikleyici elemana konumlanmış açılır panel.
 **Slots:** `trigger` (tetikleyici element), varsayılan (panel içeriği)
 
 ```html
-<logosphere-popover title="Yardım">
+<logosphere-popover popover-title="Yardım">
   <logosphere-button slot="trigger" variant="outline">?</logosphere-button>
   Bu alan, kullanıcının tam adını içermelidir.
 </logosphere-popover>
@@ -473,7 +429,7 @@ Tetikleyici elemana konumlanmış açılır panel.
 | `variant` | `"default" \| "subtle"` | `"default"` | Stil |
 | `onChange` | `(value: string) => void` | — | Değişim callback'i (attribute değil) |
 
-**Events:** `change` → `detail: { value }`, `clear`, `lgsChange` → `detail: { value }`
+**Events:** `change` → `detail: { value }`, `clear`
 
 ```html
 <!-- Temel kullanım -->
@@ -528,7 +484,7 @@ Seçim kutusu: tekli/çoklu seçim, filtreleme, tag desteği.
 
 **Public Metotlar:** `selectedItems()` → seçili öğe dizisi, `isSelected(item)`, `setSelected(items[])`
 
-**Events:** `selected` → `detail: { selected }`, `change` → `detail: { value }`, `lgsChange` → `detail: { value, selected }` (value = primitive `optionValue` değer(ler)i)
+**Events:** `selected` → `detail: { selected }`, `change` → `detail: { value }`
 
 ```html
 <logosphere-combobox
@@ -585,7 +541,7 @@ Tarih seçici; manuel yazma ve takvim popup'ı. `dayjs` tabanlı.
 | `onChange` | `(value: string) => void` | — | Değişim callback'i |
 | `onRangeChange` | `(range) => void` | — | Aralık callback'i |
 
-**Events:** `change` → `detail: { value }`, `rangeChange` → `detail: { start, end }`, `lgsChange` → `detail: { value }`
+**Events:** `change` → `detail: { value }`, `rangeChange` → `detail: { start, end }`
 
 ```html
 <!-- Temel kullanım -->
@@ -649,7 +605,7 @@ Tam ekran arka planlı modal diyalog.
 | Property | Tip | Varsayılan | Açıklama |
 |----------|-----|-----------|---------|
 | `open` | `boolean` | `false` | Açık mı (reflect) |
-| `title` | `string` | `""` | Modal başlığı |
+| `title` | `string` | `""` | Modal başlığı (attribute: `modal-title`) |
 | `closeOnEsc` | `boolean` | `true` | Esc ile kapat |
 | `closeOnBackdrop` | `boolean` | `true` | Arka plana tıklayınca kapat |
 | `showBack` | `boolean` | `false` | Geri butonu göster |
@@ -662,7 +618,7 @@ Tam ekran arka planlı modal diyalog.
 **Slots:** `header`, varsayılan (gövde), `footer`
 
 ```html
-<logosphere-modal id="my-modal" title="Düzenle" showClose>
+<logosphere-modal id="my-modal" modal-title="Düzenle" showClose>
   <logosphere-input label="Ad"></logosphere-input>
   <div slot="footer">
     <logosphere-button variant="outline" id="cancel-btn">İptal</logosphere-button>
@@ -686,7 +642,7 @@ Yan panel; sağdan veya soldan açılır.
 | Property | Tip | Varsayılan | Açıklama |
 |----------|-----|-----------|---------|
 | `open` | `boolean` | `false` | Açık mı (reflect) |
-| `title` | `string` | `""` | Panel başlığı |
+| `title` | `string` | `""` | Panel başlığı (attribute: `drawer-title`) |
 | `position` | `"left" \| "right"` | `"right"` | Hangi taraftan açılsın |
 | `width` | `number` | `360` | Genişlik (px) |
 | `closeOnEsc` | `boolean` | `true` | Esc ile kapat |
@@ -699,7 +655,7 @@ Yan panel; sağdan veya soldan açılır.
 **Slots:** `trigger` (açma butonu), varsayılan (panel gövdesi)
 
 ```html
-<logosphere-drawer title="Filtreler" position="right" width="400">
+<logosphere-drawer drawer-title="Filtreler" position="right" width="400">
   <logosphere-button slot="trigger" variant="outline">
     Filtreleri Aç
   </logosphere-button>
@@ -721,7 +677,7 @@ Bildirim mesajı. Genellikle doğrudan kullanmak yerine `ToastService` kullanıl
 | Property | Tip | Varsayılan | Açıklama |
 |----------|-----|-----------|---------|
 | `type` | `"info" \| "success" \| "warning" \| "danger"` | `"info"` | Ikon/renk tipi |
-| `title` | `string` | `""` | Başlık |
+| `title` | `string` | `""` | Başlık (attribute: `toast-title`) |
 | `text` | `string` | `""` | Açıklama metni |
 | `icon` | `string` | `""` | Özel ikon adı |
 | `closeable` | `boolean` | `true` | Manuel kapatma butonu |
@@ -961,7 +917,7 @@ SVG ikon bileşeni. `icon-map.ts`'deki kayıtlı ikonları isimle render eder.
 
 ```html
 <div style="min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--color-body-bg)">
-  <logosphere-card title="Giriş Yap" description="Hesabınıza erişin" style="width:400px">
+  <logosphere-card card-title="Giriş Yap" description="Hesabınıza erişin" style="width:400px">
     <div style="display:flex; flex-direction:column; gap:16px">
       <logosphere-input
         type="email"
@@ -995,7 +951,7 @@ SVG ikon bileşeni. `icon-map.ts`'deki kayıtlı ikonları isimle render eder.
     <ui-icon slot="prefix" name="uil-search" size="16"></ui-icon>
   </logosphere-input>
 
-  <logosphere-drawer title="Filtreler" position="right">
+  <logosphere-drawer drawer-title="Filtreler" position="right">
     <logosphere-button slot="trigger" variant="outline">Filtre</logosphere-button>
 
     <div style="display:flex; flex-direction:column; gap:12px; padding:16px">
@@ -1085,7 +1041,7 @@ SVG ikon bileşeni. `icon-map.ts`'deki kayıtlı ikonları isimle render eder.
 ### Silme Onay Modalı
 
 ```html
-<logosphere-modal id="delete-modal" title="Kaydı Sil" showClose closeOnEsc>
+<logosphere-modal id="delete-modal" modal-title="Kaydı Sil" showClose closeOnEsc>
   <p>Bu kaydı silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.</p>
 
   <div slot="footer" style="display:flex; gap:8px; justify-content:flex-end">

package/dist/AGENTS.md

@@ -36,45 +36,6 @@ import "@logosphere-ui/core/input";
 | **Hata/yardım** | `error="..."` ve `helper="..."` prop'ları tüm form bileşenlerinde mevcuttur |
 | **Disabled/Readonly** | Tüm form bileşenlerinde `disabled` ve `readonly` boolean prop'ları bulunur |
 | **Event dinleme** | `element.addEventListener("change", handler)` veya inline `@change=${handler}` (Lit) |
-| **Birleşik event** | Form bileşenleri (Input, Textarea, Checkbox, Switch, Combobox, DatePicker, TimePicker) ek olarak **`lgsChange`** yayınlar → `detail: { value?, checked?, selected? }`. Bileşene özel eski event'ler aynen korunur |
-
----
-
-## Tema: Bileşen Token Katmanı
-
-Global token'ları (`--color-secondary`, `--spacing-4` vb.) `:root`'ta ezmek **tüm** bileşenleri etkiler. Tek bir bileşeni tema'lamak için aşağıdaki bileşen token'larını kullanın — hepsi ilgili global token'a fallback yapar; hiçbirini tanımlamazsanız davranış değişmez.
-
-```css
-/* Örnek: sadece pagination'ı tema'la, diğer bileşenlere dokunma */
-logosphere-pagination {
-  --pagination-color: #0a58ca;
-  --pagination-padding: 8px 12px;
-}
-
-/* Örnek: eski tasarımın 36px form alanı */
-logosphere-input { --formfield-min-height: 36px; --input-field-height: 20px; }
-
-/* Örnek: focus'ta border rengi değişmesin */
-logosphere-input { --formfield-border-color-focus: var(--color-border); }
-
-/* Örnek: alan koyu, takvim popup'ı beyaz kalsın */
-logosphere-datepicker { --color-body-bg: #1e1e1e; --datepicker-popup-bg: #ffffff; }
-```
-
-| Bileşen | Token | Fallback |
-|---------|-------|----------|
-| FormField | `--formfield-min-height` / `--formfield-min-height-large` | `32px` / `40px` |
-| FormField | `--formfield-border-color` / `--formfield-border-color-focus` | `--color-border` / `--color-body-text` |
-| FormField | `--formfield-border-radius`, `--formfield-border-{top,right,bottom,left}[-width]` | `--radius-base`, `1px solid` |
-| Input | `--input-field-height` / `--input-field-height-large` | `16px` / `24px` |
-| DatePicker | `--datepicker-popup-bg` / `--datepicker-popup-border-color` | `--color-body-bg` / `--color-border` |
-| Pagination | `--pagination-color` / `--pagination-color-disabled` | `--color-secondary` / `--color-secondary-disabled` |
-| Pagination | `--pagination-bg` / `--pagination-item-bg` / `--pagination-item-bg-hover` | `--color-body-bg` / `--color-body-bg` / `--color-body-bg-hover` |
-| Pagination | `--pagination-active-bg` / `--pagination-active-color` | `--color-secondary` / `white` |
-| Pagination | `--pagination-padding` | `--spacing-4 --spacing-6` (mobil: `--spacing-3 --spacing-4`) |
-| Badge (default varyant) | `--badge-bg` / `--badge-color` | `--color-light-bg-2` / `--color-secondary` |
-| Chatbot | `--chatbot-bg` / `--chatbot-color` | `--color-body-bg` / `--color-secondary` |
-| Combobox | `--combobox-tag-bg` / `--combobox-tag-color` / `--combobox-clear-color` | `--color-light` / `--color-body-text` / `--color-secondary` |
 
 ---
 
@@ -166,8 +127,6 @@ Onay kutusu, toggle switch veya radio buton.
 
 **Events:** `lgsChange` → `detail: { checked, indeterminate, value }`
 
-> **Kontrollü kullanım:** `checked` property'sine yapılan her dış atama — değer öncekiyle aynı olsa bile — görsel state'i prop'a senkronlar. Parent bir seçimi reddederse (`lgsChange` sonrası `checked`'ı değişmeyen değerle yeniden atarsa) bileşen görsel olarak geri döner; iki radio'nun birden seçili kalması engellenir.
-
 ```html
 <logosphere-checkbox label="Beni hatırla" value="remember"></logosphere-checkbox>
 
@@ -200,7 +159,7 @@ Bağımsız toggle switch.
 | `disabled` | `boolean` | `false` | Devre dışı |
 | `size` | `"sm" \| "md"` | `"md"` | Boyut |
 
-**Events:** `change` → `detail: { checked }`, `lgsChange` → `detail: { checked }`
+**Events:** `change` → `detail: { checked }`
 
 ```html
 <logosphere-switch></logosphere-switch>
@@ -254,9 +213,6 @@ Metin girişi; maske, parola, temizle ve tüm formfield özellikleri.
 | `placeholder` | `string` | `""` | Yer tutucu |
 | `name` | `string` | `""` | Form adı |
 | `mask` | `string` | `""` | Giriş maskesi: `0`=rakam, `a`=harf, `*`=rakam/harf, diğerleri literal. Örn: `"(000) 000-0000"`, `"00/00/0000"`, `"00:00"` |
-| `showPasswordToggle` | `boolean` | `true` | `type="password"` iken göster/gizle butonunu render et (attribute: `show-password-toggle`). Şifrenin hiç gösterilmemesi gereken ekranlarda `false` verin |
-| `suppressNativeValidation` | `boolean` | `false` | Tarayıcının yerel (dil bağımlı) `validationMessage`'ının iç hata olarak gösterilmesini kapatır (attribute: `suppress-native-validation`). Uygulama kendi hata metnini yönetiyorsa açın |
-| `errorDisplay` | `"always" \| "on-invalid"` | `"always"` | Hata gösterim modu (attribute: `error-display`). `"on-invalid"`: hata yalnızca alan geçersizken görünür — blur/change'de doğrulanır, yazarken temizlenir (vaadin semantiği) |
 | `label` | `string` | `""` | Etiket |
 | `helper` | `string` | `""` | Yardım metni |
 | `error` | `string` | `""` | Hata mesajı |
@@ -344,7 +300,7 @@ Metin girişi; maske, parola, temizle ve tüm formfield özellikleri.
 | `size` | `"default" \| "large"` | `"default"` | Boyut |
 | `variant` | `"default" \| "subtle"` | `"default"` | Stil |
 
-**Events:** `input`, `change`, `clear`, `keydown`, `keyup`, `lgsChange` → `detail: { value }`
+**Events:** `input`, `change`, `clear`, `keydown`, `keyup`
 
 ```html
 <!-- Temel kullanım -->
@@ -392,7 +348,7 @@ Başlık, içerik ve ayak bölümü olan kart.
 
 | Property | Tip | Varsayılan | Açıklama |
 |----------|-----|-----------|---------|
-| `title` | `string` | `""` | Kart başlığı |
+| `title` | `string` | `""` | Kart başlığı (attribute: `card-title`) |
 | `description` | `string` | `""` | Başlık altı açıklama |
 | `header` | `boolean` | `true` | Başlık bölümünü göster |
 | `footer` | `boolean` | `true` | Ayak bölümünü göster |
@@ -407,13 +363,13 @@ Başlık, içerik ve ayak bölümü olan kart.
 
 ```html
 <!-- Temel kart -->
-<logosphere-card title="Kullanıcı Bilgileri" description="Profil bilgilerinizi güncelleyin">
+<logosphere-card card-title="Kullanıcı Bilgileri" description="Profil bilgilerinizi güncelleyin">
   <logosphere-input label="Ad" placeholder="Adınızı girin"></logosphere-input>
   <logosphere-input label="E-posta" type="email"></logosphere-input>
 </logosphere-card>
 
 <!-- Onay diyaloğu gibi -->
-<logosphere-card title="Emin misiniz?" okLabel="Evet, Sil" cancelLabel="Hayır">
+<logosphere-card card-title="Emin misiniz?" okLabel="Evet, Sil" cancelLabel="Hayır">
   Bu işlem geri alınamaz.
 </logosphere-card>
 
@@ -433,7 +389,7 @@ Tetikleyici elemana konumlanmış açılır panel.
 
 | Property | Tip | Varsayılan | Açıklama |
 |----------|-----|-----------|---------|
-| `title` | `string` | `""` | Popover başlığı |
+| `title` | `string` | `""` | Popover başlığı (attribute: `popover-title`) |
 | `trigger` | `"click" \| "hover"` | `"click"` | Açılma tetikleyicisi |
 | `placement` | Popper Placement | `"bottom"` | Konum (`"top"`, `"bottom"`, `"left"`, `"right"`, `"bottom-start"` vb.) |
 | `offset` | `number` | `8` | Tetikleyiciden mesafe (px) |
@@ -445,7 +401,7 @@ Tetikleyici elemana konumlanmış açılır panel.
 **Slots:** `trigger` (tetikleyici element), varsayılan (panel içeriği)
 
 ```html
-<logosphere-popover title="Yardım">
+<logosphere-popover popover-title="Yardım">
   <logosphere-button slot="trigger" variant="outline">?</logosphere-button>
   Bu alan, kullanıcının tam adını içermelidir.
 </logosphere-popover>
@@ -473,7 +429,7 @@ Tetikleyici elemana konumlanmış açılır panel.
 | `variant` | `"default" \| "subtle"` | `"default"` | Stil |
 | `onChange` | `(value: string) => void` | — | Değişim callback'i (attribute değil) |
 
-**Events:** `change` → `detail: { value }`, `clear`, `lgsChange` → `detail: { value }`
+**Events:** `change` → `detail: { value }`, `clear`
 
 ```html
 <!-- Temel kullanım -->
@@ -528,7 +484,7 @@ Seçim kutusu: tekli/çoklu seçim, filtreleme, tag desteği.
 
 **Public Metotlar:** `selectedItems()` → seçili öğe dizisi, `isSelected(item)`, `setSelected(items[])`
 
-**Events:** `selected` → `detail: { selected }`, `change` → `detail: { value }`, `lgsChange` → `detail: { value, selected }` (value = primitive `optionValue` değer(ler)i)
+**Events:** `selected` → `detail: { selected }`, `change` → `detail: { value }`
 
 ```html
 <logosphere-combobox
@@ -585,7 +541,7 @@ Tarih seçici; manuel yazma ve takvim popup'ı. `dayjs` tabanlı.
 | `onChange` | `(value: string) => void` | — | Değişim callback'i |
 | `onRangeChange` | `(range) => void` | — | Aralık callback'i |
 
-**Events:** `change` → `detail: { value }`, `rangeChange` → `detail: { start, end }`, `lgsChange` → `detail: { value }`
+**Events:** `change` → `detail: { value }`, `rangeChange` → `detail: { start, end }`
 
 ```html
 <!-- Temel kullanım -->
@@ -649,7 +605,7 @@ Tam ekran arka planlı modal diyalog.
 | Property | Tip | Varsayılan | Açıklama |
 |----------|-----|-----------|---------|
 | `open` | `boolean` | `false` | Açık mı (reflect) |
-| `title` | `string` | `""` | Modal başlığı |
+| `title` | `string` | `""` | Modal başlığı (attribute: `modal-title`) |
 | `closeOnEsc` | `boolean` | `true` | Esc ile kapat |
 | `closeOnBackdrop` | `boolean` | `true` | Arka plana tıklayınca kapat |
 | `showBack` | `boolean` | `false` | Geri butonu göster |
@@ -662,7 +618,7 @@ Tam ekran arka planlı modal diyalog.
 **Slots:** `header`, varsayılan (gövde), `footer`
 
 ```html
-<logosphere-modal id="my-modal" title="Düzenle" showClose>
+<logosphere-modal id="my-modal" modal-title="Düzenle" showClose>
   <logosphere-input label="Ad"></logosphere-input>
   <div slot="footer">
     <logosphere-button variant="outline" id="cancel-btn">İptal</logosphere-button>
@@ -686,7 +642,7 @@ Yan panel; sağdan veya soldan açılır.
 | Property | Tip | Varsayılan | Açıklama |
 |----------|-----|-----------|---------|
 | `open` | `boolean` | `false` | Açık mı (reflect) |
-| `title` | `string` | `""` | Panel başlığı |
+| `title` | `string` | `""` | Panel başlığı (attribute: `drawer-title`) |
 | `position` | `"left" \| "right"` | `"right"` | Hangi taraftan açılsın |
 | `width` | `number` | `360` | Genişlik (px) |
 | `closeOnEsc` | `boolean` | `true` | Esc ile kapat |
@@ -699,7 +655,7 @@ Yan panel; sağdan veya soldan açılır.
 **Slots:** `trigger` (açma butonu), varsayılan (panel gövdesi)
 
 ```html
-<logosphere-drawer title="Filtreler" position="right" width="400">
+<logosphere-drawer drawer-title="Filtreler" position="right" width="400">
   <logosphere-button slot="trigger" variant="outline">
     Filtreleri Aç
   </logosphere-button>
@@ -721,7 +677,7 @@ Bildirim mesajı. Genellikle doğrudan kullanmak yerine `ToastService` kullanıl
 | Property | Tip | Varsayılan | Açıklama |
 |----------|-----|-----------|---------|
 | `type` | `"info" \| "success" \| "warning" \| "danger"` | `"info"` | Ikon/renk tipi |
-| `title` | `string` | `""` | Başlık |
+| `title` | `string` | `""` | Başlık (attribute: `toast-title`) |
 | `text` | `string` | `""` | Açıklama metni |
 | `icon` | `string` | `""` | Özel ikon adı |
 | `closeable` | `boolean` | `true` | Manuel kapatma butonu |
@@ -961,7 +917,7 @@ SVG ikon bileşeni. `icon-map.ts`'deki kayıtlı ikonları isimle render eder.
 
 ```html
 <div style="min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--color-body-bg)">
-  <logosphere-card title="Giriş Yap" description="Hesabınıza erişin" style="width:400px">
+  <logosphere-card card-title="Giriş Yap" description="Hesabınıza erişin" style="width:400px">
     <div style="display:flex; flex-direction:column; gap:16px">
       <logosphere-input
         type="email"
@@ -995,7 +951,7 @@ SVG ikon bileşeni. `icon-map.ts`'deki kayıtlı ikonları isimle render eder.
     <ui-icon slot="prefix" name="uil-search" size="16"></ui-icon>
   </logosphere-input>
 
-  <logosphere-drawer title="Filtreler" position="right">
+  <logosphere-drawer drawer-title="Filtreler" position="right">
     <logosphere-button slot="trigger" variant="outline">Filtre</logosphere-button>
 
     <div style="display:flex; flex-direction:column; gap:12px; padding:16px">
@@ -1085,7 +1041,7 @@ SVG ikon bileşeni. `icon-map.ts`'deki kayıtlı ikonları isimle render eder.
 ### Silme Onay Modalı
 
 ```html
-<logosphere-modal id="delete-modal" title="Kaydı Sil" showClose closeOnEsc>
+<logosphere-modal id="delete-modal" modal-title="Kaydı Sil" showClose closeOnEsc>
   <p>Bu kaydı silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.</p>
 
   <div slot="footer" style="display:flex; gap:8px; justify-content:flex-end">

package/dist/atoms/Checkbox/checkbox.d.ts

@@ -3,22 +3,13 @@ export declare class Checkbox extends LitElement {
     static styles: import("lit").CSSResult[];
     label: string;
     value: string;
+    checked: boolean;
     type: "checkbox" | "switch" | "radio";
     disabled: boolean;
     indeterminate: boolean;
     private internalChecked;
     private inputElement?;
-    private _checked;
-    /**
-     * Custom accessor: her dış atama — değer öncekiyle AYNI olsa bile — iç
-     * görsel state'i prop'a senkronlar. Lit'in standart accessor'ı aynı değeri
-     * dirty-check'te yuttuğu için, kontrollü kullanımda parent'ın "reddi"
-     * (checked'ı değişmeyen değerle yeniden ataması) görsele yansımıyordu:
-     * tıklama internalChecked'ı optimistik set eder, parent reddedince geri
-     * alınamazdı (örn. iki radio birden seçili kalırdı).
-     */
-    get checked(): boolean;
-    set checked(value: boolean);
+    connectedCallback(): void;
     firstUpdated(): void;
     updated(changedProps: Map<string, unknown>): void;
     private setIndeterminate;

package/dist/atoms/FormField/formfield.d.ts

@@ -21,7 +21,6 @@ export declare class FormField extends LitElement {
     private _hovered;
     private _hasPrefix;
     private _hasSuffix;
-    private _hasClear;
     private handleSlotFocus;
     private handleSlotBlur;
     private handleMouseEnter;
@@ -29,7 +28,6 @@ export declare class FormField extends LitElement {
     private handleContainerClick;
     private handlePrefixSlotChange;
     private handleSuffixSlotChange;
-    private handleClearSlotChange;
     connectedCallback(): void;
     firstUpdated(): void;
     disconnectedCallback(): void;

package/dist/{badge-B0Bj-HAT.js → badge-DsDxWEHx.js}

@@ -1,11 +1,11 @@
 import { unsafeCSS as p, css as u, LitElement as b, nothing as d, html as g } from "lit";
-import { property as r, customElement as h } from "lit/decorators.js";
-import "./ui-icon-Ckljc9hg.js";
-const f = ":host{display:inline-block}.badge{display:inline-flex;align-items:center;gap:var(--spacing-1);font-family:var(--font-family-base);font-size:11px;font-weight:var(--font-weight-medium);line-height:1rem;letter-spacing:-.11px;border-radius:var(--radius-base);white-space:nowrap;-webkit-user-select:none;user-select:none}.badge--default-size{min-height:24px;max-height:24px;padding:var(--spacing-0) var(--spacing-2)}.badge--small{min-height:16px;max-height:16px;padding:0 var(--spacing-2)}.badge--round{border-radius:var(--radius-full)}.badge--primary{background-color:var(--color-primary);color:var(--color-secondary-color, #ffffff)}.badge--default{background-color:var(--badge-bg, var(--color-light-bg-2));color:var(--badge-color, var(--color-secondary))}.badge--warning{background-color:var( --color-warning-subtle);color:var(--color-warning-emphasis)}.badge--success{background-color:var(--color-success-subtle);color:var(--color-success-emphasis)}.badge--danger{background-color:var(--color-danger-subtle);color:var(--color-danger)}.badge--info{background-color:var(--color-info-subtle);color:var(--color-info-emphasis)}.badge--purple{background-color:var(--color-commercial-subtle);color:var(--color-commercial-emphasis)}.badge__close{display:inline-flex;align-items:center;justify-content:center;margin-left:var(--spacing-1);padding:0;background:none;border:none;cursor:pointer;color:inherit;opacity:.75;transition:opacity var(--transition-speed-fast) var(--transition-timing);line-height:1}.badge__close:hover{opacity:1}.badge__close:focus{outline:none;opacity:1}";
-var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (s, t, l, i) => {
-  for (var o = i > 1 ? void 0 : i ? m(t, l) : t, n = s.length - 1, c; n >= 0; n--)
-    (c = s[n]) && (o = (i ? c(t, l, o) : c(o)) || o);
-  return i && o && v(t, l, o), o;
+import { property as a, customElement as h } from "lit/decorators.js";
+import "./ui-icon-BMJNdIOq.js";
+const f = ".badge{display:inline-flex;align-items:center;gap:var(--spacing-1);font-family:var(--font-family-base);font-size:11px;font-weight:var(--font-weight-medium);line-height:1rem;letter-spacing:-.11px;border-radius:var(--radius-base);white-space:nowrap;-webkit-user-select:none;user-select:none}.badge--default-size{min-height:24px;max-height:24px;padding:var(--spacing-0) var(--spacing-2)}.badge--small{min-height:16px;max-height:16px;padding:0 var(--spacing-2)}.badge--round{border-radius:var(--radius-full)}.badge--primary{background-color:var(--color-primary);color:var(--color-secondary-color, #ffffff)}.badge--default{background-color:var(--color-light-bg-2);color:var(--color-secondary)}.badge--warning{background-color:var( --color-warning-subtle);color:var(--color-warning-emphasis)}.badge--success{background-color:var(--color-success-subtle);color:var(--color-success-emphasis)}.badge--danger{background-color:var(--color-danger-subtle);color:var(--color-danger)}.badge--info{background-color:var(--color-info-subtle);color:var(--color-info-emphasis)}.badge--purple{background-color:var(--color-commercial-subtle);color:var(--color-commercial-emphasis)}.badge__close{display:inline-flex;align-items:center;justify-content:center;margin-left:var(--spacing-1);padding:0;background:none;border:none;cursor:pointer;color:inherit;opacity:.75;transition:opacity var(--transition-speed-fast) var(--transition-timing);line-height:1}.badge__close:hover{opacity:1}.badge__close:focus{outline:none;opacity:1}";
+var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (s, t, n, i) => {
+  for (var o = i > 1 ? void 0 : i ? v(t, n) : t, l = s.length - 1, c; l >= 0; l--)
+    (c = s[l]) && (o = (i ? c(t, n, o) : c(o)) || o);
+  return i && o && m(t, n, o), o;
 };
 let e = class extends b {
   constructor() {
@@ -46,25 +46,25 @@ e.styles = [
       ${p(f)}
     `
 ];
-a([
-  r({ type: String })
+r([
+  a({ type: String })
 ], e.prototype, "variant", 2);
-a([
-  r({ type: String })
+r([
+  a({ type: String })
 ], e.prototype, "size", 2);
-a([
-  r({ type: String })
+r([
+  a({ type: String })
 ], e.prototype, "text", 2);
-a([
-  r({ type: Boolean })
+r([
+  a({ type: Boolean })
 ], e.prototype, "closeable", 2);
-a([
-  r({ type: Boolean })
+r([
+  a({ type: Boolean })
 ], e.prototype, "isRound", 2);
-a([
-  r({ attribute: !1 })
+r([
+  a({ attribute: !1 })
 ], e.prototype, "onClose", 2);
-e = a([
+e = r([
   h("logosphere-badge")
 ], e);
 export {

package/dist/{badge-DWkKpZTX.cjs → badge-DvaKpUHe.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("lit"),a=require("lit/decorators.js");require("./ui-icon-Cd5YhUeQ.cjs");const g=":host{display:inline-block}.badge{display:inline-flex;align-items:center;gap:var(--spacing-1);font-family:var(--font-family-base);font-size:11px;font-weight:var(--font-weight-medium);line-height:1rem;letter-spacing:-.11px;border-radius:var(--radius-base);white-space:nowrap;-webkit-user-select:none;user-select:none}.badge--default-size{min-height:24px;max-height:24px;padding:var(--spacing-0) var(--spacing-2)}.badge--small{min-height:16px;max-height:16px;padding:0 var(--spacing-2)}.badge--round{border-radius:var(--radius-full)}.badge--primary{background-color:var(--color-primary);color:var(--color-secondary-color, #ffffff)}.badge--default{background-color:var(--badge-bg, var(--color-light-bg-2));color:var(--badge-color, var(--color-secondary))}.badge--warning{background-color:var( --color-warning-subtle);color:var(--color-warning-emphasis)}.badge--success{background-color:var(--color-success-subtle);color:var(--color-success-emphasis)}.badge--danger{background-color:var(--color-danger-subtle);color:var(--color-danger)}.badge--info{background-color:var(--color-info-subtle);color:var(--color-info-emphasis)}.badge--purple{background-color:var(--color-commercial-subtle);color:var(--color-commercial-emphasis)}.badge__close{display:inline-flex;align-items:center;justify-content:center;margin-left:var(--spacing-1);padding:0;background:none;border:none;cursor:pointer;color:inherit;opacity:.75;transition:opacity var(--transition-speed-fast) var(--transition-timing);line-height:1}.badge__close:hover{opacity:1}.badge__close:focus{outline:none;opacity:1}";var p=Object.defineProperty,d=Object.getOwnPropertyDescriptor,s=(i,o,n,t)=>{for(var r=t>1?void 0:t?d(o,n):o,l=i.length-1,c;l>=0;l--)(c=i[l])&&(r=(t?c(o,n,r):c(r))||r);return t&&r&&p(o,n,r),r};exports.LogosphereBadge=class extends e.LitElement{constructor(){super(...arguments),this.variant="default",this.size="default",this.text="",this.closeable=!1,this.isRound=!1}handleClose(){this.onClose&&this.onClose(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}getBadgeClasses(){const o=["badge",`badge--${this.variant}`,this.size==="small"?"badge--small":"badge--default-size"];return this.isRound&&o.push("badge--round"),o.join(" ")}render(){return e.html`
+"use strict";const e=require("lit"),a=require("lit/decorators.js");require("./ui-icon-DIucAQC_.cjs");const g=".badge{display:inline-flex;align-items:center;gap:var(--spacing-1);font-family:var(--font-family-base);font-size:11px;font-weight:var(--font-weight-medium);line-height:1rem;letter-spacing:-.11px;border-radius:var(--radius-base);white-space:nowrap;-webkit-user-select:none;user-select:none}.badge--default-size{min-height:24px;max-height:24px;padding:var(--spacing-0) var(--spacing-2)}.badge--small{min-height:16px;max-height:16px;padding:0 var(--spacing-2)}.badge--round{border-radius:var(--radius-full)}.badge--primary{background-color:var(--color-primary);color:var(--color-secondary-color, #ffffff)}.badge--default{background-color:var(--color-light-bg-2);color:var(--color-secondary)}.badge--warning{background-color:var( --color-warning-subtle);color:var(--color-warning-emphasis)}.badge--success{background-color:var(--color-success-subtle);color:var(--color-success-emphasis)}.badge--danger{background-color:var(--color-danger-subtle);color:var(--color-danger)}.badge--info{background-color:var(--color-info-subtle);color:var(--color-info-emphasis)}.badge--purple{background-color:var(--color-commercial-subtle);color:var(--color-commercial-emphasis)}.badge__close{display:inline-flex;align-items:center;justify-content:center;margin-left:var(--spacing-1);padding:0;background:none;border:none;cursor:pointer;color:inherit;opacity:.75;transition:opacity var(--transition-speed-fast) var(--transition-timing);line-height:1}.badge__close:hover{opacity:1}.badge__close:focus{outline:none;opacity:1}";var p=Object.defineProperty,d=Object.getOwnPropertyDescriptor,s=(i,o,n,t)=>{for(var r=t>1?void 0:t?d(o,n):o,l=i.length-1,c;l>=0;l--)(c=i[l])&&(r=(t?c(o,n,r):c(r))||r);return t&&r&&p(o,n,r),r};exports.LogosphereBadge=class extends e.LitElement{constructor(){super(...arguments),this.variant="default",this.size="default",this.text="",this.closeable=!1,this.isRound=!1}handleClose(){this.onClose&&this.onClose(),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}getBadgeClasses(){const o=["badge",`badge--${this.variant}`,this.size==="small"?"badge--small":"badge--default-size"];return this.isRound&&o.push("badge--round"),o.join(" ")}render(){return e.html`
       <div class="${this.getBadgeClasses()}">
         <slot></slot>
         ${this.text?e.html`<span>${this.text}</span>`:e.nothing}

package/dist/badge.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./badge-DWkKpZTX.cjs");Object.defineProperty(exports,"LogosphereBadge",{enumerable:!0,get:()=>e.LogosphereBadge});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./badge-DvaKpUHe.cjs");Object.defineProperty(exports,"LogosphereBadge",{enumerable:!0,get:()=>e.LogosphereBadge});

package/dist/badge.js

@@ -1,4 +1,4 @@
-import { L as r } from "./badge-B0Bj-HAT.js";
+import { L as r } from "./badge-DsDxWEHx.js";
 export {
   r as LogosphereBadge
 };

package/dist/breadcrumb-BB61Xt0s.js

@@ -0,0 +1,41 @@
+import { unsafeCSS as b, css as m, LitElement as p, html as t } from "lit";
+import { property as v, customElement as u } from "lit/decorators.js";
+const f = ".breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-2);font-family:var(--font-family-base);font-size:var(--font-size-sm);line-height:var(--line-height-normal);list-style:none;margin:0;padding:0}.breadcrumb__item{display:inline-flex;align-items:center;gap:var(--spacing-2)}.breadcrumb__link{color:var(--color-primary);text-decoration:none;font-weight:var(--font-weight-regular);transition:color var(--transition-speed-fast) var(--transition-timing),text-decoration var(--transition-speed-fast) var(--transition-timing)}.breadcrumb__link:hover{color:var(--color-primary-hover);text-decoration:underline}.breadcrumb__label{color:var(--color-tertiary);font-weight:var(--font-weight-regular)}.breadcrumb__label--active{color:var(--color-emphasis);font-weight:var(--font-weight-medium)}.breadcrumb__separator{color:var(--color-gray-400);-webkit-user-select:none;user-select:none;flex-shrink:0}";
+var _ = Object.defineProperty, d = Object.getOwnPropertyDescriptor, c = (r, a, o, s) => {
+  for (var e = s > 1 ? void 0 : s ? d(a, o) : a, i = r.length - 1, l; i >= 0; i--)
+    (l = r[i]) && (e = (s ? l(a, o, e) : l(e)) || e);
+  return s && e && _(a, o, e), e;
+};
+let n = class extends p {
+  constructor() {
+    super(...arguments), this.items = [];
+  }
+  render() {
+    return t`
+      <nav>
+        <ol class="breadcrumb">
+          ${this.items.map(
+      (r, a) => t`
+              <li class="breadcrumb__item">
+                ${r.href && !r.active ? t`<a href="${r.href}" class="breadcrumb__link">${r.label}</a>` : t`<span class="breadcrumb__label ${r.active ? "breadcrumb__label--active" : ""}">${r.label}</span>`}
+                ${a < this.items.length - 1 ? t`<span class="breadcrumb__separator">/</span>` : ""}
+              </li>
+            `
+    )}
+        </ol>
+      </nav>
+    `;
+  }
+};
+n.styles = [
+  m`${b(f)}`
+];
+c([
+  v({ type: Array })
+], n.prototype, "items", 2);
+n = c([
+  u("logosphere-breadcrumb")
+], n);
+export {
+  n as B
+};

package/dist/breadcrumb-Cop-B1J7.cjs

@@ -0,0 +1,12 @@
+"use strict";const e=require("lit"),o=require("lit/decorators.js"),b=".breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-2);font-family:var(--font-family-base);font-size:var(--font-size-sm);line-height:var(--line-height-normal);list-style:none;margin:0;padding:0}.breadcrumb__item{display:inline-flex;align-items:center;gap:var(--spacing-2)}.breadcrumb__link{color:var(--color-primary);text-decoration:none;font-weight:var(--font-weight-regular);transition:color var(--transition-speed-fast) var(--transition-timing),text-decoration var(--transition-speed-fast) var(--transition-timing)}.breadcrumb__link:hover{color:var(--color-primary-hover);text-decoration:underline}.breadcrumb__label{color:var(--color-tertiary);font-weight:var(--font-weight-regular)}.breadcrumb__label--active{color:var(--color-emphasis);font-weight:var(--font-weight-medium)}.breadcrumb__separator{color:var(--color-gray-400);-webkit-user-select:none;user-select:none;flex-shrink:0}";var m=Object.defineProperty,u=Object.getOwnPropertyDescriptor,c=(l,r,t,s)=>{for(var a=s>1?void 0:s?u(r,t):r,n=l.length-1,i;n>=0;n--)(i=l[n])&&(a=(s?i(r,t,a):i(a))||a);return s&&a&&m(r,t,a),a};exports.Breadcrumb=class extends e.LitElement{constructor(){super(...arguments),this.items=[]}render(){return e.html`
+      <nav>
+        <ol class="breadcrumb">
+          ${this.items.map((r,t)=>e.html`
+              <li class="breadcrumb__item">
+                ${r.href&&!r.active?e.html`<a href="${r.href}" class="breadcrumb__link">${r.label}</a>`:e.html`<span class="breadcrumb__label ${r.active?"breadcrumb__label--active":""}">${r.label}</span>`}
+                ${t<this.items.length-1?e.html`<span class="breadcrumb__separator">/</span>`:""}
+              </li>
+            `)}
+        </ol>
+      </nav>
+    `}};exports.Breadcrumb.styles=[e.css`${e.unsafeCSS(b)}`];c([o.property({type:Array})],exports.Breadcrumb.prototype,"items",2);exports.Breadcrumb=c([o.customElement("logosphere-breadcrumb")],exports.Breadcrumb);

package/dist/breadcrumb.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./breadcrumb-BOuCLUJh.cjs");Object.defineProperty(exports,"Breadcrumb",{enumerable:!0,get:()=>e.Breadcrumb});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./breadcrumb-Cop-B1J7.cjs");Object.defineProperty(exports,"Breadcrumb",{enumerable:!0,get:()=>e.Breadcrumb});

package/dist/breadcrumb.js

@@ -1,4 +1,4 @@
-import { B as e } from "./breadcrumb-BeJqq-5C.js";
+import { B as e } from "./breadcrumb-BB61Xt0s.js";
 export {
   e as Breadcrumb
 };