@dsrc-cm/core 0.1.0

package/src/components/stepper/stepper.css

@@ -0,0 +1,140 @@
+/**
+ * DSRC Stepper Component
+ *
+ * Step progress indicator for multi-step administrative procedures.
+ * State is driven by CSS variables --steps and --current-step (set inline).
+ *
+ * Usage:
+ *   <div class="dsrc-stepper">
+ *     <h2 class="dsrc-stepper__title">
+ *       <span class="dsrc-stepper__state">Étape 2 sur 4</span>
+ *       Informations personnelles
+ *     </h2>
+ *     <div class="dsrc-stepper__steps"
+ *          style="--steps:4;--current-step:2"></div>
+ *     <p class="dsrc-stepper__details">Étape suivante : Pièces justificatives</p>
+ *   </div>
+ */
+
+
+/* ============================================
+ * 1. Base stepper
+ * ============================================ */
+
+.dsrc-stepper {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: var(--dsrc-spacing-8);
+}
+
+
+/* ============================================
+ * 2. Title
+ * ============================================ */
+
+.dsrc-stepper__title {
+  display: flex;
+  flex-direction: column-reverse;
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-h6);
+  font-weight: 700;
+  line-height: 1.5;
+  margin: 0 0 var(--dsrc-spacing-3);
+}
+
+
+/* ============================================
+ * 3. State label ("Étape 2 sur 4")
+ * ============================================ */
+
+.dsrc-stepper__state {
+  font-size: var(--dsrc-font-size-caption);
+  font-weight: 400;
+  color: var(--dsrc-color-gris-600);
+  margin-bottom: var(--dsrc-spacing-1);
+}
+
+
+/* ============================================
+ * 4. Progress bar
+ * ============================================ */
+
+.dsrc-stepper__steps {
+  --stepper-size: 8px;
+  --default-outer: calc((100% + var(--stepper-size)) / var(--steps));
+  --default-inner: calc(var(--default-outer) - var(--stepper-size));
+  --active-outer: calc((100% + var(--stepper-size)) / var(--current-step));
+  --active-inner: calc(var(--active-outer) - var(--stepper-size));
+  width: 100%;
+  height: var(--stepper-size);
+  border-radius: calc(var(--stepper-size) / 2);
+  background-repeat: no-repeat;
+  background-size:
+    calc((100% + var(--stepper-size)) * var(--current-step) / var(--steps) - var(--stepper-size)) 100%,
+    100% 100%;
+  background-position: 0 0, 0 0;
+  background-image:
+    repeating-linear-gradient(
+      to right,
+      var(--dsrc-color-primaire) 0,
+      var(--dsrc-color-primaire) var(--active-inner),
+      transparent var(--active-inner),
+      transparent var(--active-outer)
+    ),
+    repeating-linear-gradient(
+      to right,
+      var(--dsrc-color-gris-200) 0,
+      var(--dsrc-color-gris-200) var(--default-inner),
+      transparent var(--default-inner),
+      transparent var(--default-outer)
+    );
+}
+
+
+/* ============================================
+ * 5. Details ("Étape suivante : ...")
+ * ============================================ */
+
+.dsrc-stepper__details {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-caption);
+  color: var(--dsrc-color-gris-600);
+  margin-top: var(--dsrc-spacing-3);
+}
+
+
+/* ============================================
+ * 6. High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-stepper__steps {
+    forced-color-adjust: none;
+    background-image:
+      repeating-linear-gradient(
+        to right,
+        Highlight 0,
+        Highlight var(--active-inner),
+        transparent var(--active-inner),
+        transparent var(--active-outer)
+      ),
+      repeating-linear-gradient(
+        to right,
+        GrayText 0,
+        GrayText var(--default-inner),
+        transparent var(--default-inner),
+        transparent var(--default-outer)
+      );
+  }
+}
+
+
+/* ============================================
+ * 7. Print
+ * ============================================ */
+
+@media print {
+  .dsrc-stepper__steps {
+    border: 1px solid var(--dsrc-color-gris-400);
+  }
+}

package/src/components/summary/summary.css

