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

package/dist/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">

package/dist/accordion-CYuCj7nB.cjs

@@ -0,0 +1,21 @@
+"use strict";const n=require("lit"),s=require("lit/decorators.js");require("./collapse-CbRE8ABx.cjs");const a=":host{display:block}.accordion{display:flex;flex-direction:column}.accordion--full{gap:var(--spacing-2)}.accordion--bottom{gap:0}.accordion--full ::slotted(logosphere-collapse),.accordion--full logosphere-collapse{width:100%}";var d=Object.defineProperty,h=Object.getOwnPropertyDescriptor,r=(l,e,t,o)=>{for(var i=o>1?void 0:o?h(e,t):e,c=l.length-1,p;c>=0;c--)(p=l[c])&&(i=(o?p(e,t,i):p(i))||i);return o&&i&&d(e,t,i),i};exports.Accordion=class extends n.LitElement{constructor(){super(...arguments),this.items=[],this.multiple=!1,this.defaultOpen=[],this.border="full",this.iconPosition="right",this.size="default",this._openSet=new Set,this._onSlottedToggle=e=>{if(this.items.length>0||this.multiple)return;const t=e.target;e.detail.expanded&&this.querySelectorAll("logosphere-collapse").forEach(o=>{o!==t&&o.expanded&&(o.expanded=!1)})}}connectedCallback(){super.connectedCallback();const e=Array.isArray(this.defaultOpen)?this.defaultOpen:[this.defaultOpen];this._openSet=new Set(e),this.addEventListener("toggle",this._onSlottedToggle)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("toggle",this._onSlottedToggle)}_toggle(e){const t=new Set(this._openSet);t.has(e)?t.delete(e):(this.multiple||t.clear(),t.add(e));const o=this._openSet.has(e);this._openSet=t,this.dispatchEvent(new CustomEvent("accordion-change",{detail:{index:e,expanded:!o,openIndices:[...this._openSet]},bubbles:!0,composed:!0}))}render(){return this.items.length===0?n.html`
+        <div class="accordion accordion--${this.border}">
+          <slot></slot>
+        </div>
+      `:n.html`
+      <div class="accordion accordion--${this.border}">
+        ${this.items.map((e,t)=>n.html`
+          <logosphere-collapse
+            title=${e.title}
+            .expanded=${this._openSet.has(t)}
+            .disabled=${e.disabled??!1}
+            border=${this.border}
+            iconPosition=${this.iconPosition}
+            size=${this.size}
+            @toggle=${o=>{o.stopPropagation(),this._toggle(t)}}
+          >
+            <span slot="body">${e.content}</span>
+          </logosphere-collapse>
+        `)}
+      </div>
+    `}};exports.Accordion.styles=[n.css`${n.unsafeCSS(a)}`];r([s.property({attribute:!1})],exports.Accordion.prototype,"items",2);r([s.property({type:Boolean})],exports.Accordion.prototype,"multiple",2);r([s.property({attribute:!1})],exports.Accordion.prototype,"defaultOpen",2);r([s.property({type:String})],exports.Accordion.prototype,"border",2);r([s.property({type:String})],exports.Accordion.prototype,"iconPosition",2);r([s.property({type:String})],exports.Accordion.prototype,"size",2);r([s.state()],exports.Accordion.prototype,"_openSet",2);exports.Accordion=r([s.customElement("logosphere-accordion")],exports.Accordion);

package/dist/accordion-cDabqwu6.js

