# Esri Calcite-Designsystem ## Oberflächenvorschau des Esri Calcite-Designsystems Wählen Sie einen Standort aus der Liste oder dem Schema aus, filtern Sie Prüfstatus und validieren Sie eine Notiz, die bis zum Neuladen pro Standort gespeichert bleibt. ## Designreferenz zum Esri Calcite-Designsystem Calcite-Design-Tokens 4.1.0 und aktuelle Komponenten-API, geprüft zusammen mit Components 5.1.2. Token- und Komponentenpaket haben unterschiedliche Versionsnummern. Das eingebettete Beispiel ist eine eigenständige Interpretation von HTML/CSS; es verbreitet weder die Calcite-Laufzeitumgebung weiter noch erhebt es den Anspruch, natives Verhalten abzubilden. ### Oberflächen, Text und Interaktionen im hellen Theme | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --calcite-color-surface-1 | #f7f7f7 | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | | --calcite-color-surface-2 | #ffffff | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | | --calcite-color-surface-3 | #f2f2f2 | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | | --calcite-color-surface-4 | #ebebeb | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | | --calcite-color-surface-highlight | #d6efff | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | | --calcite-color-text-1 | #141414 | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | | --calcite-color-text-2 | #4a4a4a | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | | --calcite-color-text-3 | #6b6b6b | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | | --calcite-color-text-inverse | #ffffff | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | | --calcite-color-text-link | #00619b | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | | --calcite-color-border-1 | #d4d4d4 | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | | --calcite-color-border-2 | #dedede | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | | --calcite-color-border-3 | #ebebeb | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | | --calcite-color-border-input | #949494 | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | | --calcite-color-brand | #007ac2 | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | | --calcite-color-brand-hover | #00619b | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | | --calcite-color-brand-press | #004874 | Semantische Referenz für die durch das Token benannte Rolle; Auswahl und Feldrahmen benötigen unterschiedliche Kontraste. | ### Aktuelle Abstandsskala | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --calcite-space-none | 0 | Aktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen. | | --calcite-space-px | 1px | Aktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen. | | --calcite-space-base | 2px | Aktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen. | | --calcite-space-2xs | 0.25rem | Aktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen. | | --calcite-space-xs | 0.375rem | Aktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen. | | --calcite-space-sm | 0.5rem | Aktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen. | | --calcite-space-sm-plus | 0.625rem | Aktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen. | | --calcite-space-md | 0.75rem | Aktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen. | | --calcite-space-md-plus | 0.875rem | Aktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen. | | --calcite-space-lg | 1rem | Aktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen. | | --calcite-space-xl | 1.25rem | Aktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen. | | --calcite-space-2xl | 1.5rem | Aktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen. | | --calcite-space-3xl | 2rem | Aktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen. | | --calcite-space-4xl | 2.75rem | Aktuelle Familie der Abstandstokens. Die Schritte in Rem richten sich nach der Stammgröße; vermeiden Sie die gemeinsame Verwendung mit veralteten Abstands-Aliasen. | ### Typografie- und Eckenradius-Skala | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --calcite-corner-radius-none | 0 | Veröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen. | | --calcite-corner-radius-xs | 2px | Veröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen. | | --calcite-corner-radius-sm | 4px | Veröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen. | | --calcite-corner-radius-pill | 9999px | Veröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen. | | --calcite-font-size-xs | 10px | Veröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen. | | --calcite-font-size-sm | 12px | Veröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen. | | --calcite-font-size | 14px | Veröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen. | | --calcite-font-size-md | 16px | Veröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen. | | --calcite-font-size-lg | 18px | Veröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen. | | --calcite-font-size-xl | 20px | Veröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen. | | --calcite-font-size-2xl | 24px | Veröffentlichte Werte, keine aus einem Screenshot abgeleiteten Messungen. | ### Input-Komponenten-API | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | scale | s / m / l; default m | Ändern Sie die Komponentenskalierung bewusst; sie ist nicht dasselbe wie das Ändern des Seitenzooms. | | status | idle / valid / invalid | Vermitteln Sie die Gültigkeit eines Felds mit einer Meldung, nicht nur über Farbe. | | labelText | string | Sichtbarer Beschriftungstext für das aktuelle Input-API. | | validationMessage | string | Erklären Sie den ungültigen Eintrag direkt neben dem Steuerelement. | | calciteInputInput | event | Lesen Sie beim Tippen event.target.value aus. | | setFocus() | Promise | Setzen Sie den Fokus nach einem Validierungsfehler der Anwendung auf die native Komponente. | ## Vollständiger Leitfaden zum Esri Calcite-Designsystem Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Architektur von Arbeitsbereich und Panels im Esri Calcite-Designsystem ### Objektkontext sichtbar halten > Eine räumliche Aufgabe umfasst in der Regel mindestens zwei Kontexte: den untersuchten Bereich und das ausgewählte Objekt. Das Beispiel zeigt neben einem eigenständigen Schema und einem Inspektor eine kompakte Standortliste. Bei Auswahl einer Listenzeile oder einer Markierung wird dieselbe stabile Standort-ID festgelegt, damit sich Name, Status und Notiz nicht versehentlich auf unterschiedliche Objekte beziehen. ### Illustration von einer echten Karte unterscheiden Das SVG veranschaulicht die Beziehung zwischen einer Liste und einer räumlichen Fläche. Es enthält weder Projektion und Koordinaten noch Ebenen, Zoom, Geokodierung oder Routenplanung. Die sichtbare Bildunterschrift bezeichnet es als Schema und weist darauf hin, dass es nicht maßstabsgetreu ist. Eine ArcGIS-Ansicht für den Produktiveinsatz benötigt eine eigene SDK-Integration, Daten und Barrierefreiheitsmaßnahmen; eine Calcite-Shell allein bietet diese Funktionen nicht. ## Semantische Farbr Rollen im Esri Calcite-Designsystem ### Werkzeuge mit Oberflächen statt massiven Karten gliedern Die Referenz unterscheidet zwischen surface-1 und surface-4; surface-highlight ist der Hervorhebung vorbehalten. Das Beispiel verwendet einen weißen Inspektor auf einer zurückhaltenden, gebrochen weißen Arbeitsfläche sowie eine hellblaue ausgewählte Zeile. Feine neutrale Rahmen kennzeichnen Panelgrenzen, ohne jedes Feld in eine schwebende Karte einzuschließen. ### Blau eine einheitliche Bedeutung für Interaktionen geben Die Farben für Marke, Hover und Drücken bilden eine dunkler werdende Folge von #007ac2 über #00619b bis #004874. Die ausgewählte Markierung und die primäre Speicheraktion verwenden diese Farbpalette für unterschiedliche Interaktionsrollen. Schriftliche Statusangaben bei der Prüfung und die Validierungsmeldung der Notiz bleiben auch ohne alleinige Farbcodierung gut lesbar. ## Esri Calcite Typografie und Informationsdichte des Designsystems ### Die klare Informationshierarchie bewahren Die veröffentlichten absoluten Schriftgrößen umfassen 12px für kleine Texte, 14px als Basisgröße, 16px für mittlere und 20px für besonders große Texte. Das Beispiel kombiniert einen 20px großen Arbeitsbereichstitel mit 16px großen Panelüberschriften und Bedienelementen in 14px. Metadaten sind kleiner, aber niemals die einzige Stelle, an der das ausgewählte Objekt kenntlich gemacht wird. ### Eine Ersatzschrift nicht mit der Markenschrift verwechseln Dieses eigenständige Beispiel verwendet Arial und System-Ersatzschriften. Es enthält keine Esri-Markenschriften und bezeichnet die Ersatzschrift auch nicht als Avenir. Eine autorisierte native Integration sollte den Assets und der Theme-Einrichtung der festgelegten Calcite-Version folgen. Ein Schriftwechsel kann Zeilenumbrüche und die Breite von Bedienelementen beeinflussen. Testen Sie daher die tatsächlich bereitgestellten Assets. ## Esri Calcite Abstandstokens und responsive Panels des Designsystems ### Aktuelle Tokennamen verwenden Die Referenz verwendet die aktuelle Skala --calcite-space-*, die bei den kleinsten Stufen Pixelwerte und bei größeren Abständen rem-Werte kombiniert. Verwenden Sie bei der Implementierung eines nativen Themes diese benannten Rollen durchgängig. Das Anwendungslayout in diesem Beispiel verwendet explizite CSS-Werte, damit es sich ohne den Import eingeschränkt verfügbarer Pakete ausführen lässt. ### Das Inspektionsfeld neu anordnen, bevor das Feld verkleinert wird Am ursprünglichen Anwendungs-Breakpoint wird das Inspektionsfeld unter die Liste und die Illustration verschoben. Auf einem schmalen Smartphone werden die drei Bereiche vertikal angeordnet. Das Textfeld bleibt zusammen mit Beschriftung, Hilfetext und Speicheraktion in voller Breite. Diese Breakpoints sind Teil des Layouts und werden nicht als Calcite-Tokenwerte ausgegeben. ## Esri Calcite Auswahl- und Filterverhalten des Designsystems ### Eine gemeinsame Kennung für die Auswahl verwenden Liste und Schema synchronisieren die Auswahl über A-01, B-02 und C-03, nicht über ihre aktuelle Position im Array. Beim Filtern nach „Geprüft“ wird der passende verfügbare Standort ausgewählt und im Inspektionsfeld angezeigt. Der gedrückte Zustand wird sowohl für die Listenschaltfläche als auch für die zugehörige Markierung angegeben. ### Gespeicherte Notizen von nicht gespeicherten Entwürfen trennen Eine gespeicherte Notiz wird in einer Map mit der Standort-ID als Schlüssel abgelegt. Kehren Sie zu diesem Standort zurück, wird die Notiz wiederhergestellt. Beim Wechsel zu einem anderen Standort wird ungespeicherter Text verworfen. Der Hilfetext gibt ausdrücklich an, dass die Notiz nur lokal verfügbar ist. Ein Editor für den Produktiveinsatz sollte vor dem Verlust nicht gespeicherter Änderungen warnen, wenn dies erhebliche Folgen hätte. ## Esri Calcite Eingabevalidierung und Fehlerbehebung des Designsystems ### Bei Verwendung von Calcite das native Eingabeelement API nutzen Das native Beispiel verwendet labelText, value, status und validationMessage. Das Ereignis calciteInputInput kann eine veraltete Fehlermeldung entfernen, während setFocus() nach dem Scheitern einer Anwendungsregel den Fokus wieder auf die Komponente setzt. Dies sind öffentliche Namen von API. Anders als beim Zugriff auf ein internes Eingabeelement über den Shadow Root. ### Lokale Bestätigung nicht mit der Speicherung durch einen Dienst verwechseln In der eigenständigen Vorschau muss die bereinigte Eingabe mindestens zehn Zeichen umfassen und darf höchstens 240 Zeichen lang sein. Die Bestätigung nennt den Standort und weist ausdrücklich darauf hin, dass die Notiz lokal gespeichert wurde. Beim Neuladen werden die Notizen gelöscht. Eine netzwerkgestützte Version müsste Verhalten für ausstehende Vorgänge, Fehler, Wiederholungsversuche und Konflikte vorsehen. Die lokale Speichermeldung lässt nichts davon vermuten. 1. Versuchen Sie, eine leere oder zu kurze Notiz zu speichern, und lesen Sie die Fehlermeldung. 2. Geben Sie eine längere Notiz ein, speichern Sie sie, wählen Sie einen anderen Standort aus und kehren Sie dann zurück. 3. Laden Sie die Seite neu, um zu prüfen, dass das Beispiel keine dauerhafte Speicherung verspricht. ## Esri Calcite Barrierefreie Alternativen zur räumlichen Darstellung im Designsystem ### Für jede Markierung eine gleichwertige Listenauswahl anbieten Jede interaktive Markierung hat eine Textschaltfläche in der Standortliste. Die schematische Karte ist somit nicht die einzige Möglichkeit, ein Objekt auszuwählen. Ihr SVG erhält eine kurze Beschreibung; Bedienelemente haben eigene Bezeichnungen und sichtbare Fokuskonturen. Bei einer echten Karte reicht es nicht, einfach den Alternativtext des Schemas zu übernehmen. ### Validierung direkt beim Eingabefeld anzeigen Das Textfeld verweist über aria-describedby sowohl auf den Hilfetext als auch auf die Fehlermeldung. Bei einem Fehler erhält es aria-invalid und den Fokus; bei der nächsten Eingabe wird der veraltete Fehlerzustand entfernt. Die Bestätigung wird in einem Statusbereich angezeigt. Personen, die die Tastatur verwenden, können einen Standort auswählen, eine Notiz eingeben und speichern, ohne eine dargestellte geografische Form bedienen zu müssen. ## Esri Calcite Versions- und Integrationsgrenzen des Designsystems ### Pakete festlegen und Lizenzbedingungen prüfen Components 5.1.2 und Design-Tokens 4.1.0 sind separate Pakete. Auf der aktuellen Lizenzseite wird die Verfügbarkeit mit einem ArcGIS Online-, Enterprise- oder Location Platform-Konto beschrieben. Übertragen Sie keine Annahmen zu einer älteren Open-Source-Version auf das aktuelle Paket. Der native Quelltext unten ist für ein Projekt vorgesehen, das diese Anforderungen erfüllt. - Components: 5.1.2. - Referenz für Design-Tokens: 4.1.0. - Vorschau: eigenständiges HTML, CSS und JavaScript; keine Esri-Laufzeitumgebung. ### Nur die verwendeten Komponenten registrieren Das minimale Modulbeispiel importiert die Einstiegspunkte für die Eingabe- und Schaltflächenkomponenten und verwendet anschließend deren öffentliche Eigenschaften und Ereignisse. Das vollständige eigenständige Beispiel für HTML kann allein ausgeführt werden; der native Codeausschnitt ist eine alternative Einstiegsmöglichkeit für ein Vite-Projekt mit installiertem, festgelegtem Paket. Er wurde anhand der öffentlichen API geprüft und wird nicht als die kompilierte Laufzeitumgebung hinter dem Schema dargestellt. ## Esri Calcite Komponentenbeispiele des Designsystems ### Eigenständiges Beispiel zur Standortinspektion Vollständiges eigenständiges HTML, CSS und JavaScript dieser Vorschau. Speichern Sie es als index.html und öffnen Sie die Datei in einem Browser. ``` Site inspection panel

