# Esri Calcite Tasarım Sistemi

## Esri Calcite Tasarım Sistemi Arayüzü Önizlemesi

Listeden veya şematik görünümden bir konum seçin, inceleme durumlarını filtreleyin ve yeniden yüklenene kadar konum bazında saklanan bir notu doğrulayın.

## Esri Calcite Tasarım Sistemi Tasarım Referansı

Calcite tasarım belirteçleri 4.1.0 ve güncel bileşen API, Components 5.1.2 ile birlikte kontrol edilmiştir. Belirteç paketi ve bileşen paketinin sürüm numaraları farklıdır. Gömülü örnek, özgün bir HTML/CSS yorumudur; Calcite çalışma zamanını yeniden dağıtmaz veya yerel davranış sunduğunu iddia etmez.

### Açık tema yüzeyleri, metin ve etkileşim

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --calcite-color-surface-1 | #f7f7f7 | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
| --calcite-color-surface-2 | #ffffff | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
| --calcite-color-surface-3 | #f2f2f2 | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
| --calcite-color-surface-4 | #ebebeb | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
| --calcite-color-surface-highlight | #d6efff | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
| --calcite-color-text-1 | #141414 | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
| --calcite-color-text-2 | #4a4a4a | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
| --calcite-color-text-3 | #6b6b6b | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
| --calcite-color-text-inverse | #ffffff | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
| --calcite-color-text-link | #00619b | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
| --calcite-color-border-1 | #d4d4d4 | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
| --calcite-color-border-2 | #dedede | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
| --calcite-color-border-3 | #ebebeb | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
| --calcite-color-border-input | #949494 | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
| --calcite-color-brand | #007ac2 | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
| --calcite-color-brand-hover | #00619b | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
| --calcite-color-brand-press | #004874 | Belirtecin adlandırdığı rol için semantik referans; seçim ve alan kenarlıkları farklı kontrast gerektirir. |
### Güncel aralık ölçeği

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --calcite-space-none | 0 | Güncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın. |
| --calcite-space-px | 1px | Güncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın. |
| --calcite-space-base | 2px | Güncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın. |
| --calcite-space-2xs | 0.25rem | Güncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın. |
| --calcite-space-xs | 0.375rem | Güncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın. |
| --calcite-space-sm | 0.5rem | Güncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın. |
| --calcite-space-sm-plus | 0.625rem | Güncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın. |
| --calcite-space-md | 0.75rem | Güncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın. |
| --calcite-space-md-plus | 0.875rem | Güncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın. |
| --calcite-space-lg | 1rem | Güncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın. |
| --calcite-space-xl | 1.25rem | Güncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın. |
| --calcite-space-2xl | 1.5rem | Güncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın. |
| --calcite-space-3xl | 2rem | Güncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın. |
| --calcite-space-4xl | 2.75rem | Güncel boşluk belirteci ailesi. rem tabanlı adımlar kök boyutunu izler; kullanımdan kaldırılmış aralık takma adlarıyla karıştırmayın. |
### Yazı ve köşe ölçeği

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --calcite-corner-radius-none | 0 | Yayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir. |
| --calcite-corner-radius-xs | 2px | Yayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir. |
| --calcite-corner-radius-sm | 4px | Yayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir. |
| --calcite-corner-radius-pill | 9999px | Yayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir. |
| --calcite-font-size-xs | 10px | Yayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir. |
| --calcite-font-size-sm | 12px | Yayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir. |
| --calcite-font-size | 14px | Yayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir. |
| --calcite-font-size-md | 16px | Yayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir. |
| --calcite-font-size-lg | 18px | Yayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir. |
| --calcite-font-size-xl | 20px | Yayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir. |
| --calcite-font-size-2xl | 24px | Yayımlanmış değerlerdir; ekran görüntüsünden çıkarılan ölçümler değildir. |
### Girdi bileşeni API

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| scale | s / m / l; default m | Bileşen ölçeğini bilinçli olarak değiştirin; bu, sayfa yakınlaştırmasını değiştirmekle aynı şey değildir. |
| status | idle / valid / invalid | Alan geçerliliğini yalnızca renkle değil, bir iletiyle belirtin. |
| labelText | string | Geçerli girdi API üzerindeki görünür etiket metni. |
| validationMessage | string | Geçersiz girdiyi denetimin yanında açıklayın. |
| calciteInputInput | event | Kullanıcı yazarken event.target.value değerini okuyun. |
| setFocus() | Promise<void> | Uygulama doğrulama hatasından sonra odağı yerel bileşene taşıyın. |
## Esri Calcite Tasarım Sistemi Eksiksiz Kılavuzu

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## Esri Calcite Tasarım Sistemi Çalışma Alanı ve Panel Mimarisi

