@dsrc-cm/core 0.1.0

package/src/components/radio/radio.css

@@ -0,0 +1,270 @@
+/**
+ * DSRC Radio Component
+ *
+ * Custom-styled radio button using hidden native input + styled label pseudo-element.
+ *
+ * Variants:
+ *   --sm ......... Smaller radio (16px)
+ *   --inline ..... Horizontal layout
+ *   --rich ....... Card-style with pictogram
+ *   --error ...... Error state
+ *   --valid ...... Valid state
+ *
+ * Usage:
+ *   <div class="dsrc-radio-group">
+ *     <input type="radio" id="r1" name="group">
+ *     <label for="r1">Option A</label>
+ *   </div>
+ */
+
+
+/* ============================================
+ * 1. Base radio group
+ * ============================================ */
+
+.dsrc-radio-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  padding: var(--dsrc-spacing-2) 0;
+}
+
+.dsrc-radio-group input[type="radio"] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.dsrc-radio-group input[type="radio"] + 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 radio visual (label::before = circle)
+ * ============================================ */
+
+.dsrc-radio-group input[type="radio"] + label::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--dsrc-color-gris-600);
+  border-radius: 50%;
+  background-color: var(--dsrc-color-blanc);
+  transition: border-color 0.15s;
+}
+
+/* Inner dot (label::after) */
+.dsrc-radio-group input[type="radio"] + label::after {
+  content: '';
+  position: absolute;
+  top: 8px;
+  left: 6px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: transparent;
+  transition: background-color 0.15s;
+}
+
+
+/* ============================================
+ * 3. States
+ * ============================================ */
+
+/* Checked */
+.dsrc-radio-group input[type="radio"]:checked + label::before {
+  border-color: var(--dsrc-color-primaire);
+}
+
+.dsrc-radio-group input[type="radio"]:checked + label::after {
+  background-color: var(--dsrc-color-primaire);
+}
+
+/* Focus */
+.dsrc-radio-group input[type="radio"]:focus-visible + label::before {
+  outline: 2px solid var(--dsrc-color-primaire);
+  outline-offset: 2px;
+}
+
+/* Hover */
+.dsrc-radio-group input[type="radio"]:not(:disabled):hover + label::before {
+  border-color: var(--dsrc-color-primaire);
+}
+
+/* Disabled */
+.dsrc-radio-group input[type="radio"]:disabled + label {
+  color: var(--dsrc-color-gris-400);
+  cursor: not-allowed;
+}
+
+.dsrc-radio-group input[type="radio"]:disabled + label::before {
+  background-color: var(--dsrc-color-gris-100);
+  border-color: var(--dsrc-color-gris-300);
+}
+
+.dsrc-radio-group input[type="radio"]:disabled:checked + label::after {
+  background-color: var(--dsrc-color-gris-400);
+}
+
+/* Hint text */
+.dsrc-radio-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-radio-group--sm input[type="radio"] {
+  width: 16px;
+  height: 16px;
+}
+
+.dsrc-radio-group--sm input[type="radio"] + label {
+  padding-left: 24px;
+  min-height: 16px;
+  font-size: var(--dsrc-font-size-caption);
+}
+
+.dsrc-radio-group--sm input[type="radio"] + label::before {
+  width: 16px;
+  height: 16px;
+  top: 3px;
+}
+
+.dsrc-radio-group--sm input[type="radio"] + label::after {
+  width: 8px;
+  height: 8px;
+  top: 7px;
+  left: 4px;
+}
+
+
+/* ============================================
+ * 5. Rich variant (card-style)
+ * ============================================ */
+
+.dsrc-radio-group--rich {
+  padding: var(--dsrc-spacing-3);
+  border: 1px solid var(--dsrc-color-gris-200);
+  border-radius: var(--dsrc-radius-default);
+}
+
+.dsrc-radio-group--rich:has(input[type="radio"]:checked) {
+  border-color: var(--dsrc-color-primaire);
+  background-color: var(--dsrc-color-primaire-clair);
+}
+
+.dsrc-radio-group--rich .dsrc-radio-rich__pictogram {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  margin-bottom: var(--dsrc-spacing-2);
+}
+
+.dsrc-radio-group--rich .dsrc-radio-rich__pictogram img,
+.dsrc-radio-group--rich .dsrc-radio-rich__pictogram svg {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+
+/* ============================================
+ * 6. Validation states
+ * ============================================ */
+
+.dsrc-radio-group--error {
+  padding-left: var(--dsrc-spacing-3);
+  border-left: 2px solid var(--dsrc-color-erreur-bordure);
+}
+
+.dsrc-radio-group--valid {
+  padding-left: var(--dsrc-spacing-3);
+  border-left: 2px solid var(--dsrc-color-succes-bordure);
+}
+
+
+/* ============================================
+ * 7. Inline layout
+ * ============================================ */
+
+.dsrc-radio-group--inline {
+  display: inline-flex;
+  margin-right: var(--dsrc-spacing-4);
+}
+
+
+/* ============================================
+ * 8. High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-radio-group input[type="radio"] {
+    opacity: 1;
+  }
+
+  .dsrc-radio-group input[type="radio"] + label::before,
+  .dsrc-radio-group input[type="radio"] + label::after {
+    display: none;
+  }
+
+  .dsrc-radio-group--rich {
+    border-color: ButtonText;
+  }
+}
+
+
+/* ============================================
+ * 9. Reduced motion
+ * ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .dsrc-radio-group input[type="radio"] + label::before,
+  .dsrc-radio-group input[type="radio"] + label::after {
+    transition: none;
+  }
+}
+
+
+/* ============================================
+ * 10. Print
+ * ============================================ */
+
+@media print {
+  .dsrc-radio-group input[type="radio"] {
+    opacity: 1;
+  }
+
+  .dsrc-radio-group input[type="radio"] + label::before,
+  .dsrc-radio-group input[type="radio"] + label::after {
+    display: none;
+  }
+}

package/src/components/range/range.css

@@ -0,0 +1,362 @@
+/**
+ * DSRC Range (Slider) Component
+ *
+ * Styled native range input with progress track via CSS variables.
+ * The progress bar requires JS to set --progress-left / --progress-right.
+ *
+ * Variants:
+ *   --sm ......... Smaller thumb and track
+ *   --step ....... Visual step markers
+ *   --double ..... Dual-thumb range (two inputs)
+ *
+ * Usage:
+ *   <div class="dsrc-range-group">
+ *     <div class="dsrc-range" data-dsrc-range
+ *          style="--progress-left:0;--progress-right:50%">
+ *       <span class="dsrc-range__min">0</span>
+ *       <span class="dsrc-range__max">100</span>
+ *       <input type="range" min="0" max="100">
+ *       <output class="dsrc-range__output">50</output>
+ *     </div>
+ *   </div>
+ */
+
+
+/* ============================================
+ * 1. Range group (wrapper with validation)
+ * ============================================ */
+
+.dsrc-range-group {
+  position: relative;
+}
+
+.dsrc-range-group--error {
+  padding-left: var(--dsrc-spacing-3);
+  border-left: 2px solid var(--dsrc-color-erreur-bordure);
+}
+
+.dsrc-range-group--valid {
+  padding-left: var(--dsrc-spacing-3);
+  border-left: 2px solid var(--dsrc-color-succes-bordure);
+}
+
+
+/* ============================================
+ * 2. Base range
+ * ============================================ */
+
+.dsrc-range {
+  --thumb-size: 24px;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dsrc-range input[type="range"] {
+  width: 100%;
+  outline: none;
+}
+
+.dsrc-range__output {
+  visibility: hidden;
+}
+
+.dsrc-range__output,
+.dsrc-range__min,
+.dsrc-range__max {
+  text-align: center;
+  min-width: var(--thumb-size);
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-caption);
+  color: var(--dsrc-color-gris-600);
+}
+
+
+/* ============================================
+ * 3. JS-enhanced track (::before = bg, ::after = fill)
+ * ============================================ */
+
+.dsrc-range[data-dsrc-range] {
+  --progress-left: 0;
+  --progress-right: calc(var(--thumb-size) * 0.5);
+}
+
+.dsrc-range[data-dsrc-range]::before,
+.dsrc-range[data-dsrc-range]::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 26px;
+  left: 0;
+  right: 0;
+  height: 12px;
+  border-radius: 6px;
+}
+
+.dsrc-range[data-dsrc-range]::before {
+  background-color: var(--dsrc-color-gris-200);
+  outline-offset: -1px;
+}
+
+.dsrc-range[data-dsrc-range]::after {
+  background-color: var(--dsrc-color-primaire);
+  clip-path: polygon(
+    var(--progress-left) 0,
+    var(--progress-right) 0,
+    var(--progress-right) 100%,
+    var(--progress-left) 100%
+  );
+}
+
+
+/* ============================================
+ * 4. Styled thumb
+ * ============================================ */
+
+.dsrc-range[data-dsrc-range] input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  width: 100%;
+  height: var(--thumb-size);
+  position: relative;
+  z-index: 1;
+}
+
+.dsrc-range[data-dsrc-range] input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border-radius: 50%;
+  border: none;
+  background-color: var(--dsrc-color-primaire);
+  box-shadow: var(--dsrc-shadow-sm);
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.dsrc-range[data-dsrc-range] input[type="range"]::-moz-range-thumb {
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border-radius: 50%;
+  border: none;
+  background-color: var(--dsrc-color-primaire);
+  box-shadow: var(--dsrc-shadow-sm);
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.dsrc-range[data-dsrc-range] .dsrc-range__output {
+  visibility: visible;
+}
+
+
+/* ============================================
+ * 5. Focus
+ * ============================================ */
+
+.dsrc-range[data-dsrc-range] input[type="range"]:focus-visible::-webkit-slider-thumb {
+  outline: 2px solid var(--dsrc-color-primaire);
+  outline-offset: 2px;
+}
+
+.dsrc-range[data-dsrc-range] input[type="range"]:focus-visible::-moz-range-thumb {
+  outline: 2px solid var(--dsrc-color-primaire);
+  outline-offset: 2px;
+}
+
+
+/* ============================================
+ * 6. Hover
+ * ============================================ */
+
+.dsrc-range[data-dsrc-range] input[type="range"]:not(:disabled):hover::-webkit-slider-thumb {
+  background-color: var(--dsrc-color-primaire-hover);
+}
+
+.dsrc-range[data-dsrc-range] input[type="range"]:not(:disabled):hover::-moz-range-thumb {
+  background-color: var(--dsrc-color-primaire-hover);
+}
+
+
+/* ============================================
+ * 7. Disabled
+ * ============================================ */
+
+.dsrc-range-group--disabled .dsrc-range__output,
+.dsrc-range-group--disabled .dsrc-range__min,
+.dsrc-range-group--disabled .dsrc-range__max {
+  color: var(--dsrc-color-gris-400);
+}
+
+.dsrc-range[data-dsrc-range] input[type="range"]:disabled::-webkit-slider-thumb {
+  background-color: var(--dsrc-color-gris-400);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.dsrc-range[data-dsrc-range] input[type="range"]:disabled::-moz-range-thumb {
+  background-color: var(--dsrc-color-gris-400);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+
+/* ============================================
+ * 8. Small variant
+ * ============================================ */
+
+.dsrc-range--sm {
+  --thumb-size: 16px;
+}
+
+.dsrc-range--sm[data-dsrc-range]::before,
+.dsrc-range--sm[data-dsrc-range]::after {
+  top: 24px;
+  height: 8px;
+  border-radius: 4px;
+}
+
+
+/* ============================================
+ * 9. Step markers
+ * ============================================ */
+
+.dsrc-range--step[data-dsrc-range]::before,
+.dsrc-range--step[data-dsrc-range]::after {
+  --step-width: 0;
+  padding-left: 10px;
+  padding-right: 10px;
+  background-repeat: repeat-x;
+  background-size: var(--step-width) 100%;
+  background-position: 10px 0;
+  background-clip: content-box;
+}
+
+.dsrc-range--step[data-dsrc-range]::before {
+  background-image: radial-gradient(circle at 2px 50%,
+    var(--dsrc-color-gris-600) 0,
+    var(--dsrc-color-gris-600) 1px,
+    transparent 1px
+  );
+}
+
+
+/* ============================================
+ * 10. Double range (dual thumbs)
+ * ============================================ */
+
+.dsrc-range--double .dsrc-range__output {
+  min-width: calc(var(--thumb-size) * 2);
+}
+
+.dsrc-range--double[data-dsrc-range] input[type="range"] {
+  width: calc(100% - var(--thumb-size));
+  pointer-events: none;
+}
+
+.dsrc-range--double[data-dsrc-range] input[type="range"]::-webkit-slider-thumb {
+  pointer-events: auto;
+}
+
+.dsrc-range--double[data-dsrc-range] input[type="range"]::-moz-range-thumb {
+  pointer-events: auto;
+}
+
+.dsrc-range--double[data-dsrc-range] input[type="range"]:nth-of-type(1) {
+  margin-right: var(--thumb-size);
+}
+
+.dsrc-range--double[data-dsrc-range] input[type="range"]:nth-of-type(2) {
+  position: absolute;
+  right: 0;
+  top: 20px;
+}
+
+
+/* ============================================
+ * 11. High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-range[data-dsrc-range] input[type="range"] {
+    border: none;
+  }
+
+  .dsrc-range[data-dsrc-range]::before {
+    box-shadow: 0 0 0 1px ButtonText;
+  }
+
+  .dsrc-range[data-dsrc-range]::after {
+    background-color: Highlight;
+  }
+
+  .dsrc-range[data-dsrc-range] input[type="range"]::-webkit-slider-thumb {
+    background-color: ButtonText;
+    box-shadow: none;
+  }
+
+  .dsrc-range[data-dsrc-range] input[type="range"]::-moz-range-thumb {
+    background-color: ButtonText;
+    box-shadow: none;
+  }
+
+  .dsrc-range[data-dsrc-range] input[type="range"]:focus-visible::-webkit-slider-thumb {
+    outline-color: Highlight;
+  }
+
+  .dsrc-range[data-dsrc-range] input[type="range"]:focus-visible::-moz-range-thumb {
+    outline-color: Highlight;
+  }
+
+  .dsrc-range-group--disabled .dsrc-range__output,
+  .dsrc-range-group--disabled .dsrc-range__min,
+  .dsrc-range-group--disabled .dsrc-range__max {
+    color: GrayText;
+  }
+
+  .dsrc-range[data-dsrc-range] input[type="range"]:disabled::-webkit-slider-thumb {
+    background-color: GrayText;
+  }
+
+  .dsrc-range[data-dsrc-range] input[type="range"]:disabled::-moz-range-thumb {
+    background-color: GrayText;
+  }
+
+  .dsrc-range--step[data-dsrc-range]::before {
+    background-image: radial-gradient(circle at 2px 50%,
+      ButtonText 0,
+      ButtonText 1px,
+      transparent 1px
+    );
+  }
+}
+
+
+/* ============================================
+ * 12. Reduced motion
+ * ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .dsrc-range[data-dsrc-range] input[type="range"]::-webkit-slider-thumb {
+    transition: none;
+  }
+
+  .dsrc-range[data-dsrc-range] input[type="range"]::-moz-range-thumb {
+    transition: none;
+  }
+}
+
+
+/* ============================================
+ * 13. Print
+ * ============================================ */
+
+@media print {
+  .dsrc-range[data-dsrc-range]::before,
+  .dsrc-range[data-dsrc-range]::after {
+    display: none;
+  }
+}