@dsrc-cm/core 0.1.0

package/src/components/toggle/toggle.css

@@ -0,0 +1,229 @@
+/**
+ * DSRC Toggle (Switch) Component
+ *
+ * On/off switch styled from a native checkbox for full accessibility.
+ * The circle slides via translateX on :checked.
+ *
+ * Variants:
+ *   --label-left ...... Label on left, switch on right
+ *   --border-bottom ... Bottom border separator
+ *
+ * Usage:
+ *   <div class="dsrc-toggle">
+ *     <input type="checkbox" id="t1" class="dsrc-toggle__input">
+ *     <label for="t1" class="dsrc-toggle__label"
+ *            data-checked="Activé" data-unchecked="Désactivé">
+ *       Notifications
+ *     </label>
+ *   </div>
+ */
+
+
+/* ============================================
+ * 1. Base toggle
+ * ============================================ */
+
+.dsrc-toggle {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: var(--dsrc-spacing-3) 0;
+}
+
+.dsrc-toggle__input {
+  position: absolute;
+  opacity: 0;
+  width: 40px;
+  height: 24px;
+  margin: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.dsrc-toggle__label {
+  display: flex;
+  align-items: center;
+  gap: var(--dsrc-spacing-3);
+  padding-left: 56px;
+  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;
+  position: relative;
+}
+
+
+/* ============================================
+ * 2. Switch track (label::before)
+ * ============================================ */
+
+.dsrc-toggle__label::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 40px;
+  height: 24px;
+  border-radius: 12px;
+  background-color: var(--dsrc-color-gris-400);
+  transition: background-color 0.2s;
+}
+
+
+/* ============================================
+ * 3. Switch thumb (label::after)
+ * ============================================ */
+
+.dsrc-toggle__label::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: var(--dsrc-color-blanc);
+  box-shadow: var(--dsrc-shadow-sm);
+  transition: transform 0.2s, left 0.2s;
+}
+
+
+/* ============================================
+ * 4. Status text
+ * ============================================ */
+
+.dsrc-toggle__label .dsrc-toggle__status {
+  font-size: var(--dsrc-font-size-caption);
+  color: var(--dsrc-color-gris-600);
+}
+
+
+/* ============================================
+ * 5. Checked state
+ * ============================================ */
+
+.dsrc-toggle__input:checked + .dsrc-toggle__label::before {
+  background-color: var(--dsrc-color-primaire);
+}
+
+.dsrc-toggle__input:checked + .dsrc-toggle__label::after {
+  left: 18px;
+}
+
+
+/* ============================================
+ * 6. Focus & hover
+ * ============================================ */
+
+.dsrc-toggle__input:focus-visible + .dsrc-toggle__label::before {
+  outline: 2px solid var(--dsrc-color-primaire);
+  outline-offset: 2px;
+}
+
+.dsrc-toggle__input:not(:disabled):hover + .dsrc-toggle__label::before {
+  background-color: var(--dsrc-color-gris-600);
+}
+
+.dsrc-toggle__input:not(:disabled):checked:hover + .dsrc-toggle__label::before {
+  background-color: var(--dsrc-color-primaire-hover);
+}
+
+
+/* ============================================
+ * 7. Disabled
+ * ============================================ */
+
+.dsrc-toggle__input:disabled + .dsrc-toggle__label {
+  color: var(--dsrc-color-gris-400);
+  cursor: not-allowed;
+}
+
+.dsrc-toggle__input:disabled + .dsrc-toggle__label::before {
+  background-color: var(--dsrc-color-gris-200);
+}
+
+.dsrc-toggle__input:disabled + .dsrc-toggle__label::after {
+  background-color: var(--dsrc-color-gris-100);
+  box-shadow: none;
+}
+
+
+/* ============================================
+ * 8. Variant: label-left (switch on right)
+ * ============================================ */
+
+.dsrc-toggle--label-left .dsrc-toggle__label {
+  padding-left: 0;
+  padding-right: 56px;
+}
+
+.dsrc-toggle--label-left .dsrc-toggle__label::before {
+  left: auto;
+  right: 0;
+}
+
+.dsrc-toggle--label-left .dsrc-toggle__label::after {
+  left: auto;
+  right: 18px;
+}
+
+.dsrc-toggle--label-left .dsrc-toggle__input:checked + .dsrc-toggle__label::after {
+  right: 2px;
+}
+
+
+/* ============================================
+ * 9. Variant: border-bottom
+ * ============================================ */
+
+.dsrc-toggle--border-bottom {
+  border-bottom: 1px solid var(--dsrc-color-gris-200);
+}
+
+
+/* ============================================
+ * 10. High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-toggle__input {
+    opacity: 1;
+  }
+
+  .dsrc-toggle__label::before,
+  .dsrc-toggle__label::after {
+    display: none;
+  }
+}
+
+
+/* ============================================
+ * 11. Reduced motion
+ * ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .dsrc-toggle__label::before,
+  .dsrc-toggle__label::after {
+    transition: none;
+  }
+}
+
+
+/* ============================================
+ * 12. Print
+ * ============================================ */
+
+@media print {
+  .dsrc-toggle__input {
+    opacity: 1;
+  }
+
+  .dsrc-toggle__label::before,
+  .dsrc-toggle__label::after {
+    display: none;
+  }
+}

