@sentropic/design-system-vue 0.1.0 → 0.3.0

package/dist/styles.css

@@ -2344,10 +2344,13 @@
 
   .st-forceGraph svg { display: block; overflow: visible; }
 
+  .st-forceGraph__svg--panning { cursor: grabbing; }
+
   .st-forceGraph__edge {
     stroke: var(--st-semantic-border-strong);
     stroke-width: 1;
     opacity: 0.55;
+    transition: opacity 120ms ease, stroke-width 120ms ease;
   }
 
   .st-forceGraph__edge--weak {
@@ -2356,6 +2359,19 @@
     opacity: 0.5;
   }
 
+  .st-forceGraph__edge--hovered {
+    opacity: 0.9;
+    stroke-width: 2;
+  }
+
+  /* Invisible wide hit target for edge hover */
+  .st-forceGraph__edgeHit {
+    stroke: transparent;
+    stroke-width: 10;
+    fill: none;
+    cursor: crosshair;
+  }
+
   .st-forceGraph__node { transition: opacity 120ms ease; }
   .st-forceGraph__node--dim { opacity: 0.3; }
 
@@ -2375,14 +2391,14 @@
     outline-offset: 1px;
   }
 
-  
+  /* Selection highlight: slightly thicker stroke ring, full opacity. */
   .st-forceGraph__node--selected .st-forceGraph__dot {
     fill-opacity: 1;
     stroke: var(--st-semantic-border-interactive, #0f62fe);
     stroke-width: 2.5;
   }
 
-  
+  /* Focus (keyboard/programmatic focus): stronger ring + slight scale. */
   .st-forceGraph__node--focus .st-forceGraph__dot {
     fill-opacity: 1;
     stroke: var(--st-semantic-border-interactive, #0f62fe);
@@ -2424,10 +2440,170 @@
 
   .st-forceGraph__tooltipLabel { font-weight: 600; }
   .st-forceGraph__tooltipMeta { opacity: 0.85; }
+  .st-forceGraph__tooltipRelation {
+    opacity: 0.75;
+    font-style: italic;
+    font-size: 0.6875rem;
+  }
+
+  /* Reset view button */
+  .st-forceGraph__resetBtn {
+    background: var(--st-semantic-surface-overlay, rgba(0,0,0,0.55));
+    border: none;
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse, #fff);
+    cursor: pointer;
+    font-size: 1rem;
+    line-height: 1;
+    padding: 0.25rem 0.5rem;
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    opacity: 0.8;
+    transition: opacity 120ms ease;
+    z-index: 2;
+  }
+
+  .st-forceGraph__resetBtn:hover,
+  .st-forceGraph__resetBtn:focus-visible {
+    opacity: 1;
+  }
+
+  .st-forceGraph__resetBtn:focus-visible {
+    outline: 2px solid var(--st-semantic-border-interactive);
+    outline-offset: 2px;
+  }
+
+  /* Legend overlay */
+  .st-forceGraph__legend {
+    background: var(--st-semantic-surface-overlay, rgba(0,0,0,0.45));
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse, #fff);
+    display: flex;
+    flex-direction: column;
+    font-size: 0.6875rem;
+    gap: 0.25rem;
+    padding: 0.375rem 0.5rem;
+    pointer-events: none;
+    position: absolute;
+    bottom: 0.5rem;
+    left: 0.5rem;
+    z-index: 2;
+  }
+
+  .st-forceGraph__legendEntry {
+    align-items: center;
+    display: flex;
+    gap: 0.375rem;
+  }
+
+  .st-forceGraph__legendSwatch {
+    flex-shrink: 0;
+  }
+
+  .st-forceGraph__legendLabel {
+    white-space: nowrap;
+  }
+
+  .st-forceGraph__legendShape {
+    fill-opacity: 0.9;
+    stroke: var(--st-semantic-surface-default, #fff);
+    stroke-width: 1;
+  }
+
+  .st-forceGraph__legendShape--category1 { fill: var(--st-semantic-data-category1); }
+  .st-forceGraph__legendShape--category2 { fill: var(--st-semantic-data-category2); }
+  .st-forceGraph__legendShape--category3 { fill: var(--st-semantic-data-category3); }
+  .st-forceGraph__legendShape--category4 { fill: var(--st-semantic-data-category4); }
+  .st-forceGraph__legendShape--category5 { fill: var(--st-semantic-data-category5); }
+  .st-forceGraph__legendShape--category6 { fill: var(--st-semantic-data-category6); }
+  .st-forceGraph__legendShape--category7 { fill: var(--st-semantic-data-category7); }
+  .st-forceGraph__legendShape--category8 { fill: var(--st-semantic-data-category8); }
+
+  .st-forceGraph__legendEdge {
+    stroke: var(--st-semantic-border-strong, #888);
+    stroke-width: 1.5;
+    opacity: 0.8;
+  }
+
+  .st-forceGraph__legendEdge--weak {
+    stroke: var(--st-semantic-border-subtle, #aaa);
+    stroke-dasharray: 3 3;
+    opacity: 0.65;
+  }
 
   @media (prefers-reduced-motion: reduce) {
     .st-forceGraph__node,
-    .st-forceGraph__dot { transition: none; }
+    .st-forceGraph__dot,
+    .st-forceGraph__edge,
+    .st-forceGraph__resetBtn { transition: none; }
+  }
+
+  /* GraphLegend standalone component */
+  .st-graphLegend {
+    background: var(--st-semantic-surface-overlay, rgba(0,0,0,0.45));
+    border-radius: var(--st-radius-sm, 0.25rem);
+    color: var(--st-semantic-text-inverse, #fff);
+    display: inline-flex;
+    flex-direction: column;
+    font-size: 0.6875rem;
+    gap: 0.25rem;
+    padding: 0.375rem 0.5rem;
+  }
+
+  .st-graphLegend__title {
+    font-size: 0.625rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    margin: 0 0 0.125rem;
+    opacity: 0.75;
+    text-transform: uppercase;
+  }
+
+  .st-graphLegend__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .st-graphLegend__entry {
+    align-items: center;
+    display: flex;
+    gap: 0.375rem;
+  }
+
+  .st-graphLegend__swatch { flex-shrink: 0; }
+
+  .st-graphLegend__label { white-space: nowrap; }
+
+  .st-graphLegend__shape {
+    fill-opacity: 0.9;
+    stroke: var(--st-semantic-surface-default, #fff);
+    stroke-width: 1;
+  }
+
+  .st-graphLegend__shape--category1 { fill: var(--st-semantic-data-category1); }
+  .st-graphLegend__shape--category2 { fill: var(--st-semantic-data-category2); }
+  .st-graphLegend__shape--category3 { fill: var(--st-semantic-data-category3); }
+  .st-graphLegend__shape--category4 { fill: var(--st-semantic-data-category4); }
+  .st-graphLegend__shape--category5 { fill: var(--st-semantic-data-category5); }
+  .st-graphLegend__shape--category6 { fill: var(--st-semantic-data-category6); }
+  .st-graphLegend__shape--category7 { fill: var(--st-semantic-data-category7); }
+  .st-graphLegend__shape--category8 { fill: var(--st-semantic-data-category8); }
+
+  .st-graphLegend__edge {
+    stroke: var(--st-semantic-border-strong, #888);
+    stroke-width: 1.5;
+    opacity: 0.8;
+  }
+
+  .st-graphLegend__edge--weak {
+    stroke: var(--st-semantic-border-subtle, #aaa);
+    stroke-dasharray: 3 3;
+    opacity: 0.65;
   }
 
 .st-form {
@@ -6364,3 +6540,239 @@
 .st-search__input { width: 100%; }
 .st-fileUploader__name { font-weight: 600; }
 
+/* --- Parité 0.3.0 : BackToTop, MediaContent, TableOfContents, Notification, Transcription, DisplaySettings --- */
+.st-backToTop {
+  align-items: center;
+  background: var(--st-component-control-background, var(--st-semantic-surface-contrast, #0f172a));
+  border: 1px solid var(--st-component-control-border, #334155);
+  border-radius: 999px;
+  bottom: var(--st-spacing-4, 1rem);
+  color: var(--st-semantic-text-inverse, #fff);
+  cursor: var(--st-cursor-interactive, pointer);
+  display: inline-flex;
+  gap: 0.5rem;
+  opacity: 0;
+  padding: 0.6rem 0.8rem;
+  position: fixed;
+  pointer-events: none;
+  right: var(--st-spacing-4, 1rem);
+  transform: translateY(0.75rem);
+  transition: opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+    transform var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  z-index: var(--st-zindex-toast, 70);
+}
+.st-backToTop:not([aria-hidden="true"]) {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+.st-backToTop:hover:not(:disabled),
+.st-backToTop:focus-visible {
+  background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+  box-shadow: 0 0 0 2px var(--st-component-control-focusRing, #38bdf8);
+  outline: none;
+}
+.st-backToTop:focus-visible {
+  outline: 2px solid var(--st-component-control-focusRing, #38bdf8);
+  outline-offset: 2px;
+}
+.st-backToTop__label { font-size: 0.8125rem; font-weight: 600; line-height: 1.2; }
+.st-backToTop__icon { align-items: center; display: inline-flex; }
+@media (max-width: 38rem) {
+  .st-backToTop__label { display: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .st-backToTop { transition: none; }
+}
+
+.st-mediaContent {
+  border: 1px solid var(--st-semantic-border-subtle);
+  border-radius: 0.5rem;
+  margin: 0;
+  overflow: hidden;
+}
+.st-mediaContent__media {
+  aspect-ratio: var(--st-mediaContent-ratio);
+  background: var(--st-semantic-surface-subtle);
+  overflow: hidden;
+}
+.st-mediaContent__media > img,
+.st-mediaContent__media > video {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: cover;
+  display: block;
+}
+.st-mediaContent__caption {
+  background: var(--st-semantic-surface-primary);
+  color: var(--st-semantic-text-primary);
+  font-size: 0.875rem;
+  padding: 0.6rem 0.75rem;
+}
+.st-mediaContent__title { color: var(--st-semantic-text-primary); font-weight: 600; margin: 0; }
+.st-mediaContent__caption p { margin: 0.25rem 0 0; }
+.st-mediaContent__byline { color: var(--st-semantic-text-secondary); }
+
+.st-tableOfContents {
+  border: 1px solid var(--st-semantic-border-subtle);
+  border-radius: 0.5rem;
+  padding: 0.75rem 0.875rem;
+}
+.st-tableOfContents__title {
+  color: var(--st-semantic-text-primary);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+}
+.st-tableOfContents__list { list-style: none; margin: 0; padding-left: 0; }
+.st-tableOfContents__item {
+  padding-inline-start: calc(var(--st-tableOfContents-level) * var(--st-spacing-4, 1rem));
+}
+.st-tableOfContents__item + .st-tableOfContents__item { margin-top: 0.125rem; }
+.st-tableOfContents__link {
+  color: var(--st-semantic-text-secondary);
+  display: inline-block;
+  padding: 0.25rem 0;
+  text-decoration: none;
+}
+.st-tableOfContents__link:hover,
+.st-tableOfContents__link:focus-visible {
+  color: var(--st-semantic-text-primary);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+  background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+}
+.st-tableOfContents__link[aria-current="location"] {
+  color: var(--st-semantic-text-primary);
+  font-weight: 600;
+}
+
+.st-notification {
+  background: var(--st-component-notification-background, var(--st-semantic-surface-raised));
+  border: 1px solid var(--st-component-notification-border, var(--st-semantic-border-subtle));
+  border-left-width: var(--st-component-notification-accentWidth, 0.25rem);
+  border-left-style: solid;
+  border-left-color: var(--st-component-notification-accent, var(--st-semantic-feedback-info));
+  border-radius: 0;
+  color: var(--st-component-notification-text, var(--st-semantic-text-primary));
+  display: flex;
+  gap: var(--st-spacing-4, 1rem);
+  justify-content: space-between;
+  padding: var(--st-spacing-4, 1rem);
+  width: min(100%, 32rem);
+}
+.st-notification--info {
+  --st-component-notification-accent: var(--st-component-notification-infoAccent, var(--st-semantic-feedback-info));
+}
+.st-notification--success {
+  --st-component-notification-accent: var(--st-component-notification-successAccent, var(--st-semantic-feedback-success));
+}
+.st-notification--warning {
+  --st-component-notification-accent: var(--st-component-notification-warningAccent, var(--st-semantic-feedback-warning));
+}
+.st-notification--error {
+  --st-component-notification-accent: var(--st-component-notification-errorAccent, var(--st-semantic-feedback-error));
+}
+.st-notification__content { display: grid; gap: 0.25rem; flex: 1; min-width: 0; }
+.st-notification__title { font-size: 0.9375rem; margin: 0; }
+.st-notification__message {
+  color: var(--st-semantic-text-secondary);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin: 0;
+}
+.st-notification__meta { align-items: start; display: flex; flex-shrink: 0; gap: 0.5rem; }
+.st-notification__actions { align-items: start; display: flex; gap: var(--st-spacing-2, 0.5rem); }
+.st-notification__close {
+  align-items: center;
+  background: transparent;
+  border: 1px solid var(--st-semantic-border-subtle);
+  border-radius: var(--st-border-radius-full, 999px);
+  color: var(--st-semantic-text-secondary);
+  cursor: var(--st-cursor-interactive, pointer);
+  display: inline-flex;
+  font-size: 0.875rem;
+  height: 1.75rem;
+  justify-content: center;
+  min-width: 1.75rem;
+  padding: 0;
+  width: 1.75rem;
+}
+.st-notification__close:hover {
+  background: var(--st-component-control-hoverBackground, var(--st-semantic-surface-subtle));
+}
+
+.st-transcription {
+  border: 1px solid var(--st-semantic-border-subtle);
+  border-radius: 0.5rem;
+  padding: 0.75rem 1rem;
+}
+.st-transcription summary {
+  color: var(--st-semantic-text-primary);
+  cursor: var(--st-cursor-interactive, pointer);
+  font-weight: 600;
+  list-style: none;
+}
+.st-transcription summary::marker { color: var(--st-semantic-text-secondary); }
+.st-transcription__content { margin-top: 0.75rem; }
+.st-transcription__list { margin: 0; padding-left: 1rem; }
+.st-transcription__item + .st-transcription__item { margin-top: 0.625rem; }
+.st-transcription__meta { color: var(--st-semantic-text-secondary); font-size: 0.8125rem; margin: 0; }
+.st-transcription__speaker { font-weight: 600; }
+.st-transcription__text { color: var(--st-semantic-text-primary); margin: 0.2rem 0 0; }
+.st-transcription__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.st-displaySettings {
+  border: 1px solid var(--st-semantic-border-subtle);
+  border-radius: 0.5rem;
+  padding: 0.75rem 0.875rem;
+}
+.st-displaySettings__title {
+  color: var(--st-semantic-text-primary);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  margin: 0;
+  text-transform: uppercase;
+}
+.st-displaySettings__grid { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
+.st-displaySettings__field {
+  display: grid;
+  gap: 0.35rem;
+  color: var(--st-semantic-text-secondary);
+  font-size: 0.875rem;
+}
+.st-displaySettings__label { font-weight: 600; }
+.st-displaySettings select,
+.st-displaySettings input[type="checkbox"] {
+  appearance: auto;
+  width: 100%;
+  border: 1px solid var(--st-component-control-border, var(--st-semantic-border-subtle));
+  border-radius: 0.375rem;
+  color: var(--st-semantic-text-primary);
+  background: var(--st-component-control-background, var(--st-semantic-surface-primary));
+  padding: 0.5rem 0.65rem;
+  font: inherit;
+}
+.st-displaySettings input[type="checkbox"] {
+  width: fit-content;
+  min-width: 1.2rem;
+  min-height: 1.2rem;
+  margin: 0;
+}
+.st-displaySettings__field--switch {
+  align-items: center;
+  grid-template-columns: 1fr auto;
+  gap: 0.5rem;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-vue",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Vue 3 components for the Sentropic design system.",
   "type": "module",
   "publishConfig": {