@webority/theme 0.24.0 → 0.26.0

package/scss/wui/_chart.scss

@@ -0,0 +1,524 @@
+// Charts: AppLineChart and AppBarChart, and the <wui-chart> element behind AppChart.
+//
+// Part of the wui-components layer; see _wui-components.scss for the load order. The line and
+// bar charts use one accent (--color-primary), muted grid and labels, and direct labels instead of
+// a legend; the element draws series in the --wui-chart-* colours. Every colour is a token the
+// dark remap in _wui-aliases.scss flips with the rest of the portal.
+
+.wui-chart {
+    margin: 0;
+    min-width: 0;
+    color: var(--color-text-muted);
+    font-size: 12px;
+    font-variant-numeric: tabular-nums;
+}
+.wui-chart-title {
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-text);
+}
+
+// ============================================================================
+// Line chart
+// ============================================================================
+// The top tick label sits above the top gridline, so the plot leaves room for it.
+.wui-chart-plot {
+    position: relative;
+    margin-top: 8px;
+}
+// Strokes overhang the plot by half their width at the top and bottom gridlines.
+.wui-chart-svg {
+    display: block;
+    overflow: visible;
+}
+.wui-chart-grid {
+    stroke: var(--color-border);
+    stroke-width: 1;
+}
+.wui-chart-reference {
+    stroke: var(--color-border-strong);
+    stroke-width: 1;
+    stroke-dasharray: 4 4;
+}
+.wui-chart-line {
+    stroke: var(--color-primary);
+    stroke-width: 2;
+    stroke-linecap: round;
+}
+// Bands are a quiet wash behind the series; the tone tints, it does not shout.
+.wui-chart-band {
+    fill: var(--color-bg-muted);
+    opacity: 0.6;
+}
+.wui-chart-band-info {
+    fill: var(--color-info-soft);
+}
+.wui-chart-band-success {
+    fill: var(--color-success-soft);
+}
+.wui-chart-band-warning {
+    fill: var(--color-warning-soft);
+}
+.wui-chart-band-danger {
+    fill: var(--color-danger-soft);
+}
+
+// Y tick values sit just above their gridline at the left edge, inside the plot, so the chart
+// spends no width on a label gutter at 320px.
+.wui-chart-tick,
+.wui-chart-band-label,
+.wui-chart-reference-label {
+    position: absolute;
+    font-size: 11px;
+    line-height: 1;
+    white-space: nowrap;
+    color: var(--color-text-muted);
+    pointer-events: none;
+}
+.wui-chart-tick {
+    left: 0;
+    padding-bottom: 3px;
+    transform: translateY(-100%);
+}
+.wui-chart-band-label {
+    right: 0;
+    padding-top: 3px;
+}
+.wui-chart-reference-label {
+    right: 0;
+    padding-bottom: 3px;
+    transform: translateY(-100%);
+}
+
+// A 24px hit area per point (WCAG 2.2 target size), drawn as an 8px ring.
+.wui-chart-point {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    margin: -12px 0 0 -12px;
+    padding: 0;
+    display: grid;
+    place-items: center;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    cursor: default;
+}
+.wui-chart-point:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 0;
+}
+.wui-chart-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    border: 2px solid var(--color-primary);
+    background: var(--color-surface);
+    transition: transform 120ms var(--wui-ease-out-quart);
+}
+.wui-chart-point:hover .wui-chart-dot,
+.wui-chart-point:focus-visible .wui-chart-dot {
+    transform: scale(1.35);
+    background: var(--color-primary);
+}
+
+// CSS-only tooltip above the point; the first and last points anchor it to their own edge so
+// it never runs off a narrow chart.
+.wui-chart-tip {
+    position: absolute;
+    bottom: calc(100% + 4px);
+    left: 50%;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+    padding: 6px 10px;
+    border: 1px solid var(--color-border-light);
+    border-radius: var(--radius);
+    background: var(--color-surface);
+    box-shadow: var(--wui-shadow-overlay);
+    white-space: nowrap;
+    text-align: left;
+    pointer-events: none;
+    visibility: hidden;
+    opacity: 0;
+    transform: translateX(-50%);
+    transition:
+        opacity 120ms var(--wui-ease-out-quart),
+        visibility 120ms;
+}
+.wui-chart-point-start .wui-chart-tip {
+    left: 0;
+    transform: none;
+}
+.wui-chart-point-end .wui-chart-tip {
+    left: auto;
+    right: 0;
+    transform: none;
+}
+.wui-chart-point:hover .wui-chart-tip,
+.wui-chart-point:focus-visible .wui-chart-tip {
+    visibility: visible;
+    opacity: 1;
+}
+.wui-chart-tip-label {
+    font-size: 11px;
+    color: var(--color-text-muted);
+}
+.wui-chart-tip-value {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-text);
+}
+
+.wui-chart-xaxis {
+    position: relative;
+    height: 16px;
+    margin-top: 6px;
+}
+.wui-chart-xlabel {
+    position: absolute;
+    top: 0;
+    font-size: 11px;
+    line-height: 16px;
+    white-space: nowrap;
+    transform: translateX(-50%);
+}
+// Below md only every Nth label shows (the component marks the rest minor); a 12-month axis
+// would otherwise overlap on a phone.
+.wui-chart-xlabel-minor {
+    display: none;
+}
+@media (min-width: 768px) {
+    .wui-chart-xlabel-minor {
+        display: block;
+    }
+}
+
+// ============================================================================
+// Bar chart
+// ============================================================================
+.wui-bar-chart-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.wui-bar-chart-label {
+    min-width: 0;
+    color: var(--color-text-body);
+    overflow-wrap: anywhere;
+}
+.wui-bar-chart-value {
+    font-weight: 600;
+    white-space: nowrap;
+    color: var(--color-text);
+}
+.wui-bar-chart-track {
+    position: relative;
+    overflow: hidden;
+    border-radius: 999px;
+    background: var(--color-progress-track);
+}
+.wui-bar-chart-fill {
+    border-radius: inherit;
+    background: var(--color-primary);
+}
+// Each track is a focus stop; the ring sits outside the track's own clipped content.
+.wui-bar-chart-track:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+// Horizontal: a label/value line over each bar, so a long label wraps instead of squeezing
+// the bar at 320px.
+.wui-bar-chart-horizontal .wui-bar-chart-list {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+.wui-bar-chart-horizontal .wui-bar-chart-item {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+        "label value"
+        "track track";
+    column-gap: 12px;
+    row-gap: 6px;
+    align-items: baseline;
+}
+.wui-bar-chart-horizontal .wui-bar-chart-label {
+    grid-area: label;
+}
+.wui-bar-chart-horizontal .wui-bar-chart-value {
+    grid-area: value;
+}
+.wui-bar-chart-horizontal .wui-bar-chart-track {
+    grid-area: track;
+    height: 8px;
+}
+.wui-bar-chart-horizontal .wui-bar-chart-fill {
+    height: 100%;
+    transition: width 300ms var(--wui-ease-out-quart);
+}
+
+// Vertical: bars side by side, value above and label below each. The plot height is one var a
+// caller can set from its own class.
+.wui-bar-chart-vertical .wui-bar-chart-list {
+    display: flex;
+    gap: 8px;
+}
+.wui-bar-chart-vertical .wui-bar-chart-item {
+    flex: 1 1 0;
+    min-width: 0;
+    display: grid;
+    grid-template-areas:
+        "value"
+        "track"
+        "label";
+    justify-items: center;
+    row-gap: 6px;
+    text-align: center;
+}
+// Seven bars on a 320px phone leave about 40px a column, so "18 of 25" may wrap here.
+.wui-bar-chart-vertical .wui-bar-chart-value {
+    grid-area: value;
+    white-space: normal;
+}
+.wui-bar-chart-vertical .wui-bar-chart-track {
+    grid-area: track;
+    display: flex;
+    align-items: flex-end;
+    width: 100%;
+    max-width: 32px;
+    height: var(--wui-bar-chart-height, 180px);
+    border-radius: var(--radius-sm);
+}
+.wui-bar-chart-vertical .wui-bar-chart-fill {
+    width: 100%;
+    transition: height 300ms var(--wui-ease-out-quart);
+}
+.wui-bar-chart-vertical .wui-bar-chart-label {
+    grid-area: label;
+    font-size: 11px;
+}
+
+// ============================================================================
+// Chart element: <wui-chart> (AppChart, <app-chart>)
+// ============================================================================
+// The element builds the legend, the drawing surface, the state box and the data table; the
+// engine draws inside .wui-chart-canvas with colours the element reads from --wui-chart-*. The
+// names here stay clear of the line and bar chart classes above.
+wui-chart {
+    position: relative;
+    display: block;
+    min-width: 0;
+    color: var(--color-text-muted);
+    font-size: 12px;
+}
+
+.wui-chart-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px 8px;
+    margin: 0 0 8px -6px;
+}
+.wui-chart-legend[hidden] {
+    display: none;
+}
+// 24px tall: the WCAG 2.2 minimum target.
+.wui-chart-legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 24px;
+    padding: 2px 6px;
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--color-text-muted);
+    font: inherit;
+    cursor: pointer;
+    transition:
+        color 150ms var(--wui-ease-out-quart),
+        background-color 150ms var(--wui-ease-out-quart);
+}
+.wui-chart-legend-item:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+.wui-chart-legend-item:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 1px;
+}
+.wui-chart-legend-swatch {
+    flex: none;
+    width: 10px;
+    height: 10px;
+    border-radius: 3px;
+    transition: opacity 150ms var(--wui-ease-out-quart);
+}
+.wui-chart-legend-swatch-line {
+    width: 14px;
+    height: 3px;
+    border-radius: 2px;
+}
+// A hidden series keeps its place: a faded key and a struck label, not colour alone.
+.wui-chart-legend-item[aria-pressed="false"] {
+    color: var(--color-text-subtle);
+}
+.wui-chart-legend-item[aria-pressed="false"] .wui-chart-legend-swatch {
+    opacity: 0.3;
+}
+.wui-chart-legend-item[aria-pressed="false"] .wui-chart-legend-label {
+    text-decoration: line-through;
+}
+
+.wui-chart-surface {
+    position: relative;
+    width: 100%;
+    border-radius: var(--radius-sm);
+    transition: opacity 200ms var(--wui-ease-out-quart);
+}
+.wui-chart-surface:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 4px;
+}
+.wui-chart-canvas {
+    width: 100%;
+}
+// Digits line up on SVG axes; a canvas has no such setting.
+.wui-chart-canvas svg text {
+    font-variant-numeric: tabular-nums;
+}
+// New data on its way: the last picture stays, dimmed, so nothing jumps.
+wui-chart[aria-busy="true"] .wui-chart-surface {
+    opacity: 0.45;
+}
+
+.wui-chart-state {
+    display: grid;
+    place-items: center;
+    padding: 16px;
+    text-align: center;
+}
+.wui-chart-state:has(.wui-chart-skeleton) {
+    padding: 0;
+    place-items: stretch;
+}
+.wui-chart-state-text {
+    max-width: 36ch;
+    margin: 0;
+    font-size: 13px;
+    color: var(--color-text-muted);
+}
+.wui-chart-skeleton {
+    width: 100%;
+    height: 100%;
+}
+
+// The engine positions the tooltip box and paints its fill, border and shadow from the theme;
+// these style the content the element builds inside it.
+.wui-chart-tooltip {
+    font: 12px/1.45 var(--bs-body-font-family);
+}
+.wui-chart-tooltip-body {
+    min-width: 168px;
+    color: var(--color-text-body);
+}
+.wui-chart-tooltip-title {
+    margin-bottom: 6px;
+    font-size: 11.5px;
+    font-weight: 500;
+    color: var(--color-text-subtle);
+}
+.wui-chart-tooltip-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 1px 0;
+}
+.wui-chart-tooltip-swatch {
+    flex: none;
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+}
+.wui-chart-tooltip-swatch-line {
+    width: 12px;
+    height: 3px;
+}
+.wui-chart-tooltip-label {
+    color: var(--color-text-muted);
+}
+.wui-chart-tooltip-value {
+    margin-left: auto;
+    padding-left: 16px;
+    font-weight: 600;
+    color: var(--color-text);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+.wui-chart-tooltip-foot {
+    margin-top: 6px;
+    padding-top: 6px;
+    border-top: 1px solid var(--color-border);
+    font-size: 11.5px;
+    color: var(--color-text-subtle);
+}
+
+// The table view: the same height as the chart, scrolling inside itself.
+.wui-chart-table-wrap {
+    overflow: auto;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+}
+.wui-chart-table {
+    width: 100%;
+    margin: 0;
+    border-collapse: collapse;
+    font-size: 13px;
+    color: var(--color-text-body);
+}
+.wui-chart-table th,
+.wui-chart-table td {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--color-border);
+    text-align: left;
+}
+.wui-chart-table thead th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(--color-bg-muted);
+    color: var(--color-text-muted);
+    font-size: 12px;
+    font-weight: 600;
+    white-space: nowrap;
+}
+.wui-chart-table tbody th {
+    font-weight: 500;
+}
+.wui-chart-table .wui-chart-num {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+.wui-chart-table-note {
+    margin: 0;
+    padding: 8px 12px;
+    font-size: 12px;
+    color: var(--color-text-subtle);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wui-chart-dot,
+    .wui-chart-tip,
+    .wui-bar-chart-fill,
+    .wui-chart-legend-item,
+    .wui-chart-legend-swatch,
+    .wui-chart-surface {
+        transition: none;
+    }
+}

package/scss/wui/_context-menu.scss

@@ -0,0 +1,53 @@
+// ── Context menu ──
+// AppContextMenu / <app-context-menu> / <wui-context-menu>: a right-click menu over a region.
+// The panel is a Bootstrap .dropdown-menu with .dropdown-item rows, so the look, the danger tone
+// and the icon treatment come from the shared dropdown styles; this partial only adds what a
+// menu opened at the pointer needs. The element shows the panel with [data-open] (never `.show`,
+// which a React re-render would reset) and places it with position: fixed, so it escapes any
+// clipping ancestor. Every colour is a theme token.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+// The element wraps the region without taking part in its layout.
+wui-context-menu {
+    display: contents;
+}
+
+.dropdown-menu.wui-context-menu-panel {
+    position: fixed;
+    // Above a modal, like every other portalled menu (see --wui-z-* in _tokens.scss).
+    z-index: var(--wui-z-menu);
+    // Never taller than the screen; anchorOverlay clamps it further when the pointer is low.
+    max-height: calc(100vh - 8px);
+    // Focus lands on the panel itself after a pointer open; the rows carry the visible focus.
+    outline: none;
+    transform-origin: top left;
+
+    &[data-open] {
+        display: block;
+        animation: var(--wui-menu-anim) var(--wui-menu-anim-duration) var(--wui-menu-anim-ease);
+    }
+    &.drop-up {
+        --wui-menu-drop: 6px;
+
+        transform-origin: bottom left;
+    }
+
+    // A row the user can reach with the keyboard shows where it is.
+    .dropdown-item:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: -2px;
+    }
+    // Listed but unchoosable: quiet, and no hover tint.
+    .dropdown-item[aria-disabled="true"] {
+        color: var(--color-text-subtle);
+        cursor: default;
+        background: transparent;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dropdown-menu.wui-context-menu-panel[data-open] {
+        animation: none;
+    }
+}

package/scss/wui/_data.scss

@@ -791,12 +791,14 @@
     outline-offset: -2px;
 }
 
