@logosphere-ui/core 0.0.0-alpha.42 → 0.0.0-alpha.45

package/AGENTS.md

@@ -36,6 +36,45 @@ 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` |
 
 ---
 
@@ -127,6 +166,8 @@ 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>
 
@@ -159,7 +200,7 @@ Bağımsız toggle switch.
 | `disabled` | `boolean` | `false` | Devre dışı |
 | `size` | `"sm" \| "md"` | `"md"` | Boyut |
 
-**Events:** `change` → `detail: { checked }`
+**Events:** `change` → `detail: { checked }`, `lgsChange` → `detail: { checked }`
 
 ```html
 <logosphere-switch></logosphere-switch>
@@ -213,6 +254,9 @@ 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ı |
@@ -300,7 +344,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`
+**Events:** `input`, `change`, `clear`, `keydown`, `keyup`, `lgsChange` → `detail: { value }`
 
 ```html
 <!-- Temel kullanım -->
@@ -348,7 +392,7 @@ Başlık, içerik ve ayak bölümü olan kart.
 
 | Property | Tip | Varsayılan | Açıklama |
 |----------|-----|-----------|---------|
-| `title` | `string` | `""` | Kart başlığı (attribute: `card-title`) |
+| `title` | `string` | `""` | Kart başlığı |
 | `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 |
@@ -363,13 +407,13 @@ Başlık, içerik ve ayak bölümü olan kart.
 
 ```html
 <!-- Temel kart -->
-<logosphere-card card-title="Kullanıcı Bilgileri" description="Profil bilgilerinizi güncelleyin">
+<logosphere-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 card-title="Emin misiniz?" okLabel="Evet, Sil" cancelLabel="Hayır">
+<logosphere-card title="Emin misiniz?" okLabel="Evet, Sil" cancelLabel="Hayır">
   Bu işlem geri alınamaz.
 </logosphere-card>
 
@@ -389,7 +433,7 @@ Tetikleyici elemana konumlanmış açılır panel.
 
 | Property | Tip | Varsayılan | Açıklama |
 |----------|-----|-----------|---------|
-| `title` | `string` | `""` | Popover başlığı (attribute: `popover-title`) |
+| `title` | `string` | `""` | Popover başlığı |
 | `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) |
@@ -401,7 +445,7 @@ Tetikleyici elemana konumlanmış açılır panel.
 **Slots:** `trigger` (tetikleyici element), varsayılan (panel içeriği)
 
 ```html
-<logosphere-popover popover-title="Yardım">
+<logosphere-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>
@@ -429,7 +473,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`
+**Events:** `change` → `detail: { value }`, `clear`, `lgsChange` → `detail: { value }`
 
 ```html
 <!-- Temel kullanım -->
@@ -484,7 +528,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 }`
+**Events:** `selected` → `detail: { selected }`, `change` → `detail: { value }`, `lgsChange` → `detail: { value, selected }` (value = primitive `optionValue` değer(ler)i)
 
 ```html
 <logosphere-combobox
@@ -541,7 +585,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 }`
+**Events:** `change` → `detail: { value }`, `rangeChange` → `detail: { start, end }`, `lgsChange` → `detail: { value }`
 
 ```html
 <!-- Temel kullanım -->
@@ -605,7 +649,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ığı (attribute: `modal-title`) |
+| `title` | `string` | `""` | Modal başlığı |
 | `closeOnEsc` | `boolean` | `true` | Esc ile kapat |
 | `closeOnBackdrop` | `boolean` | `true` | Arka plana tıklayınca kapat |
 | `showBack` | `boolean` | `false` | Geri butonu göster |
@@ -618,7 +662,7 @@ Tam ekran arka planlı modal diyalog.
 **Slots:** `header`, varsayılan (gövde), `footer`
 
 ```html
-<logosphere-modal id="my-modal" modal-title="Düzenle" showClose>
+<logosphere-modal id="my-modal" title="Düzenle" showClose>
   <logosphere-input label="Ad"></logosphere-input>
   <div slot="footer">
     <logosphere-button variant="outline" id="cancel-btn">İptal</logosphere-button>
@@ -642,7 +686,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ığı (attribute: `drawer-title`) |
+| `title` | `string` | `""` | Panel başlığı |
 | `position` | `"left" \| "right"` | `"right"` | Hangi taraftan açılsın |
 | `width` | `number` | `360` | Genişlik (px) |
 | `closeOnEsc` | `boolean` | `true` | Esc ile kapat |
@@ -655,7 +699,7 @@ Yan panel; sağdan veya soldan açılır.
 **Slots:** `trigger` (açma butonu), varsayılan (panel gövdesi)
 
 ```html