package/src/components/tooltip/tooltip.css

@@ -0,0 +1,158 @@
+/**
+ * DSRC Tooltip Component
+ *
+ * Lightweight popup positioned near a trigger element.
+ * Position controlled via [data-placement] attribute.
+ *
+ * Usage:
+ *   <span class="dsrc-tooltip dsrc-tooltip--shown"
+ *         data-placement="top"
+ *         role="tooltip" id="tip1">
+ *     Texte d'aide contextuelle
+ *   </span>
+ */
+
+
+/* ============================================
+ * 1. Base tooltip
+ * ============================================ */
+
+.dsrc-tooltip {
+  --arrow-x: 0;
+  display: none;
+  position: absolute;
+  z-index: var(--dsrc-z-index-tooltip, 1100);
+  max-width: 280px;
+  padding: var(--dsrc-spacing-2) var(--dsrc-spacing-3);
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-caption);
+  line-height: 1.5;
+  color: var(--dsrc-color-blanc);
+  background-color: var(--dsrc-color-noir);
+  border-radius: var(--dsrc-radius-small);
+  white-space: normal;
+  text-align: left;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s, visibility 0.15s;
+}
+
+
+/* ============================================
+ * 2. Shown state
+ * ============================================ */
+
+.dsrc-tooltip--shown {
+  display: block;
+  opacity: 1;
+  visibility: visible;
+}
+
+
+/* ============================================
+ * 3. Arrow
+ * ============================================ */
+
+.dsrc-tooltip::after {
+  content: '';
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: var(--dsrc-color-noir);
+  transform: rotate(45deg);
+}
+
+
+/* ============================================
+ * 4. Placement: top (default)
+ * ============================================ */
+
+.dsrc-tooltip[data-placement="top"] {
+  margin-bottom: var(--dsrc-spacing-2);
+}
+
+.dsrc-tooltip[data-placement="top"]::after {
+  bottom: -4px;
+  left: calc(50% + var(--arrow-x) - 4px);
+}
+
+
+/* ============================================
+ * 5. Placement: bottom
+ * ============================================ */
+
+.dsrc-tooltip[data-placement="bottom"] {
+  margin-top: var(--dsrc-spacing-2);
+}
+
+.dsrc-tooltip[data-placement="bottom"]::after {
+  top: -4px;
+  left: calc(50% + var(--arrow-x) - 4px);
+}
+
+
+/* ============================================
+ * 6. Placement: left
+ * ============================================ */
+
+.dsrc-tooltip[data-placement="left"] {
+  margin-right: var(--dsrc-spacing-2);
+}
+
+.dsrc-tooltip[data-placement="left"]::after {
+  right: -4px;
+  top: calc(50% - 4px);
+}
+
+
+/* ============================================
+ * 7. Placement: right
+ * ============================================ */
+
+.dsrc-tooltip[data-placement="right"] {
+  margin-left: var(--dsrc-spacing-2);
+}
+
+.dsrc-tooltip[data-placement="right"]::after {
+  left: -4px;
+  top: calc(50% - 4px);
+}
+
+
+/* ============================================
+ * 8. High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-tooltip {
+    outline: 1px solid ButtonText;
+    background-color: Canvas;
+    color: CanvasText;
+  }
+
+  .dsrc-tooltip::after {
+    display: none;
+  }
+}
+
+
+/* ============================================
+ * 9. Reduced motion
+ * ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .dsrc-tooltip {
+    transition: none;
+  }
+}
+
+
+/* ============================================
+ * 10. Print
+ * ============================================ */
+
+@media print {
+  .dsrc-tooltip {
+    display: none;
+  }
+}