@dsrc-cm/core 0.1.0

package/src/components/dropdown/dropdown.css

@@ -0,0 +1,295 @@
+/**
+ * DSRC Dropdown Component
+ *
+ * A dropdown menu triggered by a button. Visibility is controlled
+ * via the [aria-expanded] attribute on the trigger element.
+ *
+ * Usage:
+ * <div class="dsrc-dropdown">
+ *   <button class="dsrc-dropdown__trigger" aria-expanded="false" aria-haspopup="true">
+ *     Menu
+ *   </button>
+ *   <ul class="dsrc-dropdown__menu" role="menu">
+ *     <li><a class="dsrc-dropdown__item" role="menuitem" href="#">Option 1</a></li>
+ *     <li><a class="dsrc-dropdown__item" role="menuitem" href="#">Option 2</a></li>
+ *     <li class="dsrc-dropdown__divider" role="separator"></li>
+ *     <li><a class="dsrc-dropdown__item" role="menuitem" href="#">Option 3</a></li>
+ *   </ul>
+ * </div>
+ *
+ * Variants:
+ * .dsrc-dropdown--up     (opens upward)
+ * .dsrc-dropdown--right  (aligns menu to right edge)
+ */
+
+/* ============================================
+ * Container
+ * ============================================ */
+.dsrc-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* ============================================
+ * Trigger button
+ * ============================================ */
+.dsrc-dropdown__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dsrc-spacing-2);
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  font-weight: var(--dsrc-font-weight-medium);
+  line-height: 1;
+  padding: var(--dsrc-spacing-2) var(--dsrc-spacing-4);
+  border-radius: var(--dsrc-radius-default);
+  border: var(--dsrc-border-width-default) solid var(--dsrc-color-gris-200);
+  background-color: var(--dsrc-color-blanc);
+  color: var(--dsrc-color-noir);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: border-color var(--dsrc-transition-duration-fast) ease,
+              background-color var(--dsrc-transition-duration-fast) ease;
+}
+
+/* Chevron indicator */
+.dsrc-dropdown__trigger::after {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-right: var(--dsrc-border-width-default) solid var(--dsrc-color-gris-600);
+  border-bottom: var(--dsrc-border-width-default) solid var(--dsrc-color-gris-600);
+  transform: rotate(45deg);
+  transition: transform var(--dsrc-transition-duration-normal) ease;
+  margin-top: -2px;
+  flex-shrink: 0;
+}
+
+.dsrc-dropdown__trigger:hover {
+  border-color: var(--dsrc-color-gris-400);
+  background-color: var(--dsrc-color-gris-50);
+}
+
+.dsrc-dropdown__trigger:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: var(--dsrc-outline-offset);
+}
+
+.dsrc-dropdown__trigger:active {
+  background-color: var(--dsrc-color-gris-100);
+}
+
+/* Rotate chevron when expanded */
+.dsrc-dropdown__trigger[aria-expanded="true"]::after {
+  transform: rotate(-135deg);
+  margin-top: 2px;
+}
+
+.dsrc-dropdown__trigger[aria-expanded="true"] {
+  border-color: var(--dsrc-color-primaire);
+  background-color: var(--dsrc-color-blanc);
+}
+
+/* ============================================
+ * Menu panel
+ * ============================================ */
+.dsrc-dropdown__menu {
+  position: absolute;
+  top: calc(100% + var(--dsrc-spacing-1));
+  left: 0;
+  min-width: 200px;
+  max-height: 320px;
+  overflow-y: auto;
+  padding: var(--dsrc-spacing-1) 0;
+  margin: 0;
+  list-style: none;
+  background-color: var(--dsrc-color-blanc);
+  border: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+  border-radius: var(--dsrc-radius-default);
+  box-shadow: var(--dsrc-shadow-lg);
+  z-index: var(--dsrc-z-index-tooltip);
+  font-family: var(--dsrc-font-family-sans);
+
+  /* Hidden by default */
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-4px);
+  transition: opacity var(--dsrc-transition-duration-normal) ease,
+              transform var(--dsrc-transition-duration-normal) ease,
+              visibility 0s linear var(--dsrc-transition-duration-normal);
+}
+
+/* Shown when trigger is expanded */
+.dsrc-dropdown__trigger[aria-expanded="true"] + .dsrc-dropdown__menu,
+.dsrc-dropdown__trigger[aria-expanded="true"] ~ .dsrc-dropdown__menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  transition: opacity var(--dsrc-transition-duration-normal) ease,
+              transform var(--dsrc-transition-duration-normal) ease,
+              visibility 0s linear 0s;
+}
+
+/* ============================================
+ * Menu items
+ * ============================================ */
+.dsrc-dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: var(--dsrc-spacing-2);
+  padding: var(--dsrc-spacing-2) var(--dsrc-spacing-4);
+  font-size: var(--dsrc-font-size-small);
+  font-weight: var(--dsrc-font-weight-regular);
+  color: var(--dsrc-color-noir);
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color var(--dsrc-transition-duration-fast) ease,
+              color var(--dsrc-transition-duration-fast) ease;
+}
+
+.dsrc-dropdown__item:hover {
+  background-color: var(--dsrc-color-gris-50);
+  color: var(--dsrc-color-noir);
+}
+
+.dsrc-dropdown__item:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: calc(-1 * var(--dsrc-outline-offset));
+  background-color: var(--dsrc-color-gris-50);
+}
+
+.dsrc-dropdown__item:active {
+  background-color: var(--dsrc-color-gris-100);
+}
+
+/* Active / current item */
+.dsrc-dropdown__item[aria-current="true"] {
+  background-color: var(--dsrc-color-primaire-clair);
+  color: var(--dsrc-color-primaire);
+  font-weight: var(--dsrc-font-weight-medium);
+}
+
+.dsrc-dropdown__item[aria-current="true"]:hover {
+  background-color: var(--dsrc-color-primaire-clair);
+  color: var(--dsrc-color-primaire-fonce);
+}
+
+/* Disabled item */
+.dsrc-dropdown__item[aria-disabled="true"] {
+  color: var(--dsrc-color-gris-400);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ============================================
+ * Divider
+ * ============================================ */
+.dsrc-dropdown__divider {
+  height: 0;
+  margin: var(--dsrc-spacing-1) 0;
+  border: none;
+  border-top: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+}
+
+/* ============================================
+ * Variant: opens upward
+ * ============================================ */
+.dsrc-dropdown--up .dsrc-dropdown__menu {
+  top: auto;
+  bottom: calc(100% + var(--dsrc-spacing-1));
+  transform: translateY(4px);
+}
+
+.dsrc-dropdown--up .dsrc-dropdown__trigger[aria-expanded="true"] + .dsrc-dropdown__menu,
+.dsrc-dropdown--up .dsrc-dropdown__trigger[aria-expanded="true"] ~ .dsrc-dropdown__menu {
+  transform: translateY(0);
+}
+
+/* Flip chevron for upward variant */
+.dsrc-dropdown--up .dsrc-dropdown__trigger::after {
+  transform: rotate(-135deg);
+  margin-top: 2px;
+}
+
+.dsrc-dropdown--up .dsrc-dropdown__trigger[aria-expanded="true"]::after {
+  transform: rotate(45deg);
+  margin-top: -2px;
+}
+
+/* ============================================
+ * Variant: align menu to right edge
+ * ============================================ */
+.dsrc-dropdown--right .dsrc-dropdown__menu {
+  left: auto;
+  right: 0;
+}
+
+/* ============================================
+ * Variant: full-width menu (matches trigger)
+ * ============================================ */
+.dsrc-dropdown--full .dsrc-dropdown__menu {
+  min-width: 100%;
+}
+
+
+/* ============================================
+ * High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-dropdown__trigger {
+    border: 1px solid ButtonText;
+  }
+
+  .dsrc-dropdown__trigger::after {
+    border-right-color: ButtonText;
+    border-bottom-color: ButtonText;
+  }
+
+  .dsrc-dropdown__menu {
+    border: 1px solid ButtonText;
+    box-shadow: none;
+  }
+
+  .dsrc-dropdown__item[aria-current="true"] {
+    border: 1px solid Highlight;
+  }
+
+  .dsrc-dropdown__item[aria-disabled="true"] {
+    color: GrayText;
+  }
+
+  .dsrc-dropdown__item:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}
+
+
+/* ============================================
+ * Reduced motion
+ * ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .dsrc-dropdown__trigger {
+    transition: none;
+  }
+
+  .dsrc-dropdown__trigger::after {
+    transition: none;
+  }
+
+  .dsrc-dropdown__menu {
+    transition: none;
+  }
+
+  .dsrc-dropdown__trigger[aria-expanded="true"] + .dsrc-dropdown__menu,
+  .dsrc-dropdown__trigger[aria-expanded="true"] ~ .dsrc-dropdown__menu {
+    transition: none;
+  }
+
+  .dsrc-dropdown__item {
+    transition: none;
+  }
+}

package/src/components/highlight/highlight.css

@@ -0,0 +1,74 @@
+/**
+ * DSRC Highlight Component
+ *
+ * Emphasized text block with a colored left accent line.
+ * Simpler than callout — used for inline content emphasis.
+ *
+ * Variants:
+ *   --info / --success / --warning / --error  (semantic colors)
+ *
+ * Usage:
+ *   <div class="dsrc-highlight">
+ *     <p>Texte mis en exergue pour attirer l'attention.</p>
+ *   </div>
+ */
+
+
+/* ============================================
+ * 1. Base highlight
+ * ============================================ */
+
+.dsrc-highlight {
+  padding-left: var(--dsrc-spacing-5);
+  border-left: 4px solid var(--dsrc-color-primaire);
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-body);
+  line-height: 1.5;
+}
+
+.dsrc-highlight p {
+  margin: 0;
+}
+
+
+/* ============================================
+ * 2. Semantic variants
+ * ============================================ */
+
+.dsrc-highlight--info {
+  border-left-color: var(--dsrc-color-info-bordure);
+}
+
+.dsrc-highlight--success {
+  border-left-color: var(--dsrc-color-succes-bordure);
+}
+
+.dsrc-highlight--warning {
+  border-left-color: var(--dsrc-color-avertissement-bordure);
+}
+
+.dsrc-highlight--error {
+  border-left-color: var(--dsrc-color-erreur-bordure);
+}
+
+
+/* ============================================
+ * 3. High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-highlight {
+    border-left: 4px solid ButtonText;
+  }
+}
+
+
+/* ============================================
+ * 4. Print
+ * ============================================ */
+
+@media print {
+  .dsrc-highlight {
+    border-left: 2px solid var(--dsrc-color-gris-600);
+  }
+}