### Nesne bağlamını görünür tutun

> Mekânsal bir görevde genellikle en az iki bağlam bulunur: incelenen alan ve seçili nesne. Örnek, özgün bir şematik görünümün ve denetleyicinin yanına küçük bir konum listesi yerleştirir. Listeden bir satır veya iğne seçildiğinde aynı kararlı konum kimliği ayarlanır; böylece ad, durum ve not yanlışlıkla farklı nesnelere bağlanamaz.

### Çizimi gerçek haritadan ayırın

SVG, listeyle mekânsal yüzey arasındaki ilişkiyi gösterir. Projeksiyonu, koordinatları, katmanları, yakınlaştırması, coğrafi kodlaması veya rotalaması yoktur. Görünür açıklamasında şematik olduğu ve ölçekli olmadığı belirtilir. Üretim ortamındaki bir ArcGIS görünümü için ayrı SDK entegrasyonu, veri ve erişilebilirlik çalışmaları gerekir; tek başına Calcite kabuğu bu yetenekleri sağlamaz.

## Esri Calcite Tasarım Sistemi Semantik Renk Rolleri

### Araçları ağır kartlarla değil, yüzeylerle ayırın

Referans, vurgulama için ayrılmış surface-highlight ile surface-1'den surface-4'e kadar olan yüzeyleri birbirinden ayırır. Örnek, beyaz bir denetleyiciyi sade, kırık beyaz bir tuval ve soluk mavi seçili bir satır üzerinde kullanır. İnce, nötr kenarlıklar her alanın çevresine yüzen bir kart eklemeden panel sınırlarını belirginleştirir.

### Maviye tutarlı bir etkileşim anlamı verin

Marka, üzerine gelme ve basma renkleri #007ac2, #00619b ve #004874 değerlerinden oluşan koyulaşan bir dizi oluşturur. Seçili iğne ve birincil kaydetme eylemi, farklı etkileşim rolleri için bu aileyi kullanır. Yazılı inceleme durumları ve not doğrulama iletisi, yalnızca renge bağlı kalmadan okunabilir.

## Esri Calcite Tasarım Sistemi Yazı ve Bilgi Yoğunluğu

### Küçük bilgi hiyerarşisini koruyun

Yayımlanmış mutlak yazı boyutu referansları arasında 12px küçük metin, 14px temel metin, 16px orta ve 20px çok büyük boyutlar bulunur. Örnek, 20px çalışma alanı başlığını 16px panel başlıkları ve 14px denetimlerle eşleştirir. Üst veriler daha küçüktür, ancak seçili nesnenin belirtildiği tek yer değildir.

### Yedek yazı tipini markalı yazı tipinden ayırın

Bu bağımsız örnek Arial ve sistem yedek yazı tiplerini kullanır. Esri markalı yazı tiplerini pakete dahil etmez veya bu yedek yazı tipini Avenir olarak adlandırmaz. Yetkili bir yerel entegrasyon, sabitlenmiş Calcite sürümünün varlıklarını ve tema kurulumunu izlemelidir. Yazı tipini değiştirmek satır kaydırmalarını ve denetim genişliklerini etkileyebilir; bu nedenle dağıtılan gerçek varlık kümesini test edin.

## Esri Calcite Tasarım Sistemi Boşluk Belirteçleri ve Duyarlı Paneller

### Güncel belirteç adlarını seçin

Referans, en küçük adımlarda piksel değerleri, daha büyük aralıklarda rem değerleri kullanan güncel --calcite-space-* ölçeğini temel alır. Yerel bir tema uygularken bu adlandırılmış rolleri tutarlı biçimde kullanın. Bu örnekteki uygulama düzeni, yorumun kısıtlı paketleri içe aktarmadan çalışabilmesi için açık CSS değerleri kullanır.

