@apliteni/apliteni-ui 0.57.0 → 0.58.0

package/src/components/table-values.js

@@ -7,7 +7,7 @@ export function numericValue({ value, unit = '', missing = 'Not available' } = {
 
 export function deltaValue({ value, tone = 'neutral', basisId, missing = 'No earlier figure' } = {}) {
   const present = value != null && value !== '';
-  const judged = present && ['success', 'danger'].includes(tone) && !/^[+−-]?0(?:[.,]0+)?%?$/.test(String(value).replace(/\s/g, ''));
+  const judged = present && ['success', 'danger'].includes(tone) && !/^[+−-]?0+(?:[.,]0+)?(?:[^\d.,].*)?$/.test(String(value).replace(/\s/g, ''));
   return `<span class="ui-delta${judged ? ` ui-delta--${tone}` : ''}"${basisId ? ` aria-describedby="${esc(basisId)}"` : ''}>${esc(present ? value : missing)}</span>`;
 }
 

package/src/styles/segmented.css

@@ -3,16 +3,23 @@
  * The selected button keeps the reading surface and gains an accent edge.
  * ========================================================================== */
 
+/* The strip wraps rather than overflows: a track wider than its column used to
+   push the page's scrollWidth past the viewport, which drags every sibling with
+   it. Wrapping keeps the focus ring's glow unclipped, which `overflow: auto`
+   here would not. #435 */
 .ui-seg {
   display: inline-flex;
   /* `inline-flex` sizes the track to its pills, but a flex or grid parent stretches a
      child whatever its display says — and .ui-app__body is a flex column. The control
      states its own alignment; --block and --underline ask for the width back. */
   align-self: start;
+  justify-self: start;
   background: var(--surface); --ring-gap: var(--surface);
+  flex-wrap: wrap;
+  max-width: 100%;
   border-radius: var(--radius-2xl);
-  padding: 3px;
-  gap: 2px;
+  padding: var(--space-1);
+  gap: var(--space-1);
 }
 .ui-seg button {
   font-family: var(--font-sans);
@@ -22,10 +29,10 @@
   color: var(--text);
   background: none;
   border: 0;
-  padding: 7px 18px;
+  padding: var(--space-2) var(--space-4);
   border-radius: var(--radius-2xl);
   cursor: pointer;
-  transition: color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
+  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
 .ui-seg button:hover { color: var(--strong); }
 /* aria-pressed is what segmented() emits now; aria-selected is kept so markup
@@ -38,8 +45,13 @@
   outline: 1px solid var(--accent);
 }
 
-.ui-seg--sm button { padding: 5px 13px; font-size: calc(var(--text-xs) + 1px); }
-.ui-seg--block { display: flex; align-self: stretch; }
+/* Standard pills tighten on phones so six short month names fit one row. */
+@media (max-width: 560px) {
+  .ui-seg:not(.ui-seg--sm):not(.ui-seg--underline) button { padding: var(--space-2) var(--space-3); }
+}
+
+.ui-seg--sm button { min-height: var(--space-6); padding: var(--space-1) var(--space-3); font-size: calc(var(--text-xs) + 1px); }
+.ui-seg--block { display: flex; align-self: stretch; justify-self: stretch; }
 .ui-seg--block button { flex: 1; }
 
 /* Accent picker — round colour swatches, active gets a ring */
@@ -61,7 +73,7 @@
 }
 .ui-accent-picker button:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 
-.ui-seg--underline { align-self: stretch; background: transparent; --ring-gap: inherit; border-radius: 0; border-bottom: 1px solid var(--border); padding: var(--space-1); overflow: auto; max-width: 100%; }
+.ui-seg--underline { flex-wrap: nowrap; align-self: stretch; justify-self: stretch; background: transparent; --ring-gap: inherit; border-radius: 0; border-bottom: 1px solid var(--border); padding: var(--space-1); overflow: auto; max-width: 100%; }
 .ui-seg--underline button { border-radius: var(--radius-xs); border-bottom: 2px solid transparent; padding: var(--space-3); white-space: nowrap; }
 .ui-seg--underline button.is-active,
 .ui-seg--underline button[aria-pressed="true"] { background: transparent; border-bottom-color: var(--accent); }

package/src/styles/table.css

@@ -98,6 +98,9 @@
 /* The empty state (.ui-empty) — shown when a table/list has no rows — now
    lives in styles/empty.css as a standalone component (illustration support). */
 
+/* Tables share their containing card’s reading surface, including pinned cells. */
+.ui-card { --table-bg: var(--surface); }
+
 /* White in light, base canvas in dark; never a grey or tinted data surface. */
 .ui-table { background: var(--table-bg); --ring-gap: var(--table-bg); }
 .ui-table--zebra tbody tr:nth-child(even) td,
@@ -116,6 +119,14 @@
   width: calc(100% + 2 * var(--space-3));
   margin-inline: calc(-1 * var(--space-3));
 }
+/* A scroll wrapper owns the bleed for a nested dense table: 4px of focus
+   clearance plus the 12px end-cell inset. */
+.ui-card > .ui-table-scroll:has(> .ui-table--dense) {
+  margin-inline: calc(-1 * var(--space-4));
+}
+.ui-card > .ui-table-scroll > .ui-table--dense {
+  padding-inline: 0;
+}
 .ui-table td.ui-table__num { text-align: right; }
 .ui-table--compact td { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); line-height: var(--leading-snug); height: 33px; }
 .ui-table--compact th { padding: var(--space-2) var(--space-3); }