package/src/components/input/input.css

@@ -0,0 +1,337 @@
+/**
+ * DSRC Input Component
+ * Aligned with DSFR input-group architecture
+ *
+ * The input system uses a group wrapper (.dsrc-input-group) that manages
+ * layout, validation states (error/valid left bar), and messages.
+ *
+ * HTML patterns:
+ *
+ * Basic input:
+ * <div class="dsrc-input-group">
+ *   <label class="dsrc-label" for="input-1">
+ *     Libelle du champ
+ *     <span class="dsrc-hint">Texte d'aide optionnel</span>
+ *   </label>
+ *   <input class="dsrc-input" id="input-1" type="text">
+ *   <div class="dsrc-messages-group" aria-live="polite"></div>
+ * </div>
+ *
+ * Error state:
+ * <div class="dsrc-input-group dsrc-input-group--error">
+ *   <label class="dsrc-label" for="input-2">Libelle</label>
+ *   <input class="dsrc-input" id="input-2" type="text" aria-describedby="input-2-msg">
+ *   <div class="dsrc-messages-group" id="input-2-msg" aria-live="polite">
+ *     <p class="dsrc-message dsrc-message--error">Ce champ est obligatoire</p>
+ *   </div>
+ * </div>
+ *
+ * Valid state:
+ * <div class="dsrc-input-group dsrc-input-group--valid">
+ *   <label class="dsrc-label" for="input-3">Libelle</label>
+ *   <input class="dsrc-input" id="input-3" type="text">
+ *   <div class="dsrc-messages-group" aria-live="polite">
+ *     <p class="dsrc-message dsrc-message--valid">Champ valide</p>
+ *   </div>
+ * </div>
+ *
+ * Disabled:
+ * <div class="dsrc-input-group dsrc-input-group--disabled">
+ *   <label class="dsrc-label" for="input-4">Libelle</label>
+ *   <input class="dsrc-input" id="input-4" type="text" disabled>
+ * </div>
+ *
+ * With addon button:
+ * <div class="dsrc-input-group">
+ *   <label class="dsrc-label" for="input-5">Libelle</label>
+ *   <div class="dsrc-input-wrap dsrc-input-wrap--addon">
+ *     <input class="dsrc-input" id="input-5" type="text">
+ *     <button type="submit" class="dsrc-btn dsrc-btn--primary">Envoyer</button>
+ *   </div>
+ * </div>
+ *
+ * Textarea:
+ * <div class="dsrc-input-group">
+ *   <label class="dsrc-label" for="textarea-1">Libelle</label>
+ *   <textarea class="dsrc-input" id="textarea-1"></textarea>
+ * </div>
+ */
+
+
+/* ============================================
+ * 1. Input-group wrapper
+ *    Manages vertical layout, left-bar states
+ * ============================================ */
+
+.dsrc-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsrc-spacing-1);
+  margin-bottom: var(--dsrc-spacing-4);
+}
+
+
+/* ============================================
+ * 2. Hint text (below label, lighter)
+ * ============================================ */
+
+.dsrc-hint {
+  display: block;
+  font-weight: 400;
+  font-size: var(--dsrc-font-size-caption);
+  line-height: var(--dsrc-font-line-height-relaxed);
+  color: var(--dsrc-color-gris-600);
+  margin-top: var(--dsrc-spacing-1);
+}
+
+
+/* ============================================
+ * 3. Input base
+ *    DSFR-style: top-only border-radius,
+ *    bottom border thicker for affordance
+ * ============================================ */
+
+.dsrc-input {
+  display: block;
+  width: 100%;
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-body);
+  line-height: var(--dsrc-font-line-height-normal);
+  padding: var(--dsrc-spacing-2) var(--dsrc-spacing-3);
+  border: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+  border-bottom-width: var(--dsrc-border-width-default);
+  border-radius: 0.25rem 0.25rem 0 0;
+  background-color: var(--dsrc-color-gris-50);
+  color: var(--dsrc-color-noir);
+  outline: none;
+  transition:
+    border-color var(--dsrc-transition-duration-fast) ease,
+    box-shadow var(--dsrc-transition-duration-fast) ease;
+}
+
+.dsrc-input::placeholder {
+  color: var(--dsrc-color-gris-400);
+}
+
+
+/* ============================================
+ * 4. Input hover
+ * ============================================ */
+
+.dsrc-input:hover {
+  border-color: var(--dsrc-color-gris-400);
+}
+
+
+/* ============================================
+ * 5. Input focus
+ * ============================================ */
+
+.dsrc-input:focus-visible {
+  border-color: var(--dsrc-color-primaire);
+  box-shadow: 0 0 0 var(--dsrc-outline-width) var(--dsrc-color-primaire-focus);
+}
+
+
+/* ============================================
+ * 6. Textarea
+ *    Inherits .dsrc-input styling, adds resize
+ * ============================================ */
+
+textarea.dsrc-input {
+  min-height: 100px;
+  resize: vertical;
+  border-radius: 0.25rem 0.25rem 0 0;
+}
+
+
+/* ============================================
+ * 7. Disabled state
+ *    Applied on group wrapper AND native disabled
+ * ============================================ */
+
+.dsrc-input:disabled,
+.dsrc-input-group--disabled .dsrc-input {
+  background-color: var(--dsrc-color-gris-100);
+  color: var(--dsrc-color-gris-600);
+  border-color: var(--dsrc-color-gris-200);
+  cursor: not-allowed;
+}
+
+.dsrc-input-group--disabled .dsrc-label {
+  color: var(--dsrc-color-gris-400);
+}
+
+
+/* ============================================
+ * 8. Error state (DSFR left-bar pattern)
+ *    Red left border on wrapper, red bottom
+ *    border on input, red messages
+ * ============================================ */
+
+.dsrc-input-group--error {
+  border-left: var(--dsrc-border-width-thick) solid var(--dsrc-color-erreur-bordure);
+  padding-left: var(--dsrc-spacing-4);
+}
+
+.dsrc-input-group--error .dsrc-input {
+  border-color: var(--dsrc-color-erreur-bordure);
+}
+
+.dsrc-input-group--error .dsrc-input:focus-visible {
+  border-color: var(--dsrc-color-erreur-bordure);
+  box-shadow: 0 0 0 var(--dsrc-outline-width) rgba(197, 48, 48, 0.12);
+}
+
+.dsrc-input-group--error .dsrc-label {
+  color: var(--dsrc-color-erreur-texte);
+}
+
+
+/* ============================================
+ * 9. Valid state (DSFR left-bar pattern)
+ *    Green left border on wrapper, green bottom
+ *    border on input, green messages
+ * ============================================ */
+
+.dsrc-input-group--valid {
+  border-left: var(--dsrc-border-width-thick) solid var(--dsrc-color-succes-bordure);
+  padding-left: var(--dsrc-spacing-4);
+}
+
+.dsrc-input-group--valid .dsrc-input {
+  border-color: var(--dsrc-color-succes-bordure);
+}
+
+.dsrc-input-group--valid .dsrc-input:focus-visible {
+  border-color: var(--dsrc-color-succes-bordure);
+  box-shadow: 0 0 0 var(--dsrc-outline-width) rgba(24, 128, 56, 0.12);
+}
+
+.dsrc-input-group--valid .dsrc-label {
+  color: var(--dsrc-color-succes-texte);
+}
+
+
+/* ============================================
+ * 10. Messages group
+ *     Container for validation messages,
+ *     uses aria-live="polite" in HTML
+ * ============================================ */
+
+.dsrc-messages-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsrc-spacing-1);
+}
+
+
+/* ============================================
+ * 11. Individual message
+ * ============================================ */
+
+.dsrc-message {
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-caption);
+  font-weight: var(--dsrc-font-weight-medium);
+  line-height: var(--dsrc-font-line-height-relaxed);
+  margin: 0;
+  padding: 0;
+}
+
+.dsrc-message--error {
+  color: var(--dsrc-color-erreur-texte);
+}
+
+.dsrc-message--valid {
+  color: var(--dsrc-color-succes-texte);
+}
+
+.dsrc-message--info {
+  color: var(--dsrc-color-gris-600);
+}
+
+
+/* ============================================
+ * 12. Input wrap (for addon buttons)
+ *     Flex row: input + button side by side
+ * ============================================ */
+
+.dsrc-input-wrap {
+  display: flex;
+  width: 100%;
+}
+
+.dsrc-input-wrap--addon {
+  align-items: stretch;
+}
+
+.dsrc-input-wrap--addon .dsrc-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  border-right: none;
+  border-top-right-radius: 0;
+}
+
+.dsrc-input-wrap--addon .dsrc-btn {
+  flex: 0 0 auto;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  white-space: nowrap;
+}
+
+
+/* ============================================
+ * 13. Select (native dropdown)
+ *     DSFR-style: same field treatment as input,
+ *     custom chevron via background SVG
+ * ============================================ */
+
+.dsrc-select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--dsrc-spacing-3) center;
+  padding-right: 34px;
+  cursor: pointer;
+}
+
+.dsrc-select:hover {
+  border-color: var(--dsrc-color-gris-400);
+}
+
+
+/* ============================================
+ * 14. High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-input {
+    border: 1px solid ButtonText;
+  }
+
+  .dsrc-input:disabled,
+  .dsrc-input-group--disabled .dsrc-input {
+    border-color: GrayText;
+    color: GrayText;
+  }
+
+  .dsrc-input-group--error .dsrc-input {
+    border-color: LinkText;
+    border-bottom-width: 3px;
+  }
+
+  .dsrc-input-group--valid .dsrc-input {
+    border-color: ButtonText;
+    border-bottom-width: 3px;
+  }
+
+  .dsrc-input-group--error,
+  .dsrc-input-group--valid {
+    border-left-color: LinkText;
+  }
+
+  .dsrc-select {
+    border: 1px solid ButtonText;
+  }
+}