@axiapps/axi-design 1.15.0 → 1.16.0

package/dist/axi.css

@@ -874,24 +874,67 @@ textarea.axi-input {
   color: var(--axi-text-faint);
   letter-spacing: .09em; text-transform: uppercase;
 }
-.axi-tabs { display: flex; gap: 8px; margin-left: auto; }
-.axi-tabs a {
+/* Anchors and buttons both. A strip that moves between URLs is made of links;
+   a strip inside an application that swaps a view in place is made of buttons,
+   and they look the same because they answer the same question. A button also
+   arrives carrying the UA's own font, fill and cursor, which an anchor does
+   not, so those three are cleared here rather than left to the consumer. */
+.axi-tabs { display: flex; gap: 8px; }
+/* The auto margin belongs to the masthead, not to the strip: it is a statement
+   about where the tabs sit in that row, and a strip standing on its own -
+   spanning a view instead of ending a header - has nothing to push away from. */
+.axi-mast .axi-tabs { margin-left: auto; }
+.axi-tabs a,
+.axi-tabs button {
   padding: 8px 16px;
   font: 800 13.5px/1 var(--axi-sans);
   color: var(--axi-text-dim); text-decoration: none;
+  background: none;
+  cursor: pointer;
   border: var(--axi-border-control) solid transparent;
   border-radius: var(--axi-radius-sm);
 }
-.axi-tabs a:hover { color: var(--axi-text); border-color: var(--axi-rule); }
+.axi-tabs a:hover,
+.axi-tabs button:hover { color: var(--axi-text); border-color: var(--axi-rule); }
 /* The current tab is filled and blocked - the same treatment a pressed pill
    gets, because it is the same idea: this one is on. */
-.axi-tabs a[aria-current="page"] {
+.axi-tabs a[aria-current="page"],
+.axi-tabs button[aria-current="page"] {
   background: var(--axi-accent);
   color: var(--axi-accent-ink);
   border-color: var(--axi-ink-line);
   box-shadow: var(--axi-shadow-control);
 }
 
+/* A closable tab - a report or a document, an open thing rather than a place.
+   The label and its close control travel together, so the pair is a box and
+   the strip's gap falls between pairs instead of between a tab and its own X.
+
+   The close control is a tab's affordance and not a tab, so it opts out of the
+   tab treatment: no tab padding, no tab weight, and faint until the cursor is
+   on it. Two classes to outrank `.axi-tabs button`, which is one class and one
+   element and would otherwise win on source order alone. */
+/* A document title is arbitrarily long, so the label truncates rather than
+   pushing the close control off the strip. Both boxes need min-width: 0 - a
+   flex item's default min-width is its content, so without it the label simply
+   refuses to shrink and the ellipsis never appears. The consumer sets the width
+   it wants to hold on .axi-tabs__tab. */
+.axi-tabs__tab { display: inline-flex; align-items: center; min-width: 0; }
+.axi-tabs__tab > a:first-child,
+.axi-tabs__tab > button:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.axi-tabs .axi-tabs__close {
+  padding: 0 6px;
+  font: var(--axi-t-micro);
+  color: var(--axi-text-faint);
+  border-color: transparent;
+}
+.axi-tabs .axi-tabs__close:hover { color: var(--axi-text); border-color: transparent; }
+
 /* ---------- notice ---------- */
 .axi-notice {
   display: flex; gap: 14px; padding: 15px 18px;
@@ -1205,7 +1248,8 @@ textarea.axi-input {
 
 @media (max-width: 640px) {
   .axi-mast__in { min-height: 0; padding: 10px 16px; gap: 12px; }
-  .axi-tabs { margin-left: 0; width: 100%; overflow-x: auto; }
+  .axi-mast .axi-tabs { margin-left: 0; }
+  .axi-tabs { width: 100%; overflow-x: auto; }
   /* The offset blocks eat horizontal room a phone does not have, so the panel
      step drops to the control step here rather than to an invented number.
      The card's hover has to come down with it - left alone it kept deepening

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiapps/axi-design",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "description": "The design language for the axi suite — flat and outlined, dark, drawn in saturated ink.",
   "type": "module",
   "license": "MIT",

package/src/shells.css

@@ -48,24 +48,67 @@
   color: var(--axi-text-faint);
   letter-spacing: .09em; text-transform: uppercase;
 }
-.axi-tabs { display: flex; gap: 8px; margin-left: auto; }
-.axi-tabs a {
+/* Anchors and buttons both. A strip that moves between URLs is made of links;
+   a strip inside an application that swaps a view in place is made of buttons,
+   and they look the same because they answer the same question. A button also
+   arrives carrying the UA's own font, fill and cursor, which an anchor does
+   not, so those three are cleared here rather than left to the consumer. */
+.axi-tabs { display: flex; gap: 8px; }
+/* The auto margin belongs to the masthead, not to the strip: it is a statement
+   about where the tabs sit in that row, and a strip standing on its own -
+   spanning a view instead of ending a header - has nothing to push away from. */
+.axi-mast .axi-tabs { margin-left: auto; }
+.axi-tabs a,
+.axi-tabs button {
   padding: 8px 16px;
   font: 800 13.5px/1 var(--axi-sans);
   color: var(--axi-text-dim); text-decoration: none;
+  background: none;
+  cursor: pointer;
   border: var(--axi-border-control) solid transparent;
   border-radius: var(--axi-radius-sm);
 }
-.axi-tabs a:hover { color: var(--axi-text); border-color: var(--axi-rule); }
+.axi-tabs a:hover,
+.axi-tabs button:hover { color: var(--axi-text); border-color: var(--axi-rule); }
 /* The current tab is filled and blocked - the same treatment a pressed pill
    gets, because it is the same idea: this one is on. */
-.axi-tabs a[aria-current="page"] {
+.axi-tabs a[aria-current="page"],
+.axi-tabs button[aria-current="page"] {
   background: var(--axi-accent);
   color: var(--axi-accent-ink);
   border-color: var(--axi-ink-line);
   box-shadow: var(--axi-shadow-control);
 }
 
+/* A closable tab - a report or a document, an open thing rather than a place.
+   The label and its close control travel together, so the pair is a box and
+   the strip's gap falls between pairs instead of between a tab and its own X.
+
+   The close control is a tab's affordance and not a tab, so it opts out of the
+   tab treatment: no tab padding, no tab weight, and faint until the cursor is
+   on it. Two classes to outrank `.axi-tabs button`, which is one class and one
+   element and would otherwise win on source order alone. */
+/* A document title is arbitrarily long, so the label truncates rather than
+   pushing the close control off the strip. Both boxes need min-width: 0 - a
+   flex item's default min-width is its content, so without it the label simply
+   refuses to shrink and the ellipsis never appears. The consumer sets the width
+   it wants to hold on .axi-tabs__tab. */
+.axi-tabs__tab { display: inline-flex; align-items: center; min-width: 0; }
+.axi-tabs__tab > a:first-child,
+.axi-tabs__tab > button:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.axi-tabs .axi-tabs__close {
+  padding: 0 6px;
+  font: var(--axi-t-micro);
+  color: var(--axi-text-faint);
+  border-color: transparent;
+}
+.axi-tabs .axi-tabs__close:hover { color: var(--axi-text); border-color: transparent; }
+
 /* ---------- notice ---------- */
 .axi-notice {
   display: flex; gap: 14px; padding: 15px 18px;
@@ -379,7 +422,8 @@
 
 @media (max-width: 640px) {
   .axi-mast__in { min-height: 0; padding: 10px 16px; gap: 12px; }
-  .axi-tabs { margin-left: 0; width: 100%; overflow-x: auto; }
+  .axi-mast .axi-tabs { margin-left: 0; }
+  .axi-tabs { width: 100%; overflow-x: auto; }
   /* The offset blocks eat horizontal room a phone does not have, so the panel
      step drops to the control step here rather than to an invented number.
      The card's hover has to come down with it - left alone it kept deepening