# Système de design Esri Calcite ## Esri Calcite Aperçu de l’interface du système de design Sélectionnez un site dans la liste ou le schéma, filtrez les états de validation et validez une note qui reste associée à chaque site jusqu’au rechargement. ## Référence de design du système de design Esri Calcite Jetons de design Calcite 4.1.0 et composant API actuel, vérifiés en parallèle de Components 5.1.2. Le package de jetons et le package de composants ont des numéros de version distincts. L’exemple intégré est une interprétation originale de HTML/CSS ; il ne redistribue pas l’environnement d’exécution Calcite et ne prétend pas reproduire son comportement natif. ### Surfaces, texte et interactions du thème clair | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --calcite-color-surface-1 | #f7f7f7 | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | | --calcite-color-surface-2 | #ffffff | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | | --calcite-color-surface-3 | #f2f2f2 | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | | --calcite-color-surface-4 | #ebebeb | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | | --calcite-color-surface-highlight | #d6efff | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | | --calcite-color-text-1 | #141414 | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | | --calcite-color-text-2 | #4a4a4a | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | | --calcite-color-text-3 | #6b6b6b | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | | --calcite-color-text-inverse | #ffffff | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | | --calcite-color-text-link | #00619b | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | | --calcite-color-border-1 | #d4d4d4 | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | | --calcite-color-border-2 | #dedede | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | | --calcite-color-border-3 | #ebebeb | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | | --calcite-color-border-input | #949494 | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | | --calcite-color-brand | #007ac2 | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | | --calcite-color-brand-hover | #00619b | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | | --calcite-color-brand-press | #004874 | Référence sémantique du rôle désigné par le jeton ; la sélection et les bordures de champ nécessitent des contrastes différents. | ### Échelle d’espacement actuelle | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --calcite-space-none | 0 | Famille de jetons d’espacement actuelle. Les pas en rem suivent la taille de la racine ; évitez de les mélanger avec les alias d’espacement obsolètes. | | --calcite-space-px | 1px | Famille de jetons d’espacement actuelle. Les pas en rem suivent la taille de la racine ; évitez de les mélanger avec les alias d’espacement obsolètes. | | --calcite-space-base | 2px | Famille de jetons d’espacement actuelle. Les pas en rem suivent la taille de la racine ; évitez de les mélanger avec les alias d’espacement obsolètes. | | --calcite-space-2xs | 0.25rem | Famille de jetons d’espacement actuelle. Les pas en rem suivent la taille de la racine ; évitez de les mélanger avec les alias d’espacement obsolètes. | | --calcite-space-xs | 0.375rem | Famille de jetons d’espacement actuelle. Les pas en rem suivent la taille de la racine ; évitez de les mélanger avec les alias d’espacement obsolètes. | | --calcite-space-sm | 0.5rem | Famille de jetons d’espacement actuelle. Les pas en rem suivent la taille de la racine ; évitez de les mélanger avec les alias d’espacement obsolètes. | | --calcite-space-sm-plus | 0.625rem | Famille de jetons d’espacement actuelle. Les pas en rem suivent la taille de la racine ; évitez de les mélanger avec les alias d’espacement obsolètes. | | --calcite-space-md | 0.75rem | Famille de jetons d’espacement actuelle. Les pas en rem suivent la taille de la racine ; évitez de les mélanger avec les alias d’espacement obsolètes. | | --calcite-space-md-plus | 0.875rem | Famille de jetons d’espacement actuelle. Les pas en rem suivent la taille de la racine ; évitez de les mélanger avec les alias d’espacement obsolètes. | | --calcite-space-lg | 1rem | Famille de jetons d’espacement actuelle. Les pas en rem suivent la taille de la racine ; évitez de les mélanger avec les alias d’espacement obsolètes. | | --calcite-space-xl | 1.25rem | Famille de jetons d’espacement actuelle. Les pas en rem suivent la taille de la racine ; évitez de les mélanger avec les alias d’espacement obsolètes. | | --calcite-space-2xl | 1.5rem | Famille de jetons d’espacement actuelle. Les pas en rem suivent la taille de la racine ; évitez de les mélanger avec les alias d’espacement obsolètes. | | --calcite-space-3xl | 2rem | Famille de jetons d’espacement actuelle. Les pas en rem suivent la taille de la racine ; évitez de les mélanger avec les alias d’espacement obsolètes. | | --calcite-space-4xl | 2.75rem | Famille de jetons d’espacement actuelle. Les pas en rem suivent la taille de la racine ; évitez de les mélanger avec les alias d’espacement obsolètes. | ### Échelle typographique et des rayons de coin | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --calcite-corner-radius-none | 0 | Valeurs publiées, et non mesures déduites d’une capture d’écran. | | --calcite-corner-radius-xs | 2px | Valeurs publiées, et non mesures déduites d’une capture d’écran. | | --calcite-corner-radius-sm | 4px | Valeurs publiées, et non mesures déduites d’une capture d’écran. | | --calcite-corner-radius-pill | 9999px | Valeurs publiées, et non mesures déduites d’une capture d’écran. | | --calcite-font-size-xs | 10px | Valeurs publiées, et non mesures déduites d’une capture d’écran. | | --calcite-font-size-sm | 12px | Valeurs publiées, et non mesures déduites d’une capture d’écran. | | --calcite-font-size | 14px | Valeurs publiées, et non mesures déduites d’une capture d’écran. | | --calcite-font-size-md | 16px | Valeurs publiées, et non mesures déduites d’une capture d’écran. | | --calcite-font-size-lg | 18px | Valeurs publiées, et non mesures déduites d’une capture d’écran. | | --calcite-font-size-xl | 20px | Valeurs publiées, et non mesures déduites d’une capture d’écran. | | --calcite-font-size-2xl | 24px | Valeurs publiées, et non mesures déduites d’une capture d’écran. | ### Composant de saisie API | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | scale | s / m / l; default m | Modifiez délibérément l’échelle du composant ; cela ne revient pas à modifier le zoom de la page. | | status | idle / valid / invalid | Signalez la validité du champ avec un message, pas uniquement par la couleur. | | labelText | string | Libellé visible du champ de saisie actuel API. | | validationMessage | string | Expliquez l’erreur de saisie à côté du contrôle. | | calciteInputInput | event | Lisez event.target.value au fil de la saisie. | | setFocus() | Promise | Déplacez le focus vers le composant natif après une erreur de validation de l’application. | ## Guide complet du système de design Esri Calcite Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Espace de travail et architecture des panneaux du système de design Esri Calcite ### Gardez le contexte de l’objet visible > Une tâche spatiale comporte généralement au moins deux contextes : la zone examinée et l’objet sélectionné. L’exemple associe une petite liste de sites à un schéma original et à un inspecteur. La sélection d’une ligne de la liste ou d’un repère définit le même ID de site stable, afin que le nom, l’état et la note ne puissent pas se rapporter par erreur à des objets différents. ### Distinguez l’illustration d’une vraie carte Le SVG illustre le lien entre une liste et une surface spatiale. Il ne comporte ni projection, ni coordonnées, ni couches, ni zoom, ni géocodage, ni itinéraire. Sa légende visible précise qu’il s’agit d’un schéma qui n’est pas à l’échelle. Une vue ArcGIS de production nécessite sa propre intégration SDK, ses données et un travail d’accessibilité ; une interface Calcite, à elle seule, ne fournit pas ces fonctionnalités. ## Rôles de couleurs sémantiques du système de design Esri Calcite ### Utilisez les surfaces pour séparer les outils sans multiplier les cartes visuelles La référence distingue surface-1 à surface-4, et réserve surface-highlight à la mise en évidence. L’exemple présente un inspecteur blanc sur une zone de travail blanc cassé, sobre, et une ligne sélectionnée bleu pâle. De fines bordures neutres délimitent les panneaux sans ajouter une carte flottante autour de chaque champ. ### Donnez au bleu une signification cohérente pour les interactions Les couleurs de marque, de survol et d’activation forment une séquence de plus en plus sombre, de #007ac2 à #00619b puis #004874. Le repère sélectionné et l’action principale d’enregistrement utilisent cette famille pour des rôles d’interaction différents. Les états de revue indiqués par du texte et le message de validation de la note restent compréhensibles sans dépendre uniquement de leur couleur. ## Typographie et densité de l’information du système de design Esri Calcite ### Préservez la hiérarchie des petits éléments d’information Les références typographiques absolues publiées comprennent 12px pour les petits caractères, 14px pour le texte de base, 16px pour le texte moyen et 20px pour le très grand texte. L’exemple associe un titre d’espace de travail de 20px à des titres de panneau de 16px et à des contrôles de 14px. Les métadonnées sont plus petites, mais ne constituent jamais le seul moyen d’identifier l’objet sélectionné. ### Distinguez une police de remplacement de la police de marque Cet exemple indépendant utilise Arial et des polices de remplacement système. Il n’inclut pas les polices de marque Esri et ne présente pas cette police de remplacement comme étant Avenir. Une intégration native autorisée doit respecter les ressources et la configuration du thème de la version Calcite choisie. Le changement de police peut modifier les retours à la ligne et la largeur des contrôles ; testez donc les ressources réellement déployées. ## Jetons d’espacement et panneaux adaptatifs du système de design Esri Calcite ### Choisissez les noms de jetons actuels La référence utilise l’échelle actuelle --calcite-space-*, qui combine des valeurs en pixels pour les plus petits pas et des valeurs en rem pour les espacements plus importants. Utilisez ces rôles nommés de façon cohérente lors de l’implémentation d’un thème natif. La mise en page de l’application dans cet exemple utilise des valeurs explicites CSS afin que l’interprétation fonctionne sans importer de packages soumis à des restrictions. ### Réorganisez l’inspecteur avant de réduire le champ Au point de rupture initial de l’application, l’inspecteur passe sous la liste et l’illustration. Sur un téléphone étroit, les trois zones sont empilées verticalement. La zone de texte conserve toute sa largeur, avec son libellé, son texte d’aide et son action d’enregistrement. Ces points de rupture sont des choix de mise en page, et non des valeurs de jetons Calcite. ## Sélection et filtrage dans le système de design Esri Calcite ### Utilisez un seul identifiant de sélection La liste et le schéma partagent la sélection au moyen des identifiants A-01, B-02 et C-03, et non de leur position actuelle dans le tableau. Le filtre « Vérifié » sélectionne le site correspondant disponible, et l’inspecteur suit cette sélection. L’état enfoncé est indiqué à la fois sur le bouton de la liste et sur le repère correspondant. ### Séparez les notes enregistrées des brouillons non enregistrés Une note enregistrée est stockée dans une Map indexée par ID de site. Lorsque vous revenez à ce site, elle est restaurée ; si vous changez de site sans enregistrer, le texte non enregistré est remplacé. Le texte d’aide précise explicitement que la note est conservée localement. Un éditeur de production devrait protéger les modifications non enregistrées si la perte d’un brouillon pouvait avoir des conséquences importantes. ## Validation des champs et récupération dans le système de design Esri Calcite ### Utilisez le véritable composant de saisie natif API avec Calcite L’exemple natif utilise labelText, value, status et validationMessage. L’événement calciteInputInput peut effacer une erreur devenue obsolète, tandis que setFocus() ramène l’attention sur le composant après l’échec d’une règle de validation de l’application. Ce sont des noms API publics, contrairement à l’accès à un élément interne en fouillant dans un shadow root. ### Ne confondez pas une confirmation locale avec la persistance sur un service L’aperçu indépendant exige au moins dix caractères après suppression des espaces en début et en fin, et limite le champ à 240 caractères. La confirmation identifie le site et précise explicitement que la note est enregistrée localement. Le rechargement de la page efface les notes. Une version connectée à un réseau nécessiterait une gestion des états d’attente, d’échec, de nouvelle tentative et de conflit ; le message d’enregistrement local ne sous-entend rien de tel. 1. Essayez d’enregistrer une note vide ou trop courte, puis lisez le message d’erreur. 2. Saisissez une note plus longue, enregistrez-la, sélectionnez un autre site, puis revenez au premier. 3. Rechargez la page pour confirmer que cet exemple ne promet aucune persistance. ## Esri Calcite — Alternatives spatiales accessibles du système de design ### Fournissez une liste équivalente pour chaque repère Chaque repère interactif dispose d’un bouton textuel dans la liste du site. La carte illustrée n’est donc pas le seul moyen de sélectionner un objet. Son SVG reçoit une description concise, tandis que les commandes ont leurs propres noms et des indicateurs de focus visibles. Une véritable carte nécessite davantage que la simple reprise du texte de remplacement du schéma. ### Placez la validation à côté du champ La zone de texte référence à la fois l’aide et l’erreur avec aria-describedby. En cas d’échec, elle reçoit aria-invalid et le focus ; la modification du texte supprime l’état d’invalidité devenu obsolète. La confirmation utilise une région de statut. Les personnes utilisant le clavier peuvent sélectionner un site, saisir une note et l’enregistrer sans interagir avec une forme géographique dessinée. ## Esri Calcite — Versions du système de design et limites d’intégration ### Verrouillez les versions des packages et vérifiez les conditions de licence Les composants 5.1.2 et les jetons de design 4.1.0 sont des packages distincts. La page de licence actuelle indique que leur utilisation nécessite un compte ArcGIS Online, Enterprise ou Location Platform. Ne transposez pas à ces packages actuels des hypothèses liées à une ancienne version open source. Le code source natif ci-dessous s’adresse aux projets qui remplissent ces conditions. - Composants : 5.1.2. - Référence des jetons de design : 4.1.0. - Aperçu : HTML, CSS et JavaScript indépendants ; aucun environnement d’exécution Esri. ### N’enregistrez que les composants que vous utilisez L’exemple de module minimal importe les points d’entrée des composants de saisie et de bouton, puis utilise leurs propriétés et événements publics. L’exemple complet indépendant en HTML peut fonctionner seul ; le fragment natif est une autre option d’intégration dans un projet Vite où le package correspondant à la version verrouillée est installé. Il a été vérifié avec l’API publique API ; il ne s’agit pas de l’environnement d’exécution compilé utilisé par le schéma. ## Esri Calcite — Exemples de composants du système de design ### Exemple autonome d’inspection de site Exemple complet et autonome en HTML, CSS et JavaScript utilisé par cet aperçu. Enregistrez-le sous le nom index.html et ouvrez-le dans un navigateur. ``` Site inspection panel

