@dsrc-cm/core 0.1.0

package/src/components/checkbox/checkbox.css

@@ -0,0 +1,257 @@
+/**
+ * DSRC Checkbox Component
+ *
+ * Custom-styled checkbox using hidden native input + styled label pseudo-element.
+ * The native input remains in the DOM for accessibility (focus, :checked, screen readers).
+ *
+ * Variants:
+ *   --sm ......... Smaller checkbox (16px)
+ *   --inline ..... Horizontal layout
+ *   --error ...... Error state (red left border)
+ *   --valid ...... Valid state (green left border)
+ *
+ * Groups:
+ *   .dsrc-checkbox-group (wrapper for a single checkbox + label)
+ *   .dsrc-fieldset--checkbox (fieldset wrapper for multiple checkboxes)
+ *
+ * Usage:
+ *   <div class="dsrc-checkbox-group">
+ *     <input type="checkbox" id="cb1" name="cb1">
+ *     <label for="cb1">Option A</label>
+ *   </div>
+ */
+
+
+/* ============================================
+ * 1. Base checkbox group
+ * ============================================ */
+
+.dsrc-checkbox-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  padding: var(--dsrc-spacing-2) 0;
+}
+
+.dsrc-checkbox-group input[type="checkbox"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.dsrc-checkbox-group input[type="checkbox"] + label {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  padding-left: 32px;
+  min-height: 24px;
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-body);
+  line-height: 1.5;
+  color: var(--dsrc-color-noir);
+  cursor: pointer;
+}
+
+
+/* ============================================
+ * 2. Custom checkbox visual (label::before)
+ * ============================================ */
+
+.dsrc-checkbox-group input[type="checkbox"] + label::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--dsrc-color-gris-600);
+  border-radius: var(--dsrc-radius-small);
+  background-color: var(--dsrc-color-blanc);
+  transition: background-color 0.15s, border-color 0.15s;
+}
+
+/* Check icon (label::after) */
+.dsrc-checkbox-group input[type="checkbox"] + label::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  background-color: transparent;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 15.17l9.2-9.2 1.4 1.42L10 18l-6.36-6.36 1.4-1.42z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 15.17l9.2-9.2 1.4 1.42L10 18l-6.36-6.36 1.4-1.42z'/%3E%3C/svg%3E");
+  -webkit-mask-size: 16px;
+  mask-size: 16px;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  transition: background-color 0.15s;
+}
+
+
+/* ============================================
+ * 3. States
+ * ============================================ */
+
+/* Checked */
+.dsrc-checkbox-group input[type="checkbox"]:checked + label::before {
+  background-color: var(--dsrc-color-primaire);
+  border-color: var(--dsrc-color-primaire);
+}
+
+.dsrc-checkbox-group input[type="checkbox"]:checked + label::after {
+  background-color: var(--dsrc-color-blanc);
+}
+
+/* Focus */
+.dsrc-checkbox-group input[type="checkbox"]:focus-visible + label::before {
+  outline: 2px solid var(--dsrc-color-primaire);
+  outline-offset: 2px;
+}
+
+/* Hover */
+.dsrc-checkbox-group input[type="checkbox"]:not(:disabled):hover + label::before {
+  border-color: var(--dsrc-color-primaire);
+}
+
+/* Disabled */
+.dsrc-checkbox-group input[type="checkbox"]:disabled + label {
+  color: var(--dsrc-color-gris-400);
+  cursor: not-allowed;
+}
+
+.dsrc-checkbox-group input[type="checkbox"]:disabled + label::before {
+  background-color: var(--dsrc-color-gris-100);
+  border-color: var(--dsrc-color-gris-300);
+}
+
+.dsrc-checkbox-group input[type="checkbox"]:disabled:checked + label::before {
+  background-color: var(--dsrc-color-gris-400);
+  border-color: var(--dsrc-color-gris-400);
+}
+
+/* Hint text */
+.dsrc-checkbox-group .dsrc-hint-text {
+  width: 100%;
+  margin: 0;
+  padding-left: 32px;
+  font-size: var(--dsrc-font-size-caption);
+  color: var(--dsrc-color-gris-600);
+}
+
+
+/* ============================================
+ * 4. Small variant
+ * ============================================ */
+
+.dsrc-checkbox-group--sm input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+}
+
+.dsrc-checkbox-group--sm input[type="checkbox"] + label {
+  padding-left: 24px;
+  min-height: 16px;
+  font-size: var(--dsrc-font-size-caption);
+}
+
+.dsrc-checkbox-group--sm input[type="checkbox"] + label::before {
+  width: 16px;
+  height: 16px;
+  top: 3px;
+}
+
+.dsrc-checkbox-group--sm input[type="checkbox"] + label::after {
+  width: 16px;
+  height: 16px;
+  top: 3px;
+  -webkit-mask-size: 12px;
+  mask-size: 12px;
+}
+
+
+/* ============================================
+ * 5. Validation states
+ * ============================================ */
+
+.dsrc-checkbox-group--error {
+  padding-left: var(--dsrc-spacing-3);
+  border-left: 2px solid var(--dsrc-color-erreur-bordure);
+}
+
+.dsrc-checkbox-group--valid {
+  padding-left: var(--dsrc-spacing-3);
+  border-left: 2px solid var(--dsrc-color-succes-bordure);
+}
+
+.dsrc-checkbox-group--error .dsrc-message {
+  color: var(--dsrc-color-erreur-texte);
+}
+
+.dsrc-checkbox-group--valid .dsrc-message {
+  color: var(--dsrc-color-succes-texte);
+}
+
+
+/* ============================================
+ * 6. Inline layout
+ * ============================================ */
+
+.dsrc-checkbox-group--inline {
+  display: inline-flex;
+  margin-right: var(--dsrc-spacing-4);
+}
+
+
+/* ============================================
+ * 7. High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-checkbox-group input[type="checkbox"] {
+    opacity: 1;
+  }
+
+  .dsrc-checkbox-group input[type="checkbox"] + label::before,
+  .dsrc-checkbox-group input[type="checkbox"] + label::after {
+    display: none;
+  }
+}
+
+
+/* ============================================
+ * 8. Reduced motion
+ * ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .dsrc-checkbox-group input[type="checkbox"] + label::before,
+  .dsrc-checkbox-group input[type="checkbox"] + label::after {
+    transition: none;
+  }
+}
+
+
+/* ============================================
+ * 9. Print
+ * ============================================ */
+
+@media print {
+  .dsrc-checkbox-group input[type="checkbox"] {
+    opacity: 1;
+  }
+
+  .dsrc-checkbox-group input[type="checkbox"] + label::before,
+  .dsrc-checkbox-group input[type="checkbox"] + label::after {
+    display: none;
+  }
+}

