ExPanel

<VBox class="sapUiSmallMargin" alignItems="Stretch">

  <!-- ════════════════════════════════════════════════════════════════════ -->
  <!--  01 · FOUNDATION — outlined · filled · ghost · elev                  -->
  <!-- ════════════════════════════════════════════════════════════════════ -->
  <Toolbar design="Transparent">
    <Title text="01 · Foundation — outlined · filled · ghost · elev" level="H3" />
  </Toolbar>

  <ux7:ExPanel id="panelOpen" variant="outlined" size="md" icon="user" title="Kullanıcı Bilgileri" subtitle="Ad soyad, iletişim ve adres" badge="4 alan" badgeNeutral="true" expanded="true" expandable="true" expand="onPanelExpand" collapse="onPanelCollapse">
    <VBox alignItems="Stretch">
      <ux7:ExInput variant="outlined" label="Ad" value="Ahmet" required="true" />
      <ux7:ExInput variant="outlined" label="Soyad" value="Doğan" required="true" />
      <ux7:ExInput variant="outlined" label="E-posta" value="ahmet@example.com" type="email" iconLeft="mail" />
      <ux7:ExInput variant="outlined" label="Telefon" value="+90 555 000 00 00" type="tel" iconLeft="phone" />
    </VBox>
  </ux7:ExPanel>

  <ux7:ExPanel id="panelClosed" variant="filled" size="md" icon="settings" title="Gelişmiş Ayarlar" subtitle="Bildirim, güvenlik, görünüm" expanded="false" expandable="true">
    <VBox alignItems="Stretch">
      <ux7:ExInput variant="outlined" label="Dil" value="Türkçe" />
      <ux7:ExInput variant="outlined" label="Saat dilimi" value="UTC+3 (Istanbul)" />
      <ux7:ExInput variant="outlined" label="Para birimi" value="EUR (€)" />
    </VBox>
  </ux7:ExPanel>

  <ux7:ExPanel id="panelGhost" variant="ghost" size="md" eyebrow="Filtreler · 3 aktif" title="Görünüm seçenekleri" expanded="true" expandable="true">
    <ux7:ExInput variant="outlined" label="Sıralama" value="En yeni" />
  </ux7:ExPanel>

  <ux7:ExPanel id="panelElev" variant="elev" size="md" icon="pkg" title="Sipariş #SO-4521" subtitle="22 May 2026 · 4.820,00 €" badge="PAID" expanded="true" expandable="true">
    <ux7:ExInput variant="outlined" label="Müşteri" value="ACME GmbH · CUST-104982" enabled="false" />
    <ux7:ExInput variant="unit" label="Toplam" prefix="€" value="4.820,00" enabled="false" />
  </ux7:ExPanel>


  <!-- ════════════════════════════════════════════════════════════════════ -->
  <!--  02 · ACCENT — colored left bar (5 tones via accent property)        -->
  <!-- ════════════════════════════════════════════════════════════════════ -->
  <Toolbar design="Transparent">
    <Title text="02 · Accent — colored left bar · 5 tones" level="H3" />
  </Toolbar>

  <ux7:ExPanel variant="accent" icon="money" title="Fatura bilgileri" subtitle="Mali yıl 2026" expandable="false">
    <ux7:ExInput variant="outlined" label="Vergi no" value="1234567890" />
    <ux7:ExInput variant="outlined" label="IBAN" value="TR33 0006 1005 1978 6457 8413 26" />
  </ux7:ExPanel>

  <ux7:ExPanel variant="accent" accent="var(--ex-c-purple)" icon="zap" title="AI öneriler" subtitle="Bu hafta · 3 yeni" expandable="false">
    <ux7:ExInput variant="outlined" label="Model" value="claude-haiku-4-5" enabled="false" />
  </ux7:ExPanel>

  <ux7:ExPanel variant="accent" accent="var(--ex-c-teal)" icon="loc" title="Teslimat adresleri" badge="2 kayıt" badgeNeutral="true" expandable="false">
    <ux7:ExInput variant="outlined" label="Default adres" value="Maslak No:23, İstanbul" />
  </ux7:ExPanel>

  <ux7:ExPanel variant="accent" accent="var(--ex-c-orange)" icon="warn" title="Eksik bilgiler" badge="3 eksik" expandable="false">
    <ux7:ExInput variant="outlined" label="Vergi numarası" required="true" placeholder="10 hane" />
  </ux7:ExPanel>


  <!-- ════════════════════════════════════════════════════════════════════ -->
  <!--  03 · TONAL — soft colored background                                -->
  <!-- ════════════════════════════════════════════════════════════════════ -->
  <Toolbar design="Transparent">
    <Title text="03 · Tonal — multi-color (5 tones)" level="H3" />
  </Toolbar>

  <ux7:ExPanel variant="tonal" icon="info" title="Genel bilgiler" expandable="true" expanded="true">
    <ux7:ExInput variant="outlined" label="Şirket türü" value="GmbH" />
    <ux7:ExInput variant="outlined" label="Çalışan sayısı" value="120" />
  </ux7:ExPanel>
  <ux7:ExPanel variant="tonal-purple" icon="zap" title="AI yapılandırma" expandable="true">
    <ux7:ExInput variant="outlined" label="Token bütçesi" value="1024" />
  </ux7:ExPanel>
  <ux7:ExPanel variant="tonal-teal" icon="loc" title="Lokasyon" expandable="true">
    <ux7:ExInput variant="outlined" label="Ülke" value="Almanya · DE" />
  </ux7:ExPanel>
  <ux7:ExPanel variant="tonal-orange" icon="warn" title="Uyarılar" badge="2" expandable="true">
    <ux7:ExInput variant="outlined" label="Süre" value="30 gün" />
  </ux7:ExPanel>
  <ux7:ExPanel variant="tonal-magenta" icon="bell" title="Yeni özellikler" badge="NEW" expandable="true">
    <ux7:ExInput variant="outlined" label="Sürüm" value="v2.6.0" />
  </ux7:ExPanel>


  <!-- ════════════════════════════════════════════════════════════════════ -->
  <!--  04 · GRADIENT HEADER — premium / hero                                -->
  <!-- ════════════════════════════════════════════════════════════════════ -->
  <Toolbar design="Transparent">
    <Title text="04 · Gradient — premium / hero" level="H3" />
  </Toolbar>

  <ux7:ExPanel variant="gradient" size="lg" icon="zap" title="FIORI UI Pro" subtitle="Yapay zekâ destekli arama, sınırsız panel" badge="PRO" expandable="false">
    <ux7:ExInput variant="outlined" label="Plan" value="Pro Yıllık" enabled="false" />
  </ux7:ExPanel>


  <!-- ════════════════════════════════════════════════════════════════════ -->
  <!--  05 · STATUS — info · success · warning · danger                      -->
  <!-- ════════════════════════════════════════════════════════════════════ -->
  <Toolbar design="Transparent">
    <Title text="05 · Status — info · success · warning · danger" level="H3" />
  </Toolbar>

  <ux7:ExPanel variant="status" status="info" icon="info" title="Planlı bakım" subtitle="25 May 02:00–04:00 UTC" expandable="false">
    <ux7:ExInput variant="outlined" label="Etkilenecek hizmetler" value="auth · sync · webhooks" enabled="false" />
  </ux7:ExPanel>
  <ux7:ExPanel variant="status" status="success" icon="check" title="Form gönderildi" subtitle="Müşteri kaydı oluşturuldu" expandable="false" />
  <ux7:ExPanel variant="status" status="warning" icon="warn" title="Doğrulama uyarıları" subtitle="3 alan dikkat gerektiriyor" badge="3" expandable="true" expanded="true">
    <ux7:ExInput variant="outlined" label="IBAN" value="TR33 0006 1005" error="IBAN eksik" />
  </ux7:ExPanel>
  <ux7:ExPanel variant="status" status="danger" icon="warn" title="Kritik hata" subtitle="Ödeme servisine erişilemiyor" expandable="false" />


  <!-- ════════════════════════════════════════════════════════════════════ -->
  <!--  06 · NESTED — iç içe paneller                                       -->
  <!-- ════════════════════════════════════════════════════════════════════ -->
  <Toolbar design="Transparent">
    <Title text="06 · Nested — panel-in-panel · sipariş kalemleri" level="H3" />
  </Toolbar>

  <ux7:ExPanel id="panelOuter" variant="outlined" size="lg" icon="pkg" title="Sipariş #SO-4521" subtitle="ACME GmbH · 4.820,00 €" chips="draft|B2B|EU" expanded="true" expandable="true">

    <ux7:ExPanel id="panelInner1" variant="outlined" size="sm" title="Ürünler" subtitle="3 kalem · brüt" counter="3 / ∞" expanded="true" expandable="true">
      <ux7:ExInput variant="outlined" label="3× Ürün A — SKU 33-A" value="360,00 €" enabled="false" />
      <ux7:ExInput variant="outlined" label="1× Ürün B — SKU 33-B" value="85,00 €" enabled="false" />
      <ux7:ExInput variant="outlined" label="12× Ürün C — SKU 33-C" value="4.375,00 €" enabled="false" />
    </ux7:ExPanel>

    <ux7:ExPanel id="panelInner2" variant="outlined" size="sm" title="Teslimat" subtitle="DHL Express · 05 Haz 2026" expanded="false" expandable="true">
      <ux7:ExInput variant="outlined" label="Adres" value="Maslak No:23, İstanbul" iconLeft="loc" />
      <ux7:ExInput variant="outlined" label="Kargo firması" value="DHL Express" />
      <ux7:ExInput variant="outlined" label="İz no" value="DHL-2026-05-AC91F" />
    </ux7:ExPanel>

    <ux7:ExPanel id="panelInner3" variant="outlined" size="sm" title="Ödeme" subtitle="SEPA havalesi" badge="PENDING" expanded="false" expandable="true">
      <ux7:ExInput variant="outlined" label="Yöntem" value="SEPA havalesi" />
      <ux7:ExInput variant="outlined" label="Referans" value="SO-4521-PAY" />
    </ux7:ExPanel>

  </ux7:ExPanel>


  <!-- ════════════════════════════════════════════════════════════════════ -->
  <!--  07 · CARD — heavy shadow                                            -->
  <!-- ════════════════════════════════════════════════════════════════════ -->
  <Toolbar design="Transparent">
    <Title text="07 · Card — heavy shadow KPI" level="H3" />
  </Toolbar>

  <HBox wrap="Wrap">
    <ux7:ExPanel variant="card" icon="money" title="MTD Revenue" badge="+12.4%" expandable="false" class="sapUiSmallMarginEnd sapUiSmallMarginBottom" />
    <ux7:ExPanel variant="card" icon="user" title="Yeni müşteriler" accent="var(--ex-c-purple)" badge="+8.1%" expandable="false" class="sapUiSmallMarginEnd sapUiSmallMarginBottom" />
    <ux7:ExPanel variant="card" icon="truck" title="Aktif sevkiyat" accent="var(--ex-c-teal)" badge="canlı" badgeNeutral="true" expandable="false" class="sapUiSmallMarginEnd sapUiSmallMarginBottom" />
  </HBox>


  <!-- ════════════════════════════════════════════════════════════════════ -->
  <!--  08 · SPLIT — başlık solda, içerik sağda                             -->
  <!-- ════════════════════════════════════════════════════════════════════ -->
  <Toolbar design="Transparent">
    <Title text="08 · Split — yatay panel" level="H3" />
  </Toolbar>

  <ux7:ExPanel variant="split" title="Şirket profili" subtitle="Faturalama" expandable="false">
    <ux7:ExInput variant="outlined" label="Şirket adı" value="ACME GmbH" required="true" />
    <ux7:ExInput variant="outlined" label="Vergi no" value="1234567890" required="true" />
  </ux7:ExPanel>

  <ux7:ExPanel variant="split" title="Tercihler" subtitle="Dil · saat · format" expandable="false">
    <ux7:ExInput variant="outlined" label="Dil" value="Türkçe" />
    <ux7:ExInput variant="outlined" label="Para birimi" value="EUR (€)" />
  </ux7:ExPanel>


  <!-- ════════════════════════════════════════════════════════════════════ -->
  <!--  09 · SIZES — sm / md / lg / xl                                       -->
  <!-- ════════════════════════════════════════════════════════════════════ -->
  <Toolbar design="Transparent">
    <Title text="09 · Sizes — sm · md · lg · xl" level="H3" />
  </Toolbar>
  <ux7:ExPanel variant="outlined" size="sm" title="Small · 40px" badge="SM" badgeNeutral="true" expandable="false" />
  <ux7:ExPanel variant="outlined" size="md" title="Medium · 56px" badge="MD" badgeNeutral="true" expandable="false" />
  <ux7:ExPanel variant="outlined" size="lg" title="Large · 64px" subtitle="Subtitle desteği" badge="LG" badgeNeutral="true" expandable="false" />
  <ux7:ExPanel variant="outlined" size="xl" title="XL · 76px" subtitle="Hero header" badge="XL" badgeNeutral="true" expandable="false" />


  <!-- ════════════════════════════════════════════════════════════════════ -->
  <!--  10 · STATES — disabled · loading                                     -->
  <!-- ════════════════════════════════════════════════════════════════════ -->
  <Toolbar design="Transparent">
    <Title text="10 · States — disabled · loading" level="H3" />
  </Toolbar>
  <ux7:ExPanel variant="outlined" title="Salt-okunur" subtitle="Düzenleme kapalı" enabled="false" expandable="false">
    <ux7:ExInput variant="outlined" label="ID" value="CUST-104982" enabled="false" />
  </ux7:ExPanel>
  <ux7:ExPanel variant="outlined" title="Yükleniyor…" subtitle="Veri çekiliyor" loading="true" expandable="false">
    <ux7:ExInput variant="outlined" label="Veri" value="—" />
  </ux7:ExPanel>


  <!-- ════════════════════════════════════════════════════════════════════ -->
  <!--  11 · HEADER ACTIONS                                                  -->
  <!-- ════════════════════════════════════════════════════════════════════ -->
  <Toolbar design="Transparent">
    <Title text="11 · Header actions — edit · add · more" level="H3" />
  </Toolbar>

  <ux7:ExPanel id="panelActions" variant="outlined" title="Davet edilen kişiler" subtitle="2 üye" counter="2 / 10" expanded="true" expandable="true" actionPress="onActionPress">
    <ux7:ExInput variant="tags" label="E-posta adresleri" placeholder="E-posta ekle…" />
  </ux7:ExPanel>


  <!-- ════════════════════════════════════════════════════════════════════ -->
  <!--  12 · PUBLIC API                                                      -->
  <!-- ════════════════════════════════════════════════════════════════════ -->
  <Toolbar design="Transparent">
    <Title text="12 · API — expand / collapse / toggle / setLoading" level="H3" />
  </Toolbar>

  <ux7:ExPanel id="panelApi" variant="outlined" title="API Test" subtitle="Programmatic kontrol" expanded="false" expandable="true">
    <ux7:ExInput variant="outlined" label="Demo alanı" placeholder="Içerik..." />
  </ux7:ExPanel>

  <FlexBox wrap="Wrap" class="sapUiSmallMarginTop">
    <Button text="expand" press="onApiExpand" class="sapUiTinyMarginEnd sapUiTinyMarginBottom" />
    <Button text="collapse" press="onApiCollapse" class="sapUiTinyMarginEnd sapUiTinyMarginBottom" />
    <Button text="toggle" press="onApiToggle" class="sapUiTinyMarginEnd sapUiTinyMarginBottom" />
    <Button text="loading on" press="onApiLoadingOn" class="sapUiTinyMarginEnd sapUiTinyMarginBottom" />
    <Button text="loading off" press="onApiLoadingOff" class="sapUiTinyMarginEnd sapUiTinyMarginBottom" />
  </FlexBox>

</VBox>