Field inspection workspace

Original Calcite-inspired layout study · fictional site data

Local notes only
Schematic illustration · not to scale
``` Référence du code - Comportement applicatif et schéma originaux. Aucun SDK cartographique, aucune donnée distante ni aucun environnement d’exécution Esri n’est inclus. ### Alternative native avec Calcite Input Remplacez src/main.js dans un projet Vite vanilla dont le fichier index.html contient
. ``` 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."; }); ``` Référence du code - Après avoir vérifié les conditions de licence actuelles, installez @esri/calcite-components@5.1.2. Cette alternative a été vérifiée avec API ; l’exemple indépendant ci-dessus est celui qui a été testé dans le navigateur. ## Esri Calcite — Configuration de l’agent du système de design ### Point de départ de l’implémentation Selon les conditions de licence actuelles, l’utilisation du package de composants nécessite un compte ArcGIS admissible. Si vous hébergez les composants vous-même, vérifiez les exigences relatives aux chemins d’accès des ressources. ``` # 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 ``` ### Un prompt pour votre projet ``` Créez un espace de travail ciblé pour l’inspection spatiale à partir des références Calcite. Assurez-vous que l’ID de l’objet sélectionné est cohérent dans la liste et le panneau d’inspection, affichez les états sous forme de texte et distinguez les notes locales de leur persistance dans un service. Commencez par l’interprétation autonome ou optez délibérément pour les composants natifs sous licence. Ne présentez pas le schéma d’origine comme une carte ArcGIS. ``` ## Esri Calcite — Sources et périmètre du système de design Guide de l’application OpenDesign. L’exemple illustré est réalisé indépendamment et utilise des données fictives. L’utilisation actuelle de Calcite est régie par les conditions de licence Esri et nécessite un compte ArcGIS admissible ; l’exemple d’intégration native est une option pour les projets disposant des licences appropriées, et non l’environnement d’exécution de cet aperçu. - Référence Calcite Input API Propriétés du champ, événements et méthode de focus. - Bien démarrer avec Calcite Enregistrement des composants et configuration des ressources. - Licences actuelles Conditions d’utilisation et exigences relatives au compte ArcGIS. - Jetons de design publiés Références épinglées des polices, espacements et rayons. ## Esri Calcite — Ressources associées au système de design ### GitLab Pajamas Un guide Pajamas pour les flux de travail techniques : véritables jetons sémantiques, typographie et espacement fluides, inspecteur de pipeline par étapes, affichage lisible des erreurs et simulation explicite d’une nouvelle tentative locale. ### HPE Grommet Modélisez une réservation de capacité avec les primitives de mise en page de Grommet, des champs de formulaire contrôlés et des jauges numériques. Utilisez délibérément l’échelle du thème et distinguez le thème de base Grommet du thème HPE installé séparément. ### Infor système de design Composez un formulaire de maintenance d’entreprise avec les véritables états de saisie IDS, des alias de thème et un identifiant de ressource exact. Examinez les tokens du thème public actuel, un package Web Components épinglé et un flux de brouillon local avec validation et réinitialisation. - [Référence de mise en œuvre](https://developers.arcgis.com/calcite-design-system/) - [Source](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/light.css) - [Source](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/global.css) - [Source](https://developers.arcgis.com/calcite-design-system/components/input/) - [Référence du code](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/light.css) - [Référence du code](https://developers.arcgis.com/calcite-design-system/components/input/) - [Référence Calcite Input API Propriétés du champ, événements et méthode de focus.](https://developers.arcgis.com/calcite-design-system/components/input/) - [Bien démarrer avec Calcite Enregistrement des composants et configuration des ressources.](https://developers.arcgis.com/calcite-design-system/get-started/) - [Licences actuelles Conditions d’utilisation et exigences relatives au compte ArcGIS.](https://developers.arcgis.com/calcite-design-system/resources/licensing/) - [Jetons de design publiés Références épinglées des polices, espacements et rayons.](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/global.css)