### Alanı daraltmadan önce denetleyiciyi yeniden akıtın

Uygulamanın ilk kesme noktasında denetleyici, listenin ve çizimin altına taşınır. Dar bir telefonda üç bölge dikey sıraya dönüşür. Metin alanı; etiketi, yardımcı metni ve kaydetme eylemiyle birlikte tam genişlikte kalır. Bu kesme noktaları, Calcite belirteç değerleri olduğu iddia edilmeyen, tasarımda belirlenmiş düzen seçimleridir.

## Esri Calcite Tasarım Sistemi Seçim ve Filtreleme Davranışı

### Tek bir seçili tanımlayıcı kullanın

Liste ve şematik görünüm, geçerli dizi konumuna göre değil A-01, B-02 ve C-03 kimlikleri üzerinden aynı seçimi kullanır. Checked durumuna göre filtreleme, eşleşen mevcut konumu seçer ve denetleyici bu seçimi izler. Basılı durumlar hem liste düğmesinde hem de ona karşılık gelen iğnede gösterilir.

### Kaydedilen notları kaydedilmemiş taslaklardan ayrı tutun

Kaydedilen bir not, konum kimliğiyle anahtarlanan bir Map içinde saklanır. O konuma dönüldüğünde not geri yüklenir; kaydetmeden konum değiştirilirse kaydedilmemiş metin yenisiyle değiştirilir. Yardımcı metin, verilerin ne kadar süreyle yerel kaldığını açıkça belirtir. Taslak kaybının önemli sonuçları olacaksa üretim ortamındaki bir düzenleyici, kaydedilmemiş değişikliklere karşı koruma eklemelidir.

## Esri Calcite Tasarım Sistemi Girdi Doğrulama ve Kurtarma

### Calcite kullanırken gerçek yerel girdi API bileşenini kullanın

Yerel örnek labelText, value, status ve validationMessage özelliklerini kullanır. calciteInputInput olayı, eski bir hatayı temizleyebilir; başarısız bir uygulama kuralından sonra setFocus() odağı bileşene geri taşır. Bunlar, gölge DOM'a girip dahili bir girdi aramak yerine kullanılan herkese açık API adlarıdır.

### Yerel onayı hizmet tarafında kalıcılıkla karıştırmayın

Bağımsız önizleme, başında ve sonunda boşluklar kırpılmış en az on karakter ister ve alanı 240 karakterle sınırlar. Onay iletisinde konum belirtilir ve işlemin yerel olduğu açıkça söylenir. Yeniden yükleme notları siler. Ağ üzerinden çalışan bir sürümün bekleme, hata, yeniden deneme ve çakışma davranışlarını ele alması gerekir; yerel kaydedildi iletisi bunların hiçbirini ima etmez.

1. Boş veya kısa bir notu kaydetmeyi deneyin ve hatayı okuyun.

2. Daha uzun bir not girin, kaydedin, başka bir konum seçin ve ardından geri dönün.

3. Örneğin kalıcılık vaadinde bulunmadığını doğrulamak için sayfayı yeniden yükleyin.

## Esri Calcite Tasarım Sistemi Erişilebilir Mekânsal Alternatifler

### Her iğne için listede bir karşılık sağlayın

Etkileşim kurulabilen her pinin site listesinde bir metin düğmesi vardır. Dolayısıyla nesne seçmenin tek yolu çizim haritası değildir. SVG’ye kısa bir açıklama verilir; denetimlerin de kendi adları ve görünür odak çerçeveleri vardır. Gerçek bir harita, şematik alternatif metni kopyalamaktan fazlasını gerektirir.

### Doğrulama iletisini alanın yanına yerleştirin

textarea, aria-describedby aracılığıyla hem yardımcı metne hem de hata iletisine bağlanır. Hata durumunda aria-invalid atanır ve alana odak verilir; düzenleme yapıldığında geçersiz durumu kaldırılır. Onay iletisi bir durum bölgesi kullanır. Klavye kullanıcıları bir site seçebilir, not girebilir ve çizili coğrafi bir şekille etkileşime girmeden kaydedebilir.