-// Stacked on phones (AppDataTable `stackOnMobile`, Razor `stack-on-mobile`): below sm each row is a
-// card. The first column (after the library's select/expand cells) leads the card at full width,
-// every other cell is a "label: value" line from its data-label, the select checkbox sits in the
-// card's top corner and the row actions close the card. The header row is visually hidden, not
-// removed, so the column names stay available to assistive technology.
-@include media-breakpoint-down(sm) {
+// Stacked on phones (AppDataTable `stackOnMobile`, Razor `stack-on-mobile`): below md (768px) each
+// row is a card. The first column (after the library's select/expand cells) leads the card at full
+// width, every other cell is a "label: value" line from its data-label, the select checkbox sits in
+// the card's top corner and the row actions close the card. The header row is visually hidden, not
+// removed, so the column names stay available to assistive technology. 768 matches the phone shell
+// (its bottom tab bar shows below the same width): a ledger squeezed into a 600px column scrolled
+// sideways while the rest of the page was already in its phone layout.
+@include media-breakpoint-down(md) {
     // Cards flow with the page: no sideways scroll, and no maxHeight scroll box (an inline
     // max-height from `maxHeight` has to be overridden, hence !important).
     .table-wrap:has(> .table-ledger.wui-table-stack) {

package/scss/wui/_display.scss

@@ -200,7 +200,7 @@
     // never read as serif. A product that wants its own face overrides this one selector.
     // Size comes from --wui-kpi-value-size (44px default, set on the spotlight root above), so a
     // custom `valueSize` (px) can tame a too-large headline.
-    font-family: Georgia, 'Times New Roman', 'Noto Serif', serif;
+    font-family: var(--wui-font-display);
     line-height: 1;
     font-weight: 600;
 }