Field inspection workspace

Original Calcite-inspired layout study · fictional site data

Local notes only
Schematic illustration · not to scale
``` Code-Referenz - Ursprüngliches Schema und Anwendungsverhalten. SDK für Karten, entfernte Daten und Esri-Laufzeitumgebung sind nicht enthalten. ### Native Calcite-Alternative für Eingabefelder Ersetzen Sie src/main.js in einem Vite-Projekt ohne Framework, dessen index.html
enthält. ``` import "@esri/calcite-components/components/calcite-input"; import "@esri/calcite-components/components/calcite-button"; document.querySelector("#app").innerHTML = ` Validate note

`; 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."; }); ``` Code-Referenz - Installieren Sie @esri/calcite-components@5.1.2, nachdem Sie die aktuellen Lizenzbedingungen geprüft haben. Diese Alternative wurde mit API geprüft; das eigenständige Beispiel oben wurde im Browser getestet. ## Esri Calcite Einrichtung des Designsystems für AI-Agenten ### Ausgangspunkt für die Implementierung Für das native Komponentenpaket ist gemäß den aktuellen Lizenzbedingungen ein berechtigtes ArcGIS-Konto erforderlich. Prüfen Sie bei selbst gehosteten Komponenten-Assets die Anforderungen an die Asset-Pfade. ``` # 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 ``` ### Ein Prompt für dein Projekt ``` Erstelle mithilfe der Calcite-Referenzen einen fokussierten Arbeitsbereich für räumliche Inspektionen. Sorge dafür, dass die ausgewählte Objekt-ID in Liste und Inspektor übereinstimmt, zeige textliche Statusangaben an und unterscheide lokale Notizen von der Speicherung im Dienst. Nutze die eigenständige Interpretation als Ausgangspunkt oder entscheide dich bewusst für den lizenzierten Pfad mit nativen Komponenten. Beschreibe das ursprüngliche Schema nicht als ArcGIS-Karte. ``` ## Quellen und Geltungsbereich des Esri Calcite-Designsystems OpenDesign-Anwendungsleitfaden. Das dargestellte Beispiel wurde unabhängig implementiert und verwendet fiktive Daten. Die aktuelle Nutzung von Calcite unterliegt der Lizenzierung durch Esri und erfordert ein entsprechendes ArcGIS-Konto. Das Beispiel für die native Integration ist eine Alternative für entsprechend lizenzierte Projekte und bildet nicht die Laufzeitumgebung dieser Vorschau ab. - Calcite Input API Feldeigenschaften, Ereignisse und Fokusmethode. - Erste Schritte mit Calcite Komponentenregistrierung und Asset-Einrichtung. - Aktuelle Lizenzierung ArcGIS Konto- und Nutzungsanforderungen. - Veröffentlichte Design-Token Referenzen für Typografie, Abstände und Radien fixiert. ## Esri Calcite-Designsystem: Verwandte Ressourcen ### GitLab Pajamas Ein Pajamas-Leitfaden für technische Workflows: tatsächliche semantische Design-Token, fließende Typografie und Abstände, ein gestufter Pipeline-Inspektor, verständliche Fehlerausgaben und eine ausdrücklich lokale Wiederholungs-Simulation. ### HPE Grommet Modellieren Sie eine Kapazitätsreservierung mit den Layout-Primitiven, gesteuerten Formularfeldern und numerischen Anzeigen von Grommet. Setzen Sie die Theme-Skala bewusst ein und halten Sie das Grommet-Basistheme vom separat installierten HPE-Theme getrennt. ### Infor Designsystem Erstelle ein Wartungsformular für Unternehmen mit echten IDS-Eingabestatus, Theme-Aliasen und einer exakten Asset-ID. Prüfe die aktuellen öffentlichen Theme-Tokens, ein fest versioniertes Web-Components-Paket und einen lokalen Entwurfsworkflow mit Validierung und Zurücksetzen. - [Implementierungsreferenz](https://developers.arcgis.com/calcite-design-system/) - [Quelle](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/light.css) - [Quelle](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/global.css) - [Quelle](https://developers.arcgis.com/calcite-design-system/components/input/) - [Code-Referenz](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/light.css) - [Code-Referenz](https://developers.arcgis.com/calcite-design-system/components/input/) - [Calcite Input API Feldeigenschaften, Ereignisse und Fokusmethode.](https://developers.arcgis.com/calcite-design-system/components/input/) - [Erste Schritte mit Calcite Komponentenregistrierung und Asset-Einrichtung.](https://developers.arcgis.com/calcite-design-system/get-started/) - [Aktuelle Lizenzierung ArcGIS Konto- und Nutzungsanforderungen.](https://developers.arcgis.com/calcite-design-system/resources/licensing/) - [Veröffentlichte Design-Token Referenzen für Typografie, Abstände und Radien fixiert.](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/global.css)