@openwarelabs/ui 0.11.0 → 0.12.0

package/dist/styles.css

@@ -85,6 +85,16 @@
     --ow-knob: #ffffff;
     --ow-meter-track: var(--ow-gray-200);
     --ow-progress: var(--ow-brand-600);
+    --ow-chart-1: #5856ad;
+    --ow-chart-2: #eb6834;
+    --ow-chart-3: #1baf7a;
+    --ow-chart-4: #eda100;
+    --ow-chart-5: #e87ba4;
+    --ow-chart-6: #008300;
+    --ow-chart-7: #2a78d6;
+    --ow-chart-8: #e34948;
+    --ow-chart-grid: var(--ow-gray-200);
+    --ow-chart-axis: var(--ow-gray-300);
     --ow-code-block: #15171c;
     --ow-code-block-header: #1c1f26;
     --ow-code-block-border: #15171c;
@@ -162,6 +172,16 @@
     --ow-knob: #e4e7ec;
     --ow-meter-track: #2c313a;
     --ow-progress: var(--ow-brand-400);
+    --ow-chart-1: #898cd0;
+    --ow-chart-2: #d95926;
+    --ow-chart-3: #199e70;
+    --ow-chart-4: #c98500;
+    --ow-chart-5: #d55181;
+    --ow-chart-6: #008300;
+    --ow-chart-7: #3987e5;
+    --ow-chart-8: #e66767;
+    --ow-chart-grid: #2c313a;
+    --ow-chart-axis: #3a404b;
     --ow-code-block-border: #2c313a;
     --ow-backdrop: rgba(0,0,0,0.6);
     --ow-dot: rgba(255,255,255,0.09);
@@ -235,6 +255,16 @@
         --ow-knob: #e4e7ec;
         --ow-meter-track: #2c313a;
         --ow-progress: var(--ow-brand-400);
+        --ow-chart-1: #898cd0;
+        --ow-chart-2: #d95926;
+        --ow-chart-3: #199e70;
+        --ow-chart-4: #c98500;
+        --ow-chart-5: #d55181;
+        --ow-chart-6: #008300;
+        --ow-chart-7: #3987e5;
+        --ow-chart-8: #e66767;
+        --ow-chart-grid: #2c313a;
+        --ow-chart-axis: #3a404b;
         --ow-code-block-border: #2c313a;
         --ow-backdrop: rgba(0,0,0,0.6);
         --ow-dot: rgba(255,255,255,0.09);
@@ -2433,7 +2463,8 @@
 
 .ow-slider__control {
     position: relative;
-    height: 20px;
+    /* 24px tall so each handle's input is a big enough target to tap (WCAG 2.2 target size). */
+    height: 24px;
 }
 
 /* The track runs between the thumb's centre at each end (9px in), so the fill meets the thumb exactly. */
@@ -2479,12 +2510,12 @@
 }
 
 .ow-slider__input::-webkit-slider-runnable-track {
-    height: 20px;
+    height: 24px;
     background: transparent;
 }
 
 .ow-slider__input::-moz-range-track {
-    height: 20px;
+    height: 24px;
     background: transparent;
 }
 
@@ -2492,7 +2523,7 @@
     box-sizing: border-box;
     width: 18px;
     height: 18px;
-    margin-top: 1px;
+    margin-top: 3px;
     appearance: none;
     border: 1px solid var(--ow-border-strong);
     border-radius: 50%;
@@ -6263,6 +6294,283 @@
     transform: translate(-50%, -50%);
 }
 