## Esri Calcite Tasarım Sistemi Sürümü ve Entegrasyon Sınırları

### Paket sürümlerini sabitleyin ve lisans gerekliliklerini inceleyin

Components 5.1.2 ve design tokens 4.1.0 birbirinden ayrı paketlerdir. Güncel lisans sayfasında erişilebilirlik için ArcGIS Online, Enterprise veya Location Platform hesabı gerektiği belirtiliyor. Eski bir açık kaynak sürümüne ilişkin varsayımları güncel pakete taşımayın. Aşağıdaki yerel kaynak, bu gereklilikleri karşılayan bir proje içindir.

- Components: 5.1.2.

- Design-token başvurusu: 4.1.0.

- Önizleme: bağımsız HTML, CSS ve JavaScript; Esri çalışma zamanı yok.

### Yalnızca kullandığınız bileşenleri kaydedin

En küçük modül örneği, input ve button bileşenlerinin giriş noktalarını içe aktarır; ardından bunların herkese açık özelliklerini ve olaylarını kullanır. Bağımsız tam HTML örneği tek başına çalışabilir; yerel kod parçası ise sabitlenmiş paketin kurulu olduğu bir Vite projesi için alternatif bir başlangıç noktasıdır. Bu örnek, şematik alternatifin derlenmiş çalışma zamanı olarak sunulmak yerine herkese açık API ile kontrol edilmiştir.

## Esri Calcite Tasarım Sistemi Bileşen Örnekleri

### Bağımsız site inceleme örneği

Bu önizlemede kullanılan, kendi başına çalışan eksiksiz HTML, CSS ve JavaScript. index.html olarak kaydedip tarayıcıda açın.

