@apliteni/apliteni-ui 0.65.0 → 0.67.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.65.0",
+  "version": "0.67.0",
   "workspaces": [
     "react"
   ],

package/src/styles/filter-bar.css

@@ -8,3 +8,15 @@
 .ui-filter-bar button:disabled { /* muted-ink: state — disabled filters */ color: var(--disabled-ink); cursor: not-allowed; }
 
 .ui-filter-bar .ui-dropdown__pre, .ui-filter-bar .ui-dropdown__value { color: inherit; }
+
+/* A chip's panel is as wide as the chip's trigger, never the 240px floor
+   .ui-dropdown__panel gives a standalone dropdown. A panel is positioned at its
+   trigger's inline start, so on a narrow row a later chip put its panel past the
+   screen — shut as well as open, a `visibility: hidden` box still being laid out.
+   The percentage resolves against .ui-dropdown, the panel's containing block,
+   which is the trigger's width because the trigger is its one in-flow child.
+   `overflow-wrap` keeps that a bound rather than a clip: a panel is
+   `overflow: visible`, so a value with no break opportunity would run out of it
+   and off the page. It inherits, reaching an option's label and description.
+   why: docs/specification.md#a-filter-row-holds-its-panels */
+.ui-filter-bar .ui-dropdown__panel { min-width: 100%; max-width: 100%; overflow-wrap: anywhere; }

package/src/styles/table.css

@@ -30,6 +30,13 @@
 .ui-table td.ui-table__act { padding-right: 0; text-align: right; }
 .ui-table tr.is-dead td { /* muted-ink: state — revoked row */ color: var(--muted); }
 .ui-table tr.is-dead td.ui-table__title { text-decoration: line-through; }
+/* The strike is painted by the cell across its in-flow inline descendants, and an atomic
+   inline-level box is not one — so a linked name in a revoked row needs it struck itself.
+   On hover it carries both lines: the cell-link hover rule below is a whole `text-decoration`,
+   which would otherwise replace the strike with the underline.
+   held by: src/styles/table-focus.test.js */
+.ui-table tr.is-dead td.ui-table__title a { text-decoration: line-through; }
+.ui-table tr.is-dead td.ui-table__title a:hover { text-decoration-line: underline line-through; }
 .ui-table tbody tr { transition: background var(--dur-fast) var(--ease); }
 
 /* Row hover: an inset, rounded fill so the highlight never sits flush against a
@@ -89,6 +96,24 @@
   color: var(--strong);
   text-decoration: underline;
 }
+/* A plain link — one carrying no class — is the link these rules are about. An inline-block
+   box, so a title link that wraps paints one ring instead of one per line, and the kit's small
+   corner for that ring to follow. Anchors the kit already styles (`.ui-btn`, `.ui-identity`,
+   `.ui-dropdown__item`, `.ui-nav__item`) keep the box and the corner their own component sets;
+   a denylist of them went stale twice before this said what it meant (#510).
+   held by: src/styles/table-focus.test.js */
+.ui-table :where(td, th, caption) a:not([class]) {
+  display: inline-block;
+  border-radius: var(--radius-xs);
+}
+/* And on keyboard focus every link in a table takes the kit ring, at whatever corner it
+   carries, so none falls back to the browser's own outline. `.ui-btn` has the ring already.
+   why: guidelines/state-set.md#focus-rings
+   held by: src/styles/table-focus.test.js */
+.ui-table a:not(.ui-btn):focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: var(--ring);
+}
 
 .ui-table__num { text-align: right; font-variant-numeric: tabular-nums; }
 .ui-table th.ui-table__num { text-align: right; }