+/* components/Chart/Chart.css */
+/* Charts: thin marks in the chart palette (--ow-chart-1 to 8), hairline grids, text in text colours, never the series'. */
+
+.ow-chart {
+    display: grid;
+    min-width: 0;
+    gap: var(--ow-space-lg);
+    margin: 0;
+}
+
+.ow-chart__legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ow-space-xs) var(--ow-space-2xl);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ow-chart__legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ow-space-sm);
+    color: var(--ow-text-soft);
+    font-size: 13px;
+}
+
+.ow-chart__legend-value {
+    color: var(--ow-text-muted);
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-chart__key {
+    flex-shrink: 0;
+}
+
+.ow-chart__key--line {
+    width: 14px;
+    height: 2px;
+    border-radius: 1px;
+}
+
+.ow-chart__key--square {
+    width: 10px;
+    height: 10px;
+    border-radius: 3px;
+}
+
+.ow-chart__plot {
+    position: relative;
+    min-width: 0;
+    border-radius: var(--ow-radius-md);
+    touch-action: pan-y;
+}
+
+.ow-chart__plot:focus-visible,
+.ow-chart__donut:focus-visible {
+    outline: 2px solid var(--ow-focus-ring);
+    outline-offset: 4px;
+}
+
+.ow-chart__svg {
+    display: block;
+    overflow: visible;
+}
+
+.ow-chart__grid {
+    stroke: var(--ow-chart-grid);
+    stroke-width: 1px;
+    shape-rendering: crispEdges;
+}
+
+.ow-chart__baseline {
+    stroke: var(--ow-chart-axis);
+    stroke-width: 1px;
+    shape-rendering: crispEdges;
+}
+
+.ow-chart__tick {
+    fill: var(--ow-text-muted);
+    font-family: var(--ow-font-sans);
+    font-size: 11.5px;
+    font-variant-numeric: tabular-nums;
+}
+
+.ow-chart__line {
+    fill: none;
+    stroke-width: 2px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.ow-chart__area {
+    fill-opacity: 0.1;
+}
+
+.ow-chart__point {
+    stroke: var(--ow-surface);
+    stroke-width: 2px;
+}
+
+.ow-chart__crosshair {
+    stroke: var(--ow-chart-axis);
+    stroke-width: 1px;
+    shape-rendering: crispEdges;
+}
+
+.ow-chart__band {
+    fill: var(--ow-surface-muted);
+}
+
+.ow-chart__hit {
+    fill: transparent;
+    cursor: crosshair;
+}
+
+.ow-chart--bar .ow-chart__hit {
+    cursor: default;
+}
+
+/* The readout for the hovered or focused point. */
+.ow-chart__readout {
+    position: absolute;
+    top: 4px;
+    z-index: 1;
+    display: grid;
+    min-width: 140px;
+    gap: 6px;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-lg);
+    background: var(--ow-surface);
+    box-shadow: var(--ow-shadow-menu);
+    padding: 9px 12px 10px;
+    pointer-events: none;
+}
+
+.ow-chart__readout-title {
+    color: var(--ow-text-muted);
+    font-size: 12px;
+}
+
+.ow-chart__readout-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--ow-text-muted);
+    font-size: 12.5px;
+    white-space: nowrap;
+}
+
+.ow-chart__readout-label {
+    flex: 1;
+}
+
+.ow-chart__readout-row strong {
+    margin-left: 12px;
+    color: var(--ow-text);
+    font-size: 13.5px;
+    font-weight: var(--ow-weight-emphasis);
+    font-variant-numeric: tabular-nums;
+}
+
+/* Donut: the ring with the total in its middle, the legend beside it. */
+.ow-chart--donut {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ow-space-4xl) 32px;
+}
+
+.ow-chart--donut .ow-chart__legend {
+    display: grid;
+    gap: var(--ow-space-sm);
+}
+
+.ow-chart__donut {
+    position: relative;
+    flex-shrink: 0;
+    border-radius: 50%;
+}
+
+.ow-chart__donut svg {
+    display: block;
+}
+
+.ow-chart__slice {
+    transition: opacity var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-chart__slice--dim {
+    opacity: 0.35;
+}
+
+.ow-chart__empty {
+    fill: none;
+    stroke: var(--ow-meter-track);
+}
+
+.ow-chart__center {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-content: center;
+    gap: 2px;
+    padding: 0 22%;
+    text-align: center;
+    pointer-events: none;
+}
+
+.ow-chart__center-value {
+    color: var(--ow-text);
+    font-size: 20px;
+    font-weight: var(--ow-weight-emphasis);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: -0.01em;
+}
+
+.ow-chart__center-label {
+    overflow: hidden;
+    color: var(--ow-text-muted);
+    font-size: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Sparkline */
+.ow-sparkline {
+    position: relative;
+    display: inline-block;
+    flex-shrink: 0;
+    vertical-align: middle;
+}
+
+.ow-sparkline svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+}
+
+.ow-sparkline__area {
+    fill: var(--ow-sparkline-color);
+    fill-opacity: 0.1;
+}
+
+.ow-sparkline__line {
+    fill: none;
+    stroke: var(--ow-sparkline-color);
+    stroke-width: 1.75px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+}
+
+.ow-sparkline__end {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    box-sizing: border-box;
+    border: 2px solid var(--ow-surface);
+    border-radius: 50%;
+    background: var(--ow-sparkline-color);
+    transform: translate(-50%, -50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-chart__slice {
+        transition: none;
+    }
+}
+
+@media (forced-colors: active) {
+    .ow-chart__line,
+    .ow-sparkline__line {
+        stroke: CanvasText;
+    }
+}
+
 /* components/FileTree/FileTree.css */
 /* FileTree: a project structure explorer. Monospace names, hairline guides, a tinted selected file. */
 .ow-tree,
@@ -6571,6 +6879,240 @@
     font-weight: var(--ow-weight-regular);
 }
 
+/* components/AppShell/AppShell.css */
+/* AppShell: a sidebar down the left and the page beside it. It measures its own width (a container query), so it
+   folds into a drawer under its breakpoint (900px by default) whether it fills the window or sits in a smaller frame. */
+
+.ow-app-shell {
+    --ow-app-shell-height: 100dvh;
+    --ow-sidebar-width: 248px;
+    --ow-sidebar-collapsed-width: 56px;
+    container: ow-app-shell / inline-size;
+    background: var(--ow-canvas);
+    color: var(--ow-text);
+}
+
+.ow-app-shell__frame {
+    display: grid;
+    grid-template-columns: var(--ow-sidebar-width) minmax(0, 1fr);
+    min-height: var(--ow-app-shell-height);
+    transition: grid-template-columns var(--ow-duration-base) var(--ow-ease-standard);
+}
+
+.ow-app-shell--collapsed .ow-app-shell__frame {
+    grid-template-columns: var(--ow-sidebar-collapsed-width) minmax(0, 1fr);
+}
+
+.ow-app-shell__sidebar {
+    position: sticky;
+    top: 0;
+    box-sizing: border-box;
+    height: var(--ow-app-shell-height);
+    min-width: 0;
+    overflow: hidden;
+}
+
+.ow-app-shell--flat .ow-app-shell__sidebar {
+    border-right: 1px solid var(--ow-border);
+}
+
+/* The sidebar's three parts: the header and footer stay put, the content between them scrolls. */
+.ow-sidebar {
+    display: flex;
+    box-sizing: border-box;
+    height: 100%;
+    flex-direction: column;
+    gap: var(--ow-space-lg);
+    padding: 10px 12px 12px;
+}
+
+.ow-sidebar--drawer {
+    height: auto;
+    min-height: 100%;
+    padding: 0;
+}
+
+.ow-sidebar__header,
+.ow-sidebar__footer {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    gap: var(--ow-space-sm);
+}
+
+.ow-sidebar__content {
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--ow-space-3xl);
+    overflow-y: auto;
+    /* Room for the items' focus rings, which the scroll area would otherwise clip. */
+    margin-inline: -4px;
+    padding: 2px 4px;
+}
+
+.ow-sidebar--drawer .ow-sidebar__content {
+    overflow: visible;
+}
+
+.ow-sidebar__footer {
+    margin-top: auto;
+}
+
+.ow-sidebar__toggle {
+    align-self: flex-start;
+}
+
+/* Inside a NavList each tooltip wraps its item: let the item keep the full width. */
+.ow-sidebar .ow-nav > .ow-tooltip {
+    display: grid;
+}
+
+/* Folded: only the icons show; the labels stay for screen readers and come back as tooltips. */
+.ow-app-shell--collapsed .ow-app-shell__sidebar .ow-sidebar {
+    padding-inline: 8px;
+}
+
+.ow-app-shell--collapsed .ow-app-shell__sidebar .ow-nav__item {
+    justify-content: center;
+    padding-inline: 0;
+}
+
+.ow-app-shell--collapsed .ow-app-shell__sidebar .ow-nav__label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+
+.ow-app-shell--collapsed .ow-app-shell__sidebar .ow-nav__end {
+    display: none;
+}
+
+/* A group's heading becomes a short rule, so the groups still read as groups. */
+.ow-app-shell--collapsed .ow-app-shell__sidebar .ow-nav__heading {
+    height: 1px;
+    overflow: hidden;
+    margin: 4px 8px;
+    background: var(--ow-border);
+    padding: 0;
+    color: transparent;
+}
+
+.ow-app-shell--collapsed .ow-sidebar__toggle {
+    align-self: center;
+}
+
+.ow-app-shell__body {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+}
+
+.ow-app-shell__main {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    flex-direction: column;
+}
+
+.ow-app-shell--inset .ow-app-shell__main {
+    margin: 8px 8px 8px 0;
+    border: 1px solid var(--ow-border);
+    border-radius: var(--ow-radius-panel);
+    background: var(--ow-surface);
+}
+
+.ow-app-shell--flat .ow-app-shell__body {
+    background: var(--ow-surface);
+}
+
+/* On narrow screens the sidebar folds into a drawer behind this bar. */
+.ow-app-shell__topbar {
+    display: none;
+    height: 52px;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--ow-space-sm);
+    padding: 0 6px;
+}
+
+.ow-app-shell__topbar-start {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    align-items: center;
+    gap: 9px;
+}
+
+.ow-app-shell__topbar-end {
+    display: flex;
+    align-items: center;
+    gap: var(--ow-space-2xs);
+}
+
+.ow-app-shell--flat .ow-app-shell__topbar {
+    border-bottom: 1px solid var(--ow-border);
+}
+
+/* Where the sidebar folds into the drawer: the breakpoint prop. */
+@container ow-app-shell (max-width: 559px) {
+    .ow-app-shell--sm .ow-app-shell__frame,
+    .ow-app-shell--sm.ow-app-shell--collapsed .ow-app-shell__frame {
+        grid-template-columns: minmax(0, 1fr);
+    }
+    .ow-app-shell--sm .ow-app-shell__sidebar {
+        display: none;
+    }
+    .ow-app-shell--sm .ow-app-shell__topbar {
+        display: flex;
+    }
+    .ow-app-shell--sm.ow-app-shell--inset .ow-app-shell__main {
+        margin: 0 8px 8px;
+    }
+}
+
+@container ow-app-shell (max-width: 899px) {
+    .ow-app-shell--md .ow-app-shell__frame,
+    .ow-app-shell--md.ow-app-shell--collapsed .ow-app-shell__frame {
+        grid-template-columns: minmax(0, 1fr);
+    }
+    .ow-app-shell--md .ow-app-shell__sidebar {
+        display: none;
+    }
+    .ow-app-shell--md .ow-app-shell__topbar {
+        display: flex;
+    }
+    .ow-app-shell--md.ow-app-shell--inset .ow-app-shell__main {
+        margin: 0 8px 8px;
+    }
+}
+
+@container ow-app-shell (max-width: 1199px) {
+    .ow-app-shell--lg .ow-app-shell__frame,
+    .ow-app-shell--lg.ow-app-shell--collapsed .ow-app-shell__frame {
+        grid-template-columns: minmax(0, 1fr);
+    }
+    .ow-app-shell--lg .ow-app-shell__sidebar {
+        display: none;
+    }
+    .ow-app-shell--lg .ow-app-shell__topbar {
+        display: flex;
+    }
+    .ow-app-shell--lg.ow-app-shell--inset .ow-app-shell__main {
+        margin: 0 8px 8px;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .ow-app-shell__frame {
+        transition: none;
+    }
+}
+
 /* components/Layout/Layout.css */
 /* Stack, Separator and ScrollShadow. */
 .ow-stack {

package/dist/tailwind.css

@@ -86,6 +86,16 @@
     --color-knob: var(--ow-knob);
     --color-meter-track: var(--ow-meter-track);
     --color-progress: var(--ow-progress);
+    --color-chart-1: var(--ow-chart-1);
+    --color-chart-2: var(--ow-chart-2);
+    --color-chart-3: var(--ow-chart-3);
+    --color-chart-4: var(--ow-chart-4);
+    --color-chart-5: var(--ow-chart-5);
+    --color-chart-6: var(--ow-chart-6);
+    --color-chart-7: var(--ow-chart-7);
+    --color-chart-8: var(--ow-chart-8);
+    --color-chart-grid: var(--ow-chart-grid);
+    --color-chart-axis: var(--ow-chart-axis);
     --color-code-block: var(--ow-code-block);
     --color-code-block-header: var(--ow-code-block-header);
     --color-code-block-border: var(--ow-code-block-border);

package/dist/tokens.css

@@ -85,6 +85,16 @@
     --ow-knob: #ffffff;
     --ow-meter-track: var(--ow-gray-200);
     --ow-progress: var(--ow-brand-600);
+    --ow-chart-1: #5856ad;
+    --ow-chart-2: #eb6834;
+    --ow-chart-3: #1baf7a;
+    --ow-chart-4: #eda100;
+    --ow-chart-5: #e87ba4;
+    --ow-chart-6: #008300;
+    --ow-chart-7: #2a78d6;
+    --ow-chart-8: #e34948;
+    --ow-chart-grid: var(--ow-gray-200);
+    --ow-chart-axis: var(--ow-gray-300);
     --ow-code-block: #15171c;
     --ow-code-block-header: #1c1f26;
     --ow-code-block-border: #15171c;
@@ -162,6 +172,16 @@
     --ow-knob: #e4e7ec;
     --ow-meter-track: #2c313a;
     --ow-progress: var(--ow-brand-400);
+    --ow-chart-1: #898cd0;
+    --ow-chart-2: #d95926;
+    --ow-chart-3: #199e70;
+    --ow-chart-4: #c98500;
+    --ow-chart-5: #d55181;
+    --ow-chart-6: #008300;
+    --ow-chart-7: #3987e5;
+    --ow-chart-8: #e66767;
+    --ow-chart-grid: #2c313a;
+    --ow-chart-axis: #3a404b;
     --ow-code-block-border: #2c313a;
     --ow-backdrop: rgba(0,0,0,0.6);
     --ow-dot: rgba(255,255,255,0.09);
@@ -235,6 +255,16 @@
         --ow-knob: #e4e7ec;
         --ow-meter-track: #2c313a;
         --ow-progress: var(--ow-brand-400);
+        --ow-chart-1: #898cd0;
+        --ow-chart-2: #d95926;
+        --ow-chart-3: #199e70;
+        --ow-chart-4: #c98500;
+        --ow-chart-5: #d55181;
+        --ow-chart-6: #008300;
+        --ow-chart-7: #3987e5;
+        --ow-chart-8: #e66767;
+        --ow-chart-grid: #2c313a;
+        --ow-chart-axis: #3a404b;
         --ow-code-block-border: #2c313a;
         --ow-backdrop: rgba(0,0,0,0.6);
         --ow-dot: rgba(255,255,255,0.09);