```
<!doctype html>
<html lang="en">
  <meta charset="utf-8" /><meta
    name="viewport"
    content="width=device-width,initial-scale=1"
  /><title>Site inspection panel</title
  ><style>
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      font:
        14px/1.5 Arial,
        sans-serif;
      color: #141414;
      background: #f7f7f7;
    }
    button,
    input,
    select,
    textarea {
      font: inherit;
    }
    button {
      cursor: pointer;
    }
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid #007ac2;
      outline-offset: 3px;
    }
    header {
      padding: 20px 24px;
      background: #fff;
      border-bottom: 1px solid #d4d4d4;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
    }
    h1 {
      font-size: 20px;
      margin: 0;
    }
    header p {
      margin: 2px 0 0;
      color: #6b6b6b;
      font-size: 12px;
    }
    .badge {
      background: #d6efff;
      color: #004874;
      padding: 4px 8px;
      font-size: 12px;
    }
    .layout {
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr) 280px;
      min-height: 510px;
    }
    .sites,
    .inspector {
      background: #fff;
      padding: 20px;
      border-right: 1px solid #d4d4d4;
    }
    .inspector {
      border-right: 0;
      border-left: 1px solid #d4d4d4;
    }
    h2 {
      font-size: 16px;
      margin: 0 0 16px;
    }
    label {
      display: block;
      font-weight: 600;
      margin: 12px 0 6px;
    }
    select,
    textarea {
      width: 100%;
      border: 1px solid #949494;
      background: #fff;
      padding: 8px;
      color: inherit;
    }
    textarea {
      resize: vertical;
      min-height: 96px;
    }
    .site {
      display: block;
      width: 100%;
      text-align: left;
      background: #fff;
      border: 1px solid #dedede;
      padding: 12px;
      margin-top: 8px;
    }
    .site[aria-pressed="true"] {
      border-left: 4px solid #007ac2;
      background: #d6efff;
    }
    .site small {
      display: block;
      color: #4a4a4a;
      margin-top: 3px;
    }
    .map {
      position: relative;
      overflow: hidden;
      min-height: 360px;
      background: #ebebe5;
    }
    .map svg {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
    }
    .map-caption {
      position: absolute;
      bottom: 12px;
      left: 12px;
      padding: 4px 8px;
      background: #fff;
      font-size: 12px;
    }
    .pin {
      position: absolute;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 3px solid #fff;
      background: #007ac2;
      color: #fff;
      font-weight: bold;
      box-shadow: 0 2px 8px #0004;
    }
    .pin[aria-pressed="true"] {
      background: #004874;
      outline: 3px solid #007ac2;
      outline-offset: 3px;
    }
    .pin[hidden] {
      display: none;
    }
    dl {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      font-size: 12px;
    }
    dt {
      color: #6b6b6b;
    }
    dd {
      margin: 0;
      text-align: right;
    }
    .primary {
      background: #007ac2;
      color: white;
      border: 0;
      width: 100%;
      padding: 10px;
      margin-top: 12px;
    }
    .primary:hover {
      background: #00619b;
    }
    .error {
      color: #a11b1b;
      font-size: 12px;
    }
    .saved {
      color: #237000;
      font-size: 12px;
    }
    footer {
      padding: 16px 24px;
      border-top: 1px solid #d4d4d4;
      color: #6b6b6b;
      font-size: 12px;
      background: #fff;
    }
    @media (max-width: 1000px) {
      .layout {
        grid-template-columns: 210px minmax(0, 1fr);
      }
      .inspector {
        grid-column: 1/-1;
        border-left: 0;
        border-top: 1px solid #d4d4d4;
      }
      .inspector form {
        max-width: 640px;
      }
    }
    @media (max-width: 550px) {
      header {
        align-items: flex-start;
        flex-direction: column;
      }
      .layout {
        display: flex;
        flex-direction: column;
      }
      .sites {
        border-right: 0;
      }
      .map {
        height: 300px;
        min-height: 300px;
      }
      .inspector {
        padding: 20px;
      }
      .site {
        display: inline-block;
        width: 100%;
      }
    }
  </style>
  <body>
    <header>
      <div>
        <h1>Field inspection workspace</h1>
        <p>Original Calcite-inspired layout study · fictional site data</p>
      </div>
      <span class="badge">Local notes only</span>
    </header>
    <main class="layout">
      <aside class="sites">
        <h2>Inspection sites</h2>
        <label for="filter">Show sites</label
        ><select id="filter">
          <option value="all">All sites</option>
          <option value="review">Needs review</option>
          <option value="checked">Checked</option>
        </select>
        <div id="site-list"></div>
        <p id="count" aria-live="polite"></p>
      </aside>
      <section class="map" aria-label="Illustrated site plan">
        <svg
          viewBox="0 0 700 510"
          preserveAspectRatio="xMidYMid slice"
          role="img"
          aria-label="Original schematic with a river, roads and three inspection sites; not a geographic map"
        >
          <rect width="700" height="510" fill="#e4e8db" />
          <path
            d="M480 -50Q230 110 440 260T360 570"
            fill="none"
            stroke="#b6dbe9"
            stroke-width="100"
          />
          <path
            d="M-20 150L720 280M160 -20L290 530M-20 400L720 80"
            stroke="#fff"
            stroke-width="22"
          />
          <path
            d="M-20 150L720 280M160 -20L290 530M-20 400L720 80"
            stroke="#c8c8bf"
            stroke-width="2"
          />
          <g fill="#c4cfb5">
            <rect x="50" y="50" width="100" height="70" />
            <rect x="510" y="340" width="130" height="80" />
            <rect x="80" y="260" width="70" height="60" />
          </g>
        </svg>
        <div id="pins"></div>
        <span class="map-caption">Schematic illustration · not to scale</span>
      </section>
      <aside class="inspector">
        <h2 id="site-title">North access</h2>
        <dl>
          <dt>Site ID</dt>
          <dd id="site-id"></dd>
          <dt>Review state</dt>
          <dd id="site-state"></dd>
        </dl>
        <form id="note-form" novalidate>
          <label for="note">Inspection note</label
          ><textarea
            id="note"
            aria-describedby="note-help error"
            maxlength="240"
          ></textarea>
          <p id="note-help">
            Add 10–240 characters. Notes stay in this page until reload.
          </p>
          <p id="error" class="error" hidden>
            Write at least 10 characters before saving.
          </p>
          <button class="primary" type="submit">Save local note</button>
          <p id="saved" class="saved" role="status"></p>
        </form>
      </aside>
    </main>
    <footer>
      Independent HTML/CSS interpretation by OpenDesign. No Calcite runtime,
      Esri fonts, ArcGIS map or service is loaded.
    </footer>
    <script>
      const sites = [
        { id: "A-01", name: "North access", state: "review", x: 29, y: 24 },
        { id: "B-02", name: "River crossing", state: "review", x: 62, y: 48 },
        { id: "C-03", name: "South garden", state: "checked", x: 34, y: 76 },
      ];
      let selected = "A-01";
      const notes = new Map(),
        list = document.querySelector("#site-list"),
        pins = document.querySelector("#pins"),
        filter = document.querySelector("#filter"),
        note = document.querySelector("#note"),
        error = document.querySelector("#error"),
        saved = document.querySelector("#saved");
      function render() {
        const visible = sites.filter(
          (s) => filter.value === "all" || s.state === filter.value,
        );
        if (!visible.some((s) => s.id === selected)) selected = visible[0]?.id;
        list.replaceChildren();
        pins.replaceChildren();
        for (const s of visible) {
          const b = document.createElement("button");
          b.type = "button";
          b.className = "site";
          b.setAttribute("aria-pressed", String(s.id === selected));
          b.textContent = s.name;
          const small = document.createElement("small");
          small.textContent =
            s.id + " · " + (s.state === "review" ? "Needs review" : "Checked");
          b.append(small);
          b.onclick = () => {
            selected = s.id;
            render();
          };
          list.append(b);
          const pin = document.createElement("button");
          pin.type = "button";
          pin.className = "pin";
          pin.style.left = s.x + "%";
          pin.style.top = s.y + "%";
          pin.textContent = s.id[0];
          pin.setAttribute("aria-label", "Select " + s.name);
          pin.setAttribute("aria-pressed", String(s.id === selected));
          pin.onclick = b.onclick;
          pins.append(pin);
        }
        const s = sites.find((s) => s.id === selected);
        document.querySelector("#count").textContent =
          visible.length + " sites shown";
        document.querySelector("#site-title").textContent = s.name;
        document.querySelector("#site-id").textContent = s.id;
        document.querySelector("#site-state").textContent =
          s.state === "review" ? "Needs review" : "Checked";
        note.value = notes.get(s.id) || "";
        error.hidden = true;
        note.removeAttribute("aria-invalid");
        saved.textContent = "";
      }
      filter.onchange = render;
      note.oninput = () => {
        error.hidden = true;
        note.removeAttribute("aria-invalid");
        saved.textContent = "";
      };
      document.querySelector("#note-form").onsubmit = (e) => {
        e.preventDefault();
        const value = note.value.trim();
        if (value.length < 10) {
          error.hidden = false;
          note.setAttribute("aria-invalid", "true");
          note.focus();
          return;
        }
        notes.set(selected, value);
        saved.textContent = "Note saved locally for " + selected + ".";
      };
      render();
    </script>
  </body>
</html>
```

