@sentropic/design-system-react 0.2.0 → 0.4.0

package/dist/index.js

@@ -78,5 +78,11 @@ export { Toggletip } from "./Toggletip.js";
 export { Tooltip } from "./Tooltip.js";
 export { TreeView } from "./TreeView.js";
 export { UnorderedList } from "./UnorderedList.js";
+export { BackToTop } from "./BackToTop.js";
+export { DisplaySettings } from "./DisplaySettings.js";
+export { MediaContent } from "./MediaContent.js";
+export { Notification } from "./Notification.js";
+export { TableOfContents } from "./TableOfContents.js";
+export { Transcription } from "./Transcription.js";
 export { deriveInitials } from "./catalog.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAUzE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAUzE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAQvD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC"}

package/dist/styles.css

@@ -206,6 +206,10 @@
     overflow: visible;
   }
 
+  .st-areaChart__visual {
+    display: block;
+  }
+
   .st-areaChart__grid {
     stroke: var(--st-component-areaChart-gridStroke, var(--st-semantic-border-subtle));
     stroke-dasharray: 2 3;
@@ -354,6 +358,22 @@
     overflow: visible;
   }
 
+  .st-barChart__visual {
+    display: block;
+  }
+
+  .st-chartDataList {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
   .st-barChart__grid {
     stroke: var(--st-component-barChart-gridStroke, var(--st-semantic-border-subtle));
     stroke-dasharray: 2 3;
@@ -3210,6 +3230,10 @@
     overflow: visible;
   }
 
+  .st-lineChart__visual {
+    display: block;
+  }
+
   .st-lineChart__grid {
     stroke: var(--st-component-lineChart-gridStroke, var(--st-semantic-border-subtle));
     stroke-dasharray: 2 3;
@@ -6539,3 +6563,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-react",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "React components for the Sentropic design system.",
   "type": "module",
   "publishConfig": {