@dsrc-cm/core 0.1.0

package/src/components/table/table.css

@@ -0,0 +1,556 @@
+/**
+ * DSRC Table Component
+ * Aligned with DSFR multi-layer table architecture
+ *
+ * Structure (multi-layer wrapper for proper overflow & layout):
+ *
+ * <div class="dsrc-table" id="table-component">
+ *   <div class="dsrc-table__header">
+ *     <!-- Optional: search bar, display toggles, filters -->
+ *   </div>
+ *   <div class="dsrc-table__wrapper">
+ *     <div class="dsrc-table__container">
+ *       <div class="dsrc-table__content">
+ *         <table>
+ *           <caption>Titre du tableau</caption>
+ *           <thead>
+ *             <tr>
+ *               <th scope="col">Colonne 1</th>
+ *               <th scope="col">Colonne 2</th>
+ *             </tr>
+ *           </thead>
+ *           <tbody>
+ *             <tr>
+ *               <td>Donnee 1</td>
+ *               <td>Donnee 2</td>
+ *             </tr>
+ *           </tbody>
+ *         </table>
+ *       </div>
+ *     </div>
+ *   </div>
+ *   <div class="dsrc-table__footer">
+ *     <div class="dsrc-table__footer--start">
+ *       <p class="dsrc-table__detail">215 lignes</p>
+ *     </div>
+ *     <div class="dsrc-table__footer--end">
+ *       <!-- Pagination or actions -->
+ *     </div>
+ *   </div>
+ * </div>
+ *
+ * Variants:
+ *   --sm ................. Compact padding
+ *   --lg ................. Spacious padding
+ *   --bordered ........... All cell borders
+ *   --striped ............ Alternating row backgrounds
+ *   --no-scroll .......... Disable horizontal overflow
+ *   --no-caption ......... Visually hide caption (still accessible)
+ *   --caption-bottom ..... Caption below table
+ *   --fixed .............. Sticky thead
+ *
+ * Column sizing (on <th>):
+ *   .dsrc-col--xs ........ 5%
+ *   .dsrc-col--sm ........ 10%
+ *   .dsrc-col--md ........ 25%
+ *   .dsrc-col--lg ........ 50%
+ *
+ * Cell alignment:
+ *   .dsrc-cell--top ...... vertical-align: top
+ *   .dsrc-cell--center ... text-align: center
+ *   .dsrc-cell--right .... text-align: right
+ *
+ * Sortable:
+ *   <th scope="col" aria-sort="none|ascending|descending">
+ *     <button>Nom</button>
+ *   </th>
+ *
+ * Selected rows:
+ *   <tr aria-selected="true">
+ */
+
+
+/* ============================================
+ * 1. Root wrapper
+ * ============================================ */
+
+.dsrc-table {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  background-color: var(--dsrc-color-blanc);
+  border: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+  border-radius: var(--dsrc-radius-default);
+  overflow: hidden;
+}
+
+
+/* ============================================
+ * 2. Header area (search, filters, controls)
+ * ============================================ */
+
+.dsrc-table__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--dsrc-spacing-3);
+  padding: var(--dsrc-spacing-3) var(--dsrc-spacing-4);
+  border-bottom: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+}
+
+.dsrc-table__header:empty {
+  display: none;
+}
+
+
+/* ============================================
+ * 3. Wrapper / Container / Content layers
+ *    Enables horizontal scroll without breaking
+ *    the outer border-radius or header/footer
+ * ============================================ */
+
+.dsrc-table__wrapper {
+  overflow: hidden;
+}
+
+.dsrc-table__container {
+  overflow-x: auto;
+}
+
+.dsrc-table__content {
+  min-width: 100%;
+}
+
+
+/* ============================================
+ * 4. The <table> element itself
+ * ============================================ */
+
+.dsrc-table table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+
+/* ============================================
+ * 5. Caption
+ * ============================================ */
+
+.dsrc-table caption {
+  caption-side: top;
+  text-align: start;
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-body);
+  font-weight: var(--dsrc-font-weight-bold);
+  color: var(--dsrc-color-noir);
+  padding: var(--dsrc-spacing-4);
+  background-color: var(--dsrc-color-gris-50);
+  border-bottom: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+}
+
+/* --caption-bottom: move caption below table */
+.dsrc-table--caption-bottom caption {
+  caption-side: bottom;
+  border-bottom: none;
+  border-top: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+}
+
+/* --no-caption: visually hide but keep accessible */
+.dsrc-table--no-caption caption {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+
+/* ============================================
+ * 6. Table head
+ * ============================================ */
+
+.dsrc-table thead {
+  background-color: var(--dsrc-color-gris-50);
+}
+
+.dsrc-table th {
+  padding: var(--dsrc-spacing-3) var(--dsrc-spacing-4);
+  text-align: start;
+  font-size: var(--dsrc-font-size-micro);
+  font-weight: var(--dsrc-font-weight-semibold);
+  font-family: var(--dsrc-font-family-mono);
+  text-transform: uppercase;
+  letter-spacing: var(--dsrc-font-letter-spacing-caps);
+  color: var(--dsrc-color-gris-600);
+  border-bottom: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+
+/* ============================================
+ * 7. Table body cells
+ * ============================================ */
+
+.dsrc-table td {
+  padding: var(--dsrc-spacing-3) var(--dsrc-spacing-4);
+  border-bottom: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-100);
+  color: var(--dsrc-color-gris-800);
+  vertical-align: middle;
+  line-height: var(--dsrc-font-line-height-relaxed);
+}
+
+.dsrc-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+
+/* ============================================
+ * 8. Row hover
+ * ============================================ */
+
+.dsrc-table tbody tr:hover td {
+  background-color: var(--dsrc-color-gris-50);
+}
+
+
+/* ============================================
+ * 9. Selected rows
+ * ============================================ */
+
+.dsrc-table tr[aria-selected="true"] td {
+  background-color: var(--dsrc-color-primaire-clair);
+}
+
+.dsrc-table tr[aria-selected="true"]:hover td {
+  background-color: var(--dsrc-color-primaire-clair);
+}
+
+
+/* ============================================
+ * 10. Sortable headers
+ *     <th scope="col" aria-sort="none">
+ *       <button type="button">Nom</button>
+ *     </th>
+ * ============================================ */
+
+.dsrc-table th[aria-sort] {
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+}
+
+.dsrc-table th[aria-sort]:hover {
+  background-color: var(--dsrc-color-gris-100);
+}
+
+/* Sort button inside th (DSFR pattern) */
+.dsrc-table th[aria-sort] button {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dsrc-spacing-2);
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  text-transform: inherit;
+  letter-spacing: inherit;
+  width: 100%;
+}
+
+.dsrc-table th[aria-sort] button:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: calc(-1 * var(--dsrc-outline-offset));
+  border-radius: 2px;
+}
+
+/* Sort indicator arrow via pseudo-element */
+.dsrc-table th[aria-sort] button::after {
+  content: "";
+  display: inline-block;
+  width: 0;
+  height: 0;
+  flex-shrink: 0;
+  margin-left: auto;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 5px solid var(--dsrc-color-gris-400);
+  transition: transform var(--dsrc-transition-duration-fast) ease,
+    border-color var(--dsrc-transition-duration-fast) ease;
+}
+
+/* Ascending: arrow points up (default position) */
+.dsrc-table th[aria-sort="ascending"] button::after {
+  border-bottom-color: var(--dsrc-color-primaire);
+  transform: rotate(0deg);
+}
+
+/* Descending: arrow points down */
+.dsrc-table th[aria-sort="descending"] button::after {
+  border-bottom-color: var(--dsrc-color-primaire);
+  transform: rotate(180deg);
+}
+
+/* Unsorted: neutral double arrow (stacked) */
+.dsrc-table th[aria-sort="none"] button::after {
+  border-bottom-color: var(--dsrc-color-gris-400);
+}
+
+/* Focus-visible fallback on th itself (no inner button) */
+.dsrc-table th[aria-sort]:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: calc(-1 * var(--dsrc-outline-offset));
+}
+
+
+/* ============================================
+ * 11. Footer area (row count, pagination)
+ * ============================================ */
+
+.dsrc-table__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--dsrc-spacing-3);
+  padding: var(--dsrc-spacing-3) var(--dsrc-spacing-4);
+  border-top: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+}
+
+.dsrc-table__footer:empty {
+  display: none;
+}
+
+.dsrc-table__footer--start {
+  display: flex;
+  align-items: center;
+  gap: var(--dsrc-spacing-2);
+}
+
+.dsrc-table__footer--end {
+  display: flex;
+  align-items: center;
+  gap: var(--dsrc-spacing-2);
+  margin-left: auto;
+}
+
+.dsrc-table__detail {
+  font-size: var(--dsrc-font-size-caption);
+  color: var(--dsrc-color-gris-600);
+  margin: 0;
+}
+
+
+/* ============================================
+ * 12. Size variants
+ * ============================================ */
+
+/* Small: tighter padding */
+.dsrc-table--sm th,
+.dsrc-table--sm td {
+  padding: var(--dsrc-spacing-2) var(--dsrc-spacing-3);
+}
+
+.dsrc-table--sm caption {
+  padding: var(--dsrc-spacing-3);
+}
+
+.dsrc-table--sm .dsrc-table__header,
+.dsrc-table--sm .dsrc-table__footer {
+  padding: var(--dsrc-spacing-2) var(--dsrc-spacing-3);
+}
+
+/* Large: more spacious padding */
+.dsrc-table--lg th,
+.dsrc-table--lg td {
+  padding: var(--dsrc-spacing-4) var(--dsrc-spacing-5);
+}
+
+.dsrc-table--lg caption {
+  padding: var(--dsrc-spacing-5);
+}
+
+.dsrc-table--lg .dsrc-table__header,
+.dsrc-table--lg .dsrc-table__footer {
+  padding: var(--dsrc-spacing-4) var(--dsrc-spacing-5);
+}
+
+
+/* ============================================
+ * 13. Bordered variant (all cell borders)
+ * ============================================ */
+
+.dsrc-table--bordered th,
+.dsrc-table--bordered td {
+  border: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+}
+
+
+/* ============================================
+ * 14. Striped variant
+ * ============================================ */
+
+.dsrc-table--striped tbody tr:nth-child(even) td {
+  background-color: var(--dsrc-color-gris-50);
+}
+
+/* Override hover to maintain striped look */
+.dsrc-table--striped tbody tr:nth-child(even):hover td {
+  background-color: var(--dsrc-color-gris-100);
+}
+
+
+/* ============================================
+ * 15. No-scroll variant
+ * ============================================ */
+
+.dsrc-table--no-scroll .dsrc-table__container {
+  overflow-x: visible;
+}
+
+.dsrc-table--no-scroll table {
+  table-layout: fixed;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+
+/* ============================================
+ * 16. Fixed / sticky header
+ * ============================================ */
+
+.dsrc-table--fixed thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.dsrc-table--fixed thead th {
+  background-color: var(--dsrc-color-gris-50);
+}
+
+
+/* ============================================
+ * 17. Column sizing classes (on <th>)
+ * ============================================ */
+
+.dsrc-col--xs {
+  width: 5%;
+}
+
+.dsrc-col--sm {
+  width: 10%;
+}
+
+.dsrc-col--md {
+  width: 25%;
+}
+
+.dsrc-col--lg {
+  width: 50%;
+}
+
+
+/* ============================================
+ * 18. Cell alignment utilities
+ * ============================================ */
+
+/* Vertical alignment */
+.dsrc-cell--top {
+  vertical-align: top;
+}
+
+/* Horizontal alignment */
+.dsrc-cell--center {
+  text-align: center;
+}
+
+.dsrc-cell--right {
+  text-align: end;
+}
+
+
+/* ============================================
+ * 19. Scroll shadow indicators
+ *     Applied to .dsrc-table__container
+ *     via data-scroll attribute (JS driven)
+ * ============================================ */
+
+.dsrc-table__container {
+  position: relative;
+}
+
+.dsrc-table__container::before,
+.dsrc-table__container::after {
+  content: "";
+  position: sticky;
+  top: 0;
+  bottom: 0;
+  width: var(--dsrc-spacing-6);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--dsrc-transition-duration-fast) ease;
+  z-index: 1;
+}
+
+.dsrc-table__container::before {
+  left: 0;
+  background: linear-gradient(to right, var(--dsrc-color-gris-100), transparent);
+}
+
+.dsrc-table__container::after {
+  right: 0;
+  background: linear-gradient(to left, var(--dsrc-color-gris-100), transparent);
+}
+
+/* JS sets data-scroll attribute on .dsrc-table__container */
+.dsrc-table__container[data-scroll="right"]::after,
+.dsrc-table__container[data-scroll="both"]::after {
+  opacity: 1;
+}
+
+.dsrc-table__container[data-scroll="left"]::before,
+.dsrc-table__container[data-scroll="both"]::before {
+  opacity: 1;
+}
+
+
+/* ============================================
+ * 20. High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-table {
+    border: 1px solid ButtonText;
+  }
+
+  .dsrc-table th {
+    border-bottom: 2px solid ButtonText;
+  }
+
+  .dsrc-table td {
+    border-bottom: 1px solid ButtonText;
+  }
+
+  .dsrc-table tr[aria-selected="true"] td {
+    border: 2px solid Highlight;
+  }
+
+  .dsrc-table th[aria-sort] button::after {
+    border-bottom-color: ButtonText;
+  }
+
+  .dsrc-table th[aria-sort="ascending"] button::after,
+  .dsrc-table th[aria-sort="descending"] button::after {
+    border-bottom-color: Highlight;
+  }
+
+  .dsrc-table th[aria-sort] button:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}