Kod referansı

- Özgün şematik çizim ve uygulama davranışı. Harita SDK’sı, uzak veri veya Esri çalışma zamanı içermez.

### Calcite input için yerel alternatif

index.html dosyasında <div id="app"></div> bulunan bir Vite vanilla projesindeki src/main.js dosyasının yerine kullanın.

```
import "@esri/calcite-components/components/calcite-input";
import "@esri/calcite-components/components/calcite-button";

document.querySelector("#app").innerHTML = `
  <calcite-input id="inspection-note" label-text="Inspection note"
    validation-message="Enter at least ten characters"></calcite-input>
  <calcite-button id="save-note">Validate note</calcite-button>
  <p id="result" role="status"></p>`;
const field = document.querySelector("#inspection-note");
const result = document.querySelector("#result");
field.addEventListener("calciteInputInput", () => {
  field.status = "idle";
  result.textContent = "";
});
document.querySelector("#save-note").addEventListener("click", async () => {
  if (field.value.trim().length < 10) {
    field.status = "invalid";
    await field.setFocus();
    return;
  }
  field.status = "valid";
  result.textContent = "The note passes the local rule. Nothing was sent.";
});
```

Kod referansı

- Güncel lisans gerekliliklerini inceledikten sonra @esri/calcite-components@5.1.2 paketini yükleyin. Bu alternatif API ile kontrol edilmiştir; yukarıdaki bağımsız önizleme ise tarayıcıda test edilmiş örnektir.