package/src/components/consent/consent.css

@@ -0,0 +1,297 @@
+/**
+ * DSRC Consent Banner Component
+ *
+ * GDPR/privacy consent banner for government websites.
+ * Fixed at the bottom of the viewport with a semi-transparent backdrop.
+ * Includes an optional detailed settings modal for cookie customization.
+ *
+ * Usage:
+ * <div class="dsrc-consent" role="dialog" aria-label="Gestion des cookies">
+ *   <div class="dsrc-consent__inner">
+ *     <h2 class="dsrc-consent__title">Cookies et donnees personnelles</h2>
+ *     <p class="dsrc-consent__body">Ce site utilise des cookies...</p>
+ *     <div class="dsrc-consent__actions">
+ *       <button class="dsrc-btn dsrc-btn--primary">Tout accepter</button>
+ *       <button class="dsrc-btn dsrc-btn--secondary">Personnaliser</button>
+ *       <button class="dsrc-btn dsrc-btn--tertiary">Tout refuser</button>
+ *     </div>
+ *   </div>
+ * </div>
+ *
+ * Modal (detailed settings):
+ * <div class="dsrc-consent__modal" role="dialog" aria-label="Parametres des cookies">
+ *   <div class="dsrc-consent__modal-content">
+ *     <header class="dsrc-consent__modal-header">
+ *       <h2 class="dsrc-consent__modal-title">Parametres des cookies</h2>
+ *       <button class="dsrc-consent__modal-close" aria-label="Fermer">&times;</button>
+ *     </header>
+ *     <div class="dsrc-consent__modal-body">
+ *       <div class="dsrc-consent__group">
+ *         <div class="dsrc-consent__group-header">
+ *           <span>Cookies essentiels</span>
+ *           <label class="dsrc-toggle">...</label>
+ *         </div>
+ *         <p class="dsrc-consent__group-desc">Necessaires au fonctionnement du site.</p>
+ *       </div>
+ *     </div>
+ *     <footer class="dsrc-consent__modal-footer">
+ *       <button class="dsrc-btn dsrc-btn--primary">Enregistrer</button>
+ *       <button class="dsrc-btn dsrc-btn--tertiary">Annuler</button>
+ *     </footer>
+ *   </div>
+ * </div>
+ */
+
+/* ============================================
+ * Backdrop overlay
+ * ============================================ */
+.dsrc-consent::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-color: var(--dsrc-color-overlay);
+  z-index: calc(var(--dsrc-z-index-overlay) - 1);
+  pointer-events: none;
+}
+
+/* ============================================
+ * Banner — fixed at viewport bottom
+ * ============================================ */
+.dsrc-consent {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--dsrc-z-index-overlay);
+  background-color: var(--dsrc-color-blanc);
+  box-shadow: var(--dsrc-shadow-xl);
+  font-family: var(--dsrc-font-family-sans);
+  color: var(--dsrc-color-noir);
+}
+
+/* Hidden state */
+.dsrc-consent[aria-hidden="true"] {
+  display: none;
+}
+
+/* ============================================
+ * Inner container — centered, max-width
+ * ============================================ */
+.dsrc-consent__inner {
+  max-width: var(--dsrc-layout-max-width);
+  margin: 0 auto;
+  padding: var(--dsrc-spacing-5) var(--dsrc-spacing-5);
+}
+
+/* ============================================
+ * Title
+ * ============================================ */
+.dsrc-consent__title {
+  font-size: var(--dsrc-font-size-h4);
+  font-weight: var(--dsrc-font-weight-semibold);
+  margin: 0 0 var(--dsrc-spacing-2) 0;
+  line-height: var(--dsrc-font-line-height-normal);
+}
+
+/* ============================================
+ * Body text
+ * ============================================ */
+.dsrc-consent__body {
+  font-size: var(--dsrc-font-size-small);
+  line-height: var(--dsrc-font-line-height-loose);
+  color: var(--dsrc-color-gris-600);
+  margin: 0 0 var(--dsrc-spacing-4) 0;
+  max-width: 80ch;
+}
+
+/* ============================================
+ * Actions — button group
+ * ============================================ */
+.dsrc-consent__actions {
+  display: flex;
+  gap: var(--dsrc-spacing-3);
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+/* ============================================
+ * Responsive: mobile (< 768px)
+ * ============================================ */
+@media (max-width: 767px) {
+  .dsrc-consent__inner {
+    padding: var(--dsrc-spacing-4) var(--dsrc-spacing-3);
+  }
+
+  .dsrc-consent__actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .dsrc-consent__actions .dsrc-btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+/* ============================================
+ * Settings modal — detailed cookie preferences
+ * ============================================ */
+.dsrc-consent__modal {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--dsrc-color-overlay);
+  z-index: var(--dsrc-z-index-overlay);
+  padding: var(--dsrc-spacing-5);
+}
+
+.dsrc-consent__modal[aria-hidden="true"] {
+  display: none;
+}
+
+.dsrc-consent__modal-content {
+  background-color: var(--dsrc-color-blanc);
+  border-radius: var(--dsrc-radius-default);
+  box-shadow: var(--dsrc-shadow-xl);
+  max-width: 600px;
+  width: 100%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Modal header */
+.dsrc-consent__modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--dsrc-spacing-4) var(--dsrc-spacing-5);
+  border-bottom: 1px solid var(--dsrc-color-gris-200);
+}
+
+.dsrc-consent__modal-title {
+  font-size: var(--dsrc-font-size-h4);
+  font-weight: var(--dsrc-font-weight-semibold);
+  margin: 0;
+}
+
+.dsrc-consent__modal-close {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: var(--dsrc-spacing-2);
+  font-size: var(--dsrc-font-size-h4);
+  line-height: 1;
+  color: var(--dsrc-color-gris-600);
+}
+
+.dsrc-consent__modal-close:hover {
+  color: var(--dsrc-color-noir);
+}
+
+.dsrc-consent__modal-close:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: var(--dsrc-outline-offset);
+}
+
+.dsrc-consent__modal-close:active {
+  color: var(--dsrc-color-gris-800);
+}
+
+/* Modal body — scrollable */
+.dsrc-consent__modal-body {
+  padding: var(--dsrc-spacing-5);
+  overflow-y: auto;
+}
+
+/* Modal footer */
+.dsrc-consent__modal-footer {
+  display: flex;
+  gap: var(--dsrc-spacing-3);
+  justify-content: flex-end;
+  padding: var(--dsrc-spacing-4) var(--dsrc-spacing-5);
+  border-top: 1px solid var(--dsrc-color-gris-200);
+}
+
+/* ============================================
+ * Cookie group — individual category
+ * ============================================ */
+.dsrc-consent__group {
+  padding: var(--dsrc-spacing-4) 0;
+  border-bottom: 1px solid var(--dsrc-color-gris-200);
+}
+
+.dsrc-consent__group:first-child {
+  padding-top: 0;
+}
+
+.dsrc-consent__group:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.dsrc-consent__group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--dsrc-spacing-3);
+  font-size: var(--dsrc-font-size-body);
+  font-weight: var(--dsrc-font-weight-medium);
+  color: var(--dsrc-color-noir);
+}
+
+.dsrc-consent__group-desc {
+  font-size: var(--dsrc-font-size-small);
+  line-height: var(--dsrc-font-line-height-loose);
+  color: var(--dsrc-color-gris-600);
+  margin: var(--dsrc-spacing-2) 0 0 0;
+}
+
+/* ============================================
+ * Responsive modal: mobile (< 768px)
+ * ============================================ */
+@media (max-width: 767px) {
+  .dsrc-consent__modal {
+    padding: 0;
+    align-items: flex-end;
+  }
+
+  .dsrc-consent__modal-content {
+    max-width: 100%;
+    max-height: 85vh;
+    border-radius: var(--dsrc-radius-large) var(--dsrc-radius-large) 0 0;
+  }
+
+  .dsrc-consent__modal-footer {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .dsrc-consent__modal-footer .dsrc-btn {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+
+/* ============================================
+ * High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-consent {
+    border-top: 2px solid ButtonText;
+    box-shadow: none;
+  }
+
+  .dsrc-consent__modal-content {
+    border: 2px solid ButtonText;
+    box-shadow: none;
+  }
+
+  .dsrc-consent__modal-close:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}

package/src/components/download/download.css

@@ -0,0 +1,66 @@
+/**
+ * DSRC Download Component
+ *
+ * Usage:
+ * <a class="dsrc-download" href="/doc.pdf" download>
+ *   <span class="dsrc-download__info">
+ *     <span class="dsrc-download__title">Formulaire d'inscription</span>
+ *     <span class="dsrc-download__details">PDF — 245 Ko</span>
+ *   </span>
+ *   <span class="dsrc-download__icon" aria-hidden="true">&#x2B07;</span>
+ * </a>
+ */
+
+.dsrc-download {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--dsrc-spacing-3);
+  padding: var(--dsrc-spacing-3) var(--dsrc-spacing-4);
+  background-color: var(--dsrc-color-blanc);
+  border: 1px solid var(--dsrc-color-gris-200);
+  border-radius: var(--dsrc-radius-default);
+  text-decoration: none;
+  color: var(--dsrc-color-noir);
+  font-family: var(--dsrc-font-family-sans);
+  cursor: pointer;
+  transition: border-color var(--dsrc-transition-duration-fast) ease, box-shadow var(--dsrc-transition-duration-fast) ease;
+}
+
+.dsrc-download:hover {
+  border-color: var(--dsrc-color-primaire);
+  box-shadow: var(--dsrc-shadow-md);
+}
+
+.dsrc-download:active {
+  border-color: var(--dsrc-color-primaire-fonce);
+  box-shadow: none;
+}
+
+.dsrc-download:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: var(--dsrc-outline-offset);
+}
+
+.dsrc-download__info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsrc-spacing-1);
+}
+
+.dsrc-download__title {
+  font-size: var(--dsrc-font-size-small);
+  font-weight: var(--dsrc-font-weight-semibold);
+  color: var(--dsrc-color-primaire);
+}
+
+.dsrc-download__details {
+  font-size: var(--dsrc-font-size-caption);
+  color: var(--dsrc-color-gris-600);
+}
+
+.dsrc-download__icon {
+  font-size: var(--dsrc-font-size-h4);
+  color: var(--dsrc-color-primaire);
+  flex-shrink: 0;
+}