@@ -0,0 +1,96 @@
+import { unsafeCSS as d, css as h, LitElement as u, html as c } from "lit";
+import { property as r, state as g, customElement as f } from "lit/decorators.js";
+import "./collapse-DY6SJ9jS.js";
+const m = ":host{display:block}.accordion{display:flex;flex-direction:column}.accordion--full{gap:var(--spacing-2)}.accordion--bottom{gap:0}.accordion--full ::slotted(logosphere-collapse),.accordion--full logosphere-collapse{width:100%}";
+var b = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (e, t, o, n) => {
+  for (var l = n > 1 ? void 0 : n ? S(t, o) : t, a = e.length - 1, p; a >= 0; a--)
+    (p = e[a]) && (l = (n ? p(t, o, l) : p(l)) || l);
+  return n && l && b(t, o, l), l;
+};
+let s = class extends u {
+  constructor() {
+    super(...arguments), this.items = [], this.multiple = !1, this.defaultOpen = [], this.border = "full", this.iconPosition = "right", this.size = "default", this._openSet = /* @__PURE__ */ new Set(), this._onSlottedToggle = (e) => {
+      if (this.items.length > 0 || this.multiple) return;
+      const t = e.target;
+      e.detail.expanded && this.querySelectorAll("logosphere-collapse").forEach((o) => {
+        o !== t && o.expanded && (o.expanded = !1);
+      });
+    };
+  }
+  // ── Lifecycle ────────────────────────────────────────────────────────────
+  connectedCallback() {
+    super.connectedCallback();
+    const e = Array.isArray(this.defaultOpen) ? this.defaultOpen : [this.defaultOpen];
+    this._openSet = new Set(e), this.addEventListener("toggle", this._onSlottedToggle);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("toggle", this._onSlottedToggle);
+  }
+  // ── Items-based mode ──────────────────────────────────────────────────────
+  _toggle(e) {
+    const t = new Set(this._openSet);
+    t.has(e) ? t.delete(e) : (this.multiple || t.clear(), t.add(e));
+    const o = this._openSet.has(e);
+    this._openSet = t, this.dispatchEvent(
+      new CustomEvent("accordion-change", {
+        detail: { index: e, expanded: !o, openIndices: [...this._openSet] },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  // ── Render ────────────────────────────────────────────────────────────────
+  render() {
+    return this.items.length === 0 ? c`
+        <div class="accordion accordion--${this.border}">
+          <slot></slot>
+        </div>
+      ` : c`
+      <div class="accordion accordion--${this.border}">
+        ${this.items.map((e, t) => c`
+          <logosphere-collapse
+            title=${e.title}
+            .expanded=${this._openSet.has(t)}
+            .disabled=${e.disabled ?? !1}
+            border=${this.border}
+            iconPosition=${this.iconPosition}
+            size=${this.size}
+            @toggle=${(o) => {
+      o.stopPropagation(), this._toggle(t);
+    }}
+          >
+            <span slot="body">${e.content}</span>
+          </logosphere-collapse>
+        `)}
+      </div>
+    `;
+  }
+};
+s.styles = [h`${d(m)}`];
+i([
+  r({ attribute: !1 })
+], s.prototype, "items", 2);
+i([
+  r({ type: Boolean })
+], s.prototype, "multiple", 2);
+i([
+  r({ attribute: !1 })
+], s.prototype, "defaultOpen", 2);
+i([
+  r({ type: String })
+], s.prototype, "border", 2);
+i([
+  r({ type: String })
+], s.prototype, "iconPosition", 2);
+i([
+  r({ type: String })
+], s.prototype, "size", 2);
+i([
+  g()
+], s.prototype, "_openSet", 2);
+s = i([
+  f("logosphere-accordion")
+], s);
+export {
+  s as A
+};

package/dist/accordion.cjs

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

package/dist/accordion.js

@@ -0,0 +1,4 @@
+import { A as c } from "./accordion-cDabqwu6.js";
+export {
+  c as Accordion
+};

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

@@ -3,13 +3,22 @@ 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?;
-    connectedCallback(): void;
+    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);
     firstUpdated(): void;
     updated(changedProps: Map<string, unknown>): void;
     private setIndeterminate;

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

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

package/dist/{badge-DsDxWEHx.js → badge-BhINg1p5.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 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;
+import { property as r, customElement as h } from "lit/decorators.js";
+import "./ui-icon-BeR-PaPg.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;
 };
 let e = class extends b {
   constructor() {
@@ -46,25 +46,25 @@ e.styles = [
       ${p(f)}
     `
 ];
-r([
-  a({ type: String })
+a([
+  r({ type: String })
 ], e.prototype, "variant", 2);
-r([
-  a({ type: String })
+a([
+  r({ type: String })
 ], e.prototype, "size", 2);
-r([
-  a({ type: String })
+a([
+  r({ type: String })
 ], e.prototype, "text", 2);
-r([
-  a({ type: Boolean })
+a([
+  r({ type: Boolean })
 ], e.prototype, "closeable", 2);
-r([
-  a({ type: Boolean })
+a([
+  r({ type: Boolean })
 ], e.prototype, "isRound", 2);
-r([
-  a({ attribute: !1 })
+a([
+  r({ attribute: !1 })
 ], e.prototype, "onClose", 2);
-e = r([
+e = a([
   h("logosphere-badge")
 ], e);
 export {

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

@@ -1,4 +1,4 @@
-"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`
+"use strict";const e=require("lit"),a=require("lit/decorators.js");require("./ui-icon-DWl7I5BQ.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`
       <div class="${this.getBadgeClasses()}">
         <slot></slot>
         ${this.text?e.html`<span>${this.text}</span>`:e.nothing}