@@ -0,0 +1,142 @@
+/**
+ * DSRC Summary (Table of Contents) Component
+ *
+ * Ordered list of anchor links with custom numbering via CSS counters.
+ *
+ * Usage:
+ *   <nav class="dsrc-summary" role="navigation" aria-label="Sommaire">
+ *     <h2 class="dsrc-summary__title">Sommaire</h2>
+ *     <ol class="dsrc-summary__list">
+ *       <li>
+ *         <a class="dsrc-summary__link" href="#section1">Section 1</a>
+ *       </li>
+ *       <li>
+ *         <a class="dsrc-summary__link" href="#section2">Section 2</a>
+ *       </li>
+ *     </ol>
+ *   </nav>
+ */
+
+
+/* ============================================
+ * 1. Base summary
+ * ============================================ */
+
+.dsrc-summary {
+  padding: var(--dsrc-spacing-6);
+  background-color: var(--dsrc-color-gris-50);
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-caption);
+  line-height: 1.5;
+}
+
+@media (min-width: 768px) {
+  .dsrc-summary {
+    padding: var(--dsrc-spacing-8);
+  }
+}
+
+
+/* ============================================
+ * 2. Title
+ * ============================================ */
+
+.dsrc-summary__title {
+  font-size: var(--dsrc-font-size-caption);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding-left: var(--dsrc-spacing-2);
+  margin: 0 0 var(--dsrc-spacing-2);
+}
+
+
+/* ============================================
+ * 3. Ordered list with custom counters
+ * ============================================ */
+
+.dsrc-summary__list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  counter-reset: summary-counter;
+}
+
+.dsrc-summary__list li {
+  counter-increment: summary-counter;
+  padding: var(--dsrc-spacing-2) 0;
+}
+
+
+/* ============================================
+ * 4. Links with counter number
+ * ============================================ */
+
+.dsrc-summary__link {
+  display: inline;
+  position: relative;
+  font-size: var(--dsrc-font-size-caption);
+  color: var(--dsrc-color-noir);
+  text-decoration: none;
+}
+
+.dsrc-summary__link::before {
+  content: counter(summary-counter) '. ';
+  font-weight: 700;
+  font-size: var(--dsrc-font-size-xl);
+}
+
+.dsrc-summary__link:hover {
+  text-decoration: underline;
+}
+
+.dsrc-summary__link:focus-visible {
+  outline: 2px solid var(--dsrc-color-primaire);
+  outline-offset: 2px;
+}
+
+
+/* ============================================
+ * 5. Nested lists
+ * ============================================ */
+
+.dsrc-summary__list .dsrc-summary__list {
+  counter-reset: summary-sub-counter;
+  padding-left: var(--dsrc-spacing-4);
+}
+
+.dsrc-summary__list .dsrc-summary__list li {
+  counter-increment: summary-sub-counter;
+}
+
+.dsrc-summary__list .dsrc-summary__list .dsrc-summary__link::before {
+  content: counter(summary-counter) '.' counter(summary-sub-counter) '. ';
+  font-size: var(--dsrc-font-size-lg);
+}
+
+
+/* ============================================
+ * 6. High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-summary {
+    outline: 1px solid ButtonText;
+  }
+
+  .dsrc-summary__link {
+    text-decoration: underline;
+    text-underline-offset: 5px;
+  }
+}
+
+
+/* ============================================
+ * 7. Print
+ * ============================================ */
+
+@media print {
+  .dsrc-summary {
+    border: 1px solid var(--dsrc-color-gris-400);
+  }
+}

package/src/components/tab/tab.css