## Esri Calcite Tasarım Sistemi Ajan Kurulumu

### Uygulamaya Başlangıç Noktası

Yerel bileşen paketi, güncel lisans koşulları kapsamında uygun bir ArcGIS hesabı gerektirir. Bileşen varlıklarını kendi sunucunuzda barındırırken varlık yolu gerekliliklerini inceleyin.

```
# Independent specimen: save the complete HTML example as index.html.
# Native alternative for an appropriately licensed project:
npm create vite@latest calcite-note -- --template vanilla
cd calcite-note
npm install
npm install @esri/calcite-components@5.1.2
# Replace src/main.js with the native input example.
npm run dev
```

### Projeniz İçin Bir İstem

```
Calcite başvurularını kullanarak odaklanmış bir mekânsal inceleme çalışma alanı oluşturun. Seçili nesne kimliğini liste ve denetleyici panelinde tutarlı kullanın, durumları metinle belirtin ve yerel notları hizmette kalıcı olarak saklanan verilerden ayırın. Başlangıç noktası olarak bağımsız yorumu kullanın ya da lisanslı yerel bileşen yolunu bilinçli olarak seçin. Özgün şematiği ArcGIS haritası olarak tanımlamayın.
```

## Esri Calcite Tasarım Sistemi Kaynakları ve Kapsamı

OpenDesign uygulama kılavuzu. Gösterilen örnek bağımsız olarak uygulanmıştır ve kurgusal veriler kullanır. Güncel Calcite kullanımı Esri lisansına tabidir ve uygun bir ArcGIS hesabı gerektirir; yerel entegrasyon örneği, bu önizlemenin çalışma zamanı değil, uygun lisansa sahip projeler için bir alternatiftir.

- Calcite Input API Alan özellikleri, olaylar ve odak yöntemi.

- Calcite Başlangıç Kılavuzu Bileşen kaydı ve varlık kurulumu.

- Güncel Lisanslama ArcGIS hesabı ve kullanım gereklilikleri.

- Yayımlanmış Tasarım Belirteçleri Sabitlenmiş yazı tipi, boşluk ve köşe yarıçapı başvuruları.

## Esri Calcite Tasarım Sistemi İlgili Kaynaklar

### GitLab Pajamas

Teknik iş akışları için bir Pajamas kılavuzu: gerçek anlamsal tasarım belirteçleri, akışkan tipografi ve boşluklar, aşamalı bir işlem hattı denetleyicisi, okunaklı hata çıktısı ve açıkça yerel bir yeniden deneme simülasyonu.

### HPE Grommet

Grommet’in düzen ilkelleri, denetimli form alanları ve sayısal göstergeleriyle kapasite rezervasyonunu modelleyin. Tema ölçeğini bilinçli kullanın; temel Grommet temasını ayrıca yüklenen HPE temasından ayrı tutun.

### Infor tasarım sistemi

Gerçek IDS giriş durumları, tema takma adları ve tam bir varlık tanımlayıcısıyla kurumsal bir bakım formu oluşturun. Güncel herkese açık tema belirteçlerini, sürümü sabitlenmiş bir Web Components paketini ve doğrulama ile sıfırlama içeren yerel taslak iş akışını inceleyin.


- [Uygulama başvurusu](https://developers.arcgis.com/calcite-design-system/)
- [Kaynak](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/light.css)
- [Kaynak](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/global.css)
- [Kaynak](https://developers.arcgis.com/calcite-design-system/components/input/)
- [Kod referansı](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/light.css)
- [Kod referansı](https://developers.arcgis.com/calcite-design-system/components/input/)
- [Calcite Input API Alan özellikleri, olaylar ve odak yöntemi.](https://developers.arcgis.com/calcite-design-system/components/input/)
- [Calcite Başlangıç Kılavuzu Bileşen kaydı ve varlık kurulumu.](https://developers.arcgis.com/calcite-design-system/get-started/)
- [Güncel Lisanslama ArcGIS hesabı ve kullanım gereklilikleri.](https://developers.arcgis.com/calcite-design-system/resources/licensing/)
- [Yayımlanmış Tasarım Belirteçleri Sabitlenmiş yazı tipi, boşluk ve köşe yarıçapı başvuruları.](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/global.css)