@dsrc-cm/core 0.1.0

package/src/base/print.css

@@ -0,0 +1,404 @@
+/**
+ * DSRC Print Stylesheet
+ *
+ * Feuille de styles d'impression pour les sites gouvernementaux.
+ * Les citoyens impriment regulierement des formulaires, procedures
+ * et documents officiels -- cette feuille garantit une mise en page
+ * claire, lisible et economique en encre.
+ *
+ * Organisation:
+ *   1. Configuration de page (@page)
+ *   2. Remise a zero generale (general print resets)
+ *   3. Liens -- affichage des URL
+ *   4. Controle de coupure de page (break control)
+ *   5. Masquage des elements non imprimables
+ *   6. En-tete (header) -- version imprimable
+ *   7. Pied de page (footer) -- version imprimable
+ *   8. Composants -- surcharges pour l'impression
+ */
+
+@media print {
+
+  /* ============================================================
+   * 1. Configuration de page
+   * ============================================================ */
+
+  @page {
+    margin: 2cm;
+  }
+
+  /* ============================================================
+   * 2. Remise a zero generale
+   * ============================================================ */
+
+  *,
+  *::before,
+  *::after {
+    background: transparent !important;
+    color: #000 !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  body {
+    font-size: 12pt;
+    line-height: 1.5;
+  }
+
+  /* ============================================================
+   * 3. Liens -- affichage des URL
+   * ============================================================ */
+
+  a,
+  a:visited {
+    text-decoration: underline !important;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.85em;
+    font-weight: normal;
+    word-break: break-all;
+  }
+
+  /* Ne pas afficher l'URL pour les ancres internes et les liens javascript */
+  a[href^="#"]::after,
+  a[href^="javascript"]::after {
+    content: "";
+  }
+
+  /* Abbreviations */
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+
+  /* ============================================================
+   * 4. Controle de coupure de page
+   * ============================================================ */
+
+  h1, h2, h3, h4, h5, h6 {
+    break-after: avoid;
+    orphans: 3;
+    widows: 3;
+  }
+
+  p {
+    orphans: 3;
+    widows: 3;
+  }
+
+  table, figure, img {
+    break-inside: avoid;
+  }
+
+  img {
+    max-width: 100% !important;
+  }
+
+  pre, blockquote {
+    break-inside: avoid;
+    border: 1px solid #999 !important;
+    page-break-inside: avoid;
+  }
+
+  /* ============================================================
+   * 5. Masquage des elements non imprimables
+   * ============================================================ */
+
+  .dsrc-bandeau,
+  .dsrc-nav,
+  .dsrc-consent,
+  .dsrc-search,
+  .dsrc-nav__toggle,
+  .dsrc-translate,
+  .dsrc-dropdown__menu,
+  .dsrc-spinner {
+    display: none !important;
+  }
+
+  /* ============================================================
+   * 6. En-tete (header) -- version imprimable
+   * ============================================================ */
+
+  .dsrc-entete {
+    border-bottom: 2px solid #000 !important;
+    padding-bottom: 0.5cm;
+    margin-bottom: 0.5cm;
+  }
+
+  .dsrc-entete__actions {
+    display: none !important;
+  }
+
+  .dsrc-entete__titre {
+    font-size: 14pt !important;
+  }
+
+  .dsrc-entete__sous-titre {
+    font-size: 10pt !important;
+  }
+
+  /* Le drapeau reste visible */
+  .dsrc-drapeau {
+    border: 1px solid #000 !important;
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .dsrc-drapeau__vert {
+    background-color: #007a33 !important;
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .dsrc-drapeau__rouge {
+    background-color: #ce1126 !important;
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .dsrc-drapeau__jaune {
+    background-color: #fcd116 !important;
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .dsrc-drapeau__etoile {
+    background-color: #fcd116 !important;
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  /* ============================================================
+   * 7. Pied de page (footer) -- version imprimable
+   * ============================================================ */
+
+  .dsrc-footer {
+    margin-top: 1cm !important;
+    padding: 0.5cm 0 0 !important;
+    border-top: 1px solid #000 !important;
+  }
+
+  .dsrc-footer__inner {
+    display: block !important;
+  }
+
+  .dsrc-footer__bloc {
+    margin-bottom: 0.25cm;
+  }
+
+  .dsrc-footer__bas {
+    border-top: none !important;
+    padding-top: 0.25cm !important;
+    font-size: 9pt !important;
+  }
+
+  .dsrc-footer__lien {
+    text-decoration: underline !important;
+  }
+
+  /* ============================================================
+   * 8. Composants -- surcharges pour l'impression
+   * ============================================================ */
+
+  /* ---- Accordion : afficher tous les panneaux depiles ---- */
+
+  .dsrc-accordions-group {
+    border: none !important;
+  }
+
+  .dsrc-accordion {
+    border: none !important;
+    border-bottom: 1px solid #ccc !important;
+  }
+
+  .dsrc-collapse {
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
+  .dsrc-accordion__body {
+    display: block !important;
+  }
+
+  .dsrc-accordion__btn {
+    font-weight: bold !important;
+    padding-left: 0 !important;
+    cursor: default !important;
+  }
+
+  .dsrc-accordion__btn::after {
+    display: none !important;
+  }
+
+  /* ---- Table : bordures claires, pas de coupure ---- */
+
+  .dsrc-table__wrapper {
+    overflow: visible !important;
+  }
+
+  .dsrc-table__container {
+    overflow: visible !important;
+  }
+
+  .dsrc-table__container::before,
+  .dsrc-table__container::after {
+    display: none !important;
+  }
+
+  .dsrc-table table {
+    border-collapse: collapse !important;
+    width: 100% !important;
+    font-size: 10pt !important;
+  }
+
+  .dsrc-table th,
+  .dsrc-table td {
+    border: 1px solid #000 !important;
+    padding: 4pt 6pt !important;
+  }
+
+  .dsrc-table thead {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .dsrc-table tr {
+    break-inside: avoid;
+  }
+
+  /* ---- Card : bordures, pas d'ombres ---- */
+
+  .dsrc-card {
+    border: 1px solid #000 !important;
+    break-inside: avoid;
+    page-break-inside: avoid;
+    margin-bottom: 0.5cm;
+  }
+
+  .dsrc-card__header {
+    border-bottom: 1px solid #000 !important;
+  }
+
+  .dsrc-card__footer {
+    border-top: 1px solid #000 !important;
+  }
+
+  /* ---- Button : texte avec bordure ---- */
+
+  .dsrc-btn {
+    border: 1px solid #000 !important;
+    padding: 2pt 6pt !important;
+    font-size: 10pt !important;
+    text-decoration: none !important;
+  }
+
+  .dsrc-btn--loading::after {
+    display: none !important;
+  }
+
+  .dsrc-btn[href]::after {
+    content: "" !important;
+  }
+
+  /* ---- Alert, Notice : visibles avec bordure ---- */
+
+  .dsrc-alert {
+    border: 1px solid #000 !important;
+    border-left: 3px solid #000 !important;
+    padding: 8pt !important;
+  }
+
+  .dsrc-alert__close,
+  .dsrc-btn--close {
+    display: none !important;
+  }
+
+  .dsrc-notice {
+    border: 1px solid #000 !important;
+    padding: 8pt !important;
+  }
+
+  /* ---- Badge : bordure, fond transparent ---- */
+
+  .dsrc-badge {
+    border: 1px solid #000 !important;
+    padding: 1pt 4pt !important;
+  }
+
+  /* ---- Formulaires : bordures visibles ---- */
+
+  input,
+  textarea,
+  select {
+    border: 1px solid #000 !important;
+  }
+
+  /* ---- Breadcrumb : simplifier ---- */
+
+  .dsrc-breadcrumb {
+    font-size: 9pt !important;
+    margin-bottom: 0.25cm;
+  }
+
+  .dsrc-breadcrumb__btn {
+    display: none !important;
+  }
+
+  .dsrc-breadcrumb .dsrc-collapse {
+    max-height: none !important;
+    overflow: visible !important;
+  }
+
+  /* ---- Tile ---- */
+
+  .dsrc-tile {
+    border: 1px solid #000 !important;
+    break-inside: avoid;
+  }
+
+  /* ---- Pagination : masquer ---- */
+
+  .dsrc-pagination {
+    display: none !important;
+  }
+
+  /* ---- Download : garder visible ---- */
+
+  .dsrc-download {
+    border: 1px solid #000 !important;
+    break-inside: avoid;
+  }
+
+  /* ---- Layout : pleine largeur ---- */
+
+  .dsrc-grid {
+    display: block !important;
+  }
+
+  .dsrc-grid > * {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .dsrc-main {
+    max-width: 100% !important;
+    padding: 0 !important;
+  }
+
+  /* ---- Utilitaire : classe pour forcer l'affichage/masquage ---- */
+
+  .dsrc-no-print {
+    display: none !important;
+  }
+
+  .dsrc-print-only {
+    display: block !important;
+  }
+
+}
+
+/* Masquer les elements reserves a l'impression en mode ecran */
+.dsrc-print-only {
+  display: none;
+}

package/src/base/reset.css

@@ -0,0 +1,106 @@
+/**
+ * DSRC CSS Reset
+ * Minimal reset focused on consistency
+ */
+
+/* Accessibility: disable all motion for users who prefer reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+body {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-body);
+  line-height: var(--dsrc-font-line-height-loose);
+  color: var(--dsrc-color-noir);
+  background-color: var(--dsrc-color-fond);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: var(--dsrc-color-primaire);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: var(--dsrc-outline-offset);
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: var(--dsrc-font-weight-bold);
+  line-height: var(--dsrc-font-line-height-snug);
+  color: var(--dsrc-color-noir);
+}
+
+h1 { font-size: var(--dsrc-font-size-h1); line-height: var(--dsrc-font-line-height-tight); }
+h2 { font-size: var(--dsrc-font-size-h2); }
+h3 { font-size: var(--dsrc-font-size-h3); font-weight: var(--dsrc-font-weight-semibold); }
+h4 { font-size: var(--dsrc-font-size-h4); font-weight: var(--dsrc-font-weight-semibold); }
+
+code {
+  font-family: var(--dsrc-font-family-mono);
+  font-size: var(--dsrc-font-size-caption);
+  background: var(--dsrc-color-primaire-clair);
+  color: var(--dsrc-color-primaire-fonce);
+  padding: var(--dsrc-spacing-1) var(--dsrc-spacing-2);
+  border-radius: var(--dsrc-radius-small);
+}
+
+/* Skip to content - Accessibility */
+.dsrc-skip-link {
+  position: absolute;
+  top: -100%;
+  left: 0;
+  background: var(--dsrc-color-primaire);
+  color: var(--dsrc-color-blanc);
+  padding: var(--dsrc-spacing-3) var(--dsrc-spacing-4);
+  z-index: var(--dsrc-z-index-skiplinks);
+}
+
+.dsrc-skip-link:focus {
+  top: 0;
+}

package/src/components/accordion/accordion.css

@@ -0,0 +1,216 @@
+/**
+ * DSRC Accordion Component
+ * Design Systeme de la Republique du Cameroun
+ *
+ * Architecture alignee sur le DSFR : l'ouverture/fermeture est
+ * pilotee par un <button> avec aria-expanded et un panneau
+ * collapsible (.dsrc-collapse), et non par <details>/<summary>.
+ *
+ * Structure HTML :
+ *
+ *   <div class="dsrc-accordions-group">
+ *     <section class="dsrc-accordion">
+ *       <h3 class="dsrc-accordion__title">
+ *         <button class="dsrc-accordion__btn"
+ *                 aria-expanded="false"
+ *                 aria-controls="accordion-1">
+ *           Question ?
+ *         </button>
+ *       </h3>
+ *       <div class="dsrc-collapse" id="accordion-1">
+ *         <div class="dsrc-accordion__body">
+ *           <p>Reponse...</p>
+ *         </div>
+ *       </div>
+ *     </section>
+ *   </div>
+ *
+ * Standalone (sans groupe) :
+ *
+ *   <section class="dsrc-accordion">
+ *     <h3 class="dsrc-accordion__title">...</h3>
+ *     <div class="dsrc-collapse" id="...">...</div>
+ *   </section>
+ *
+ * Le JS bascule aria-expanded et la classe dsrc-collapse--expanded.
+ */
+
+
+/* ==========================================================================
+   1. COLLAPSE MECHANISM
+   Composant generique de pliage/depliage anime.
+   ========================================================================== */
+
+.dsrc-collapse {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height var(--dsrc-transition-duration-normal) ease;
+}
+
+.dsrc-collapse--expanded {
+  /* max-height est defini dynamiquement par JS (scrollHeight).
+     Fallback genereux si JS est desactive. */
+  max-height: var(--dsrc-collapse-max-height, 2000px);
+}
+
+
+/* ==========================================================================
+   2. ACCORDION GROUP
+   Conteneur pour un ensemble d'accordeons.
+   ========================================================================== */
+
+.dsrc-accordions-group {
+  display: flex;
+  flex-direction: column;
+  border: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+  border-radius: var(--dsrc-radius-default);
+  overflow: hidden;
+}
+
+
+/* ==========================================================================
+   3. SINGLE ACCORDION
+   Chaque section est separee par une bordure inferieure.
+   ========================================================================== */
+
+.dsrc-accordion {
+  border-bottom: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+  background-color: var(--dsrc-color-blanc);
+  font-family: var(--dsrc-font-family-sans);
+}
+
+.dsrc-accordions-group > .dsrc-accordion:last-child {
+  border-bottom: none;
+}
+
+/* Standalone accordion (sans groupe) */
+.dsrc-accordion:not(.dsrc-accordions-group > .dsrc-accordion) {
+  border: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+  border-radius: var(--dsrc-radius-default);
+  overflow: hidden;
+}
+
+
+/* ==========================================================================
+   4. ACCORDION TITLE (heading wrapper)
+   ========================================================================== */
+
+.dsrc-accordion__title {
+  margin: 0;
+  font-size: var(--dsrc-font-size-body);
+  line-height: var(--dsrc-font-line-height-normal);
+}
+
+
+/* ==========================================================================
+   5. ACCORDION BUTTON (trigger)
+   ========================================================================== */
+
+.dsrc-accordion__btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--dsrc-spacing-4) var(--dsrc-spacing-5);
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: var(--dsrc-font-weight-medium);
+  line-height: inherit;
+  color: var(--dsrc-color-noir);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: start;
+  transition: background-color var(--dsrc-transition-duration-fast) ease;
+}
+
+/* Chevron indicator */
+.dsrc-accordion__btn::after {
+  content: '';
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  flex-shrink: 0;
+  margin-left: var(--dsrc-spacing-3);
+  border-right: 2px solid var(--dsrc-color-gris-600);
+  border-bottom: 2px solid var(--dsrc-color-gris-600);
+  transform: rotate(45deg);
+  transition: transform var(--dsrc-transition-duration-normal) ease;
+}
+
+/* Rotate chevron when expanded */
+.dsrc-accordion__btn[aria-expanded="true"]::after {
+  transform: rotate(-135deg);
+}
+
+/* Hover */
+.dsrc-accordion__btn:hover {
+  background-color: var(--dsrc-color-gris-50);
+}
+
+/* Focus */
+.dsrc-accordion__btn:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: calc(-1 * var(--dsrc-outline-offset));
+}
+
+/* Active */
+.dsrc-accordion__btn:active {
+  background-color: var(--dsrc-color-gris-100);
+}
+
+
+/* ==========================================================================
+   6. ACCORDION BODY (content inside collapse)
+   ========================================================================== */
+
+.dsrc-accordion__body {
+  padding: 0 var(--dsrc-spacing-5) var(--dsrc-spacing-5);
+  font-size: var(--dsrc-font-size-small);
+  color: var(--dsrc-color-gris-700);
+  line-height: var(--dsrc-font-line-height-loose);
+}
+
+
+/* ==========================================================================
+   7. HIGH CONTRAST (forced-colors)
+   ========================================================================== */
+
+@media (forced-colors: active) {
+  .dsrc-accordions-group,
+  .dsrc-accordion:not(.dsrc-accordions-group > .dsrc-accordion) {
+    border: 1px solid ButtonText;
+  }
+
+  .dsrc-accordion {
+    border-bottom-color: ButtonText;
+  }
+
+  .dsrc-accordion__btn::after {
+    border-right-color: ButtonText;
+    border-bottom-color: ButtonText;
+  }
+
+  .dsrc-accordion__btn:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}
+
+
+/* ==========================================================================
+   8. REDUCED MOTION
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .dsrc-collapse {
+    transition: none;
+  }
+
+  .dsrc-accordion__btn {
+    transition: none;
+  }
+
+  .dsrc-accordion__btn::after {
+    transition: none;
+  }
+}