@@ -0,0 +1,184 @@
+/**
+ * DSRC Tab Component
+ *
+ * ARIA tablist / tab / tabpanel with horizontal scrollable tab list.
+ * Active tab uses a top border indicator.
+ *
+ * Usage:
+ *   <div class="dsrc-tabs">
+ *     <ul class="dsrc-tabs__list" role="tablist">
+ *       <li role="presentation">
+ *         <button role="tab" aria-selected="true" aria-controls="panel1"
+ *                 class="dsrc-tabs__tab">Onglet 1</button>
+ *       </li>
+ *       <li role="presentation">
+ *         <button role="tab" aria-selected="false" aria-controls="panel2"
+ *                 class="dsrc-tabs__tab">Onglet 2</button>
+ *       </li>
+ *     </ul>
+ *     <div class="dsrc-tabs__panel dsrc-tabs__panel--selected"
+ *          id="panel1" role="tabpanel" tabindex="0">
+ *       Contenu 1
+ *     </div>
+ *     <div class="dsrc-tabs__panel"
+ *          id="panel2" role="tabpanel" tabindex="0">
+ *       Contenu 2
+ *     </div>
+ *   </div>
+ */
+
+
+/* ============================================
+ * 1. Base tabs container
+ * ============================================ */
+
+.dsrc-tabs {
+  position: relative;
+  overflow: hidden;
+}
+
+
+/* ============================================
+ * 2. Tab list (scrollable)
+ * ============================================ */
+
+.dsrc-tabs__list {
+  display: flex;
+  align-items: stretch;
+  overflow-x: auto;
+  width: 100%;
+  min-height: 48px;
+  margin: 0;
+  padding: 4px var(--dsrc-spacing-3);
+  list-style: none;
+  border-bottom: 1px solid var(--dsrc-color-gris-200);
+}
+
+
+/* ============================================
+ * 3. Individual tab button
+ * ============================================ */
+
+.dsrc-tabs__tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: var(--dsrc-spacing-2) var(--dsrc-spacing-3);
+  margin: 0 var(--dsrc-spacing-1);
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-body);
+  font-weight: 700;
+  color: var(--dsrc-color-noir);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
+  cursor: pointer;
+  overflow: visible;
+  text-decoration: none;
+  transition: border-color 0.15s;
+}
+
+.dsrc-tabs__tab:hover {
+  color: var(--dsrc-color-primaire);
+}
+
+.dsrc-tabs__tab:focus-visible {
+  outline: 2px solid var(--dsrc-color-primaire);
+  outline-offset: 2px;
+}
+
+.dsrc-tabs__tab[aria-selected="true"] {
+  border-bottom-color: var(--dsrc-color-primaire);
+  color: var(--dsrc-color-primaire);
+}
+
+.dsrc-tabs__tab:disabled {
+  color: var(--dsrc-color-gris-400);
+  cursor: not-allowed;
+}
+
+
+/* ============================================
+ * 4. Tab panels
+ * ============================================ */
+
+.dsrc-tabs__panel {
+  display: block;
+  padding: var(--dsrc-spacing-4);
+}
+
+@media (min-width: 768px) {
+  .dsrc-tabs__panel {
+    padding: var(--dsrc-spacing-8);
+  }
+}
+
+.dsrc-tabs__panel:not(.dsrc-tabs__panel--selected) {
+  visibility: hidden;
+  position: absolute;
+  left: -100%;
+  width: 100%;
+}
+
+.dsrc-tabs__panel:focus,
+.dsrc-tabs__panel:focus-visible {
+  outline: 2px solid var(--dsrc-color-primaire);
+  outline-offset: -2px;
+}
+
+
+/* ============================================
+ * 5. High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-tabs__list {
+    border-bottom: 1px solid ButtonText;
+  }
+
+  .dsrc-tabs__tab {
+    border: 1px solid ButtonText;
+  }
+
+  .dsrc-tabs__tab[aria-selected="true"] {
+    border-color: Highlight;
+    border-top: 4px solid Highlight;
+    border-bottom: 1px solid Canvas;
+    color: Highlight;
+  }
+
+  .dsrc-tabs__panel:not(.dsrc-tabs__panel--selected) {
+    border: 1px solid GrayText;
+  }
+}
+
+
+/* ============================================
+ * 6. Reduced motion
+ * ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .dsrc-tabs__tab {
+    transition: none;
+  }
+}
+
+
+/* ============================================
+ * 7. Print
+ * ============================================ */
+
+@media print {
+  .dsrc-tabs__list {
+    display: none;
+  }
+
+  .dsrc-tabs__panel {
+    visibility: visible !important;
+    position: static !important;
+    left: auto !important;
+    padding: var(--dsrc-spacing-2) 0;
+    border-bottom: 1px solid var(--dsrc-color-gris-300);
+  }
+}