-<logosphere-drawer drawer-title="Filtreler" position="right" width="400">
+<logosphere-drawer title="Filtreler" position="right" width="400">
   <logosphere-button slot="trigger" variant="outline">
     Filtreleri Aç
   </logosphere-button>
@@ -677,7 +721,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 (attribute: `toast-title`) |
+| `title` | `string` | `""` | Başlık |
 | `text` | `string` | `""` | Açıklama metni |
 | `icon` | `string` | `""` | Özel ikon adı |
 | `closeable` | `boolean` | `true` | Manuel kapatma butonu |
@@ -763,51 +807,91 @@ interface TabItem {
 
 ---
 
-### `<logosphere-leftmenu>` ve `<leftmenu-item>`
+### `<logosphere-leftmenu>`
 
-Daraltılabilir kenar çubuğu; menü ağacı, arama, logo slotları.
+Daraltılabilir kenar çubuğu; data-driven menü ağacı, arama, logo slotları.
 
-**`logosphere-leftmenu` Properties**
+**Properties**
 
 | Property | Tip | Varsayılan | Açıklama |
 |----------|-----|-----------|---------|
 | `open` | `boolean` | `false` | Genişletilmiş mi (reflect) |
-| `pinned` | `boolean` | `false` | Sabitlenmiş mi (reflect) |
-| `closedWidth` | `number` | `64` | Kapalı genişlik (px) |
 | `openWidth` | `number` | `248` | Açık genişlik (px) |
 | `storageKey` | `string` | `"logosphere-leftmenu-state"` | localStorage anahtarı |
+| `items` | `LeftMenuEntry[]` | `[]` | Menü verisi (attribute değil, `.items=${...}`) |
+| `leading` | `boolean` | `true` | Derinlik göstergeleri (bullet / 2px çizgi); menü açıkken geçerli |
+| `defaultExpandedIds` | `string[]` | `[]` | İlk render'da açık node id'leri |
+
+**Events:** `item-click` → `detail: { item }`, `width-change` → `detail: { width }`
+
+**Slots:** `logo-open`, `toggle-closed`, `custom-open`, `custom-closed`, `icon-<itemId>` (özel ikon — `iconName` yoksa)
 
-**Events:** `pin-change` → `detail: { pinned }`, `item-click` → `detail: { item }`
+**Veri modeli:**
+
+```ts
+interface MenuBadge {
+  text: string;
+  variant?: "default" | "primary" | "success" | "warning" | "danger" | "info" | "purple";
+  size?: "default" | "small";
+  isRound?: boolean;
+}
 
-**Slots:** varsayılan (`leftmenu-item` elementler), `logo-open`, `logo-closed`, `custom-open`, `custom-closed`
+interface LeftMenuItem {
+  id: string;
+  label: string;
+  iconName?: string;        // dahili ui-icon; yoksa slot="icon-${id}" kullanılır
+  badges?: MenuBadge[];
+  active?: boolean;
+  disabled?: boolean;
+  children?: LeftMenuItem[];
+  data?: unknown;
+}
 
-**`leftmenu-item` Properties**
+interface LeftMenuGroup {
+  id: string;
+  label?: string;
+  items: LeftMenuItem[];
+}
 
-| Property | Tip | Varsayılan |
-|----------|-----|-----------|
-| `itemId` | `string` | `""` |
-| `label` | `string` | `""` |
-| `disabled` | `boolean` | `false` |
-| `active` | `boolean` | `false` |
+type LeftMenuEntry = LeftMenuItem | LeftMenuGroup;
+```
 
-**Slots:** varsayılan (etiket), `icon` (ikon), `children` (alt öğeler)
+> **Gruplama:** `.items` dizisine doğrudan `LeftMenuItem` veya `LeftMenuGroup` koy. Grup objesinde `items` alanı vardır; düz item'da `children` alt menü içindir. Ardışık düz item'lar otomatik tek başlıksız grupta toplanır. Gruplar arasında ince border ayraç vardır.
 
 ```html
-<logosphere-leftmenu open>
-  <img slot="logo-open"   src="/logo-full.svg"  alt="Logo" />
-  <img slot="logo-closed" src="/logo-icon.svg"  alt="L"    />
-
-  <leftmenu-item itemId="dashboard" label="Ana Sayfa" active>
-    <ui-icon slot="icon" name="uil-home" size="20"></ui-icon>
-  </leftmenu-item>
-
-  <leftmenu-item itemId="users" label="Kullanıcılar">
-    <ui-icon slot="icon" name="uil-users-alt" size="20"></ui-icon>
-    <div slot="children">
-      <leftmenu-item itemId="users-list"   label="Liste"></leftmenu-item>
-      <leftmenu-item itemId="users-create" label="Yeni Ekle"></leftmenu-item>
-    </div>
-  </leftmenu-item>
+<logosphere-leftmenu open .items=${[
+  {
+    id: "genel", label: "Genel",
+    items: [
+      { id: "home", label: "Ana Sayfa", iconName: "uil-home", active: true },
+      { id: "search", label: "Arama", iconName: "uil-search" }
+    ]
+  },
+  {
+    id: "yonetim", label: "Yönetim",
+    items: [
+      {
+        id: "reports", label: "Raporlar",
+        badges: [
+          { text: "New", variant: "success", size: "small" },
+          { text: "12", variant: "primary", size: "small", isRound: true }
+        ]
+      },
+      {
+        id: "users", label: "Kullanıcılar",
+        children: [
+          { id: "users-list", label: "Liste" },
+          { id: "users-create", label: "Yeni Ekle" }
+        ]
+      }
+    ]
+  }
+]}>
+  <img slot="logo-open"   src="/logo-full.svg" alt="Logo" />
+  <img slot="toggle-closed" src="/logo-icon.svg" alt="L" />
+
+  <!-- iconName yoksa: React/Angular kendi ikon bileşenini basar -->
+  <svg slot="icon-reports" width="16" height="16">...</svg>
 </logosphere-leftmenu>
 ```
 
@@ -826,18 +910,21 @@ Daraltılabilir kenar çubuğu; menü ağacı, arama, logo slotları.
 | `expandOnLabelClick` | `boolean` | `true` | Etikete tıklayınca aç/kapa |
 | `chevronPosition` | `"left" \| "right"` | `"left"` | Ok konumu |
 | `showLabels` | `boolean` | `true` | Etiketleri göster |
+| `leading` | `boolean` | `true` | Derinlik göstergeleri (seviye 2: bullet, seviye 3: 2px çizgi; seviye 1 ikon kalır) |
 | `iconSize` | `number` | `16` | İkon boyutu |
 
 **`TreeMenuItem` yapısı:**
 
 ```ts
 interface TreeMenuItem {
-  id:        string;
-  label:     string;
-  icon?:     string;
-  children?: TreeMenuItem[];
-  disabled?: boolean;
-  data?:     unknown; // isteğe bağlı ek veri
+  id:          string;
+  label:       string;
+  iconName?:   string;        // dahili ui-icon; yoksa slot="icon-${id}"
+  badges?:     MenuBadge[];
+  children?:   TreeMenuItem[];
+  disabled?:   boolean;
+  active?:     boolean;
+  data?:       unknown;
 }
 ```
 
@@ -917,7 +1004,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 card-title="Giriş Yap" description="Hesabınıza erişin" style="width:400px">
+  <logosphere-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"
@@ -951,7 +1038,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 drawer-title="Filtreler" position="right">
+  <logosphere-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">
@@ -1007,19 +1094,13 @@ SVG ikon bileşeni. `icon-map.ts`'deki kayıtlı ikonları isimle render eder.
 ```html
 <div style="display:flex; height:100vh; overflow:hidden">
   <!-- Kenar çubuğu -->
-  <logosphere-leftmenu open pinned style="flex-shrink:0">
+  <logosphere-leftmenu open style="flex-shrink:0" .items=${[
+    { id: "dashboard", label: "Panel", iconName: "uil-info-circle", active: true },
+    { id: "users", label: "Kullanıcılar", iconName: "uil-check-circle" },
+    { id: "reports", label: "Raporlar", iconName: "uil-calendar" }
+  ]}>
     <img slot="logo-open"   src="/logo.svg" alt="Logo" style="height:32px"/>
-    <img slot="logo-closed" src="/icon.svg" alt="L"    style="height:32px"/>
-
-    <leftmenu-item itemId="dashboard" label="Panel" active>
-      <ui-icon slot="icon" name="uil-info-circle" size="20"></ui-icon>
-    </leftmenu-item>
-    <leftmenu-item itemId="users" label="Kullanıcılar">
-      <ui-icon slot="icon" name="uil-check-circle" size="20"></ui-icon>
-    </leftmenu-item>
-    <leftmenu-item itemId="reports" label="Raporlar">
-      <ui-icon slot="icon" name="uil-calendar" size="20"></ui-icon>
-    </leftmenu-item>
+    <img slot="toggle-closed" src="/icon.svg" alt="L"    style="height:32px"/>
   </logosphere-leftmenu>
 
   <!-- Ana içerik -->
@@ -1041,7 +1122,7 @@ SVG ikon bileşeni. `icon-map.ts`'deki kayıtlı ikonları isimle render eder.
 ### Silme Onay Modalı
 
 ```html
-<logosphere-modal id="delete-modal" modal-title="Kaydı Sil" showClose closeOnEsc>
+<logosphere-modal id="delete-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">