@axiapps/axi-design 1.14.0 → 1.16.0

package/README.md

@@ -55,7 +55,7 @@ everything-at-once view.
 
 ### An icon set of its own
 
-Forty-seven glyphs drawn to [rule 12](docs/RULES.md) — a 24 canvas, a 3px
+Fifty-seven glyphs drawn to [rule 12](docs/RULES.md) — a 24 canvas, a 3px
 stroke, mitered joins, square corners, and no angle that is not 0°, 45° or 90°.
 They take their ink from whatever they sit in, so a glyph inside an accent
 button turns accent-ink with the label and follows every accent and theme
@@ -74,12 +74,19 @@ absent, no error, no fallback. In that case do one of two things: inline
 `dist/icons/sprite.svg` into the document once (a hidden `<svg>` before
 `</body>`, which is what this project's own docs site does) and reference bare
 fragments like `#axi-search`, or use the standalone `dist/icons/<name>.svg`
-files. Serving the renderer over `http://localhost` also works.
+files. Serving the renderer over `http://localhost` also works. Note that
+alias names resolve only through the sprite — there is no
+`dist/icons/triangle-alert.svg` — so the standalone-file route wants the
+canonical name.
 
 One sprite holds the set; `dist/icons/<name>.svg` is the same drawing on its own,
 and `dist/icons/icons.json` is the catalogue — name, categories, aliases and
-keywords — for an app that wants to build a picker. Size a glyph with
-`--axi-icon-size`. The vocabulary derives from [Lucide](https://lucide.dev)
+keywords — for an app that wants to build a picker. A Lucide name this set
+answers to under a different one — `triangle-alert`, `alert-circle`, `loader-2` —
+resolves in the sprite too, so porting off `lucide-react` is a rename rather than
+a call-site audit. Where the set will not draw a shape at all, the
+[icons page](https://darkharasho.github.io/axi-design/icons/#substitutions) says
+what to use instead. Size a glyph with `--axi-icon-size`. The vocabulary derives from [Lucide](https://lucide.dev)
 under the ISC licence (`icons/LICENSE-LUCIDE`); none of the path data does.
 Browse the set at [`/icons/`](https://darkharasho.github.io/axi-design/icons/).
 

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/dist/icons/activity.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M2.5 12 L6 12 L9.5 15.5 L15.5 9.5 L18 12 L21.5 12"/>
+</svg>

package/dist/icons/circle-help.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M8.5 1.5 L15.5 1.5 L22.5 8.5 L22.5 15.5 L15.5 22.5 L8.5 22.5 L1.5 15.5 L1.5 8.5 Z"/>
+  <path d="M7 9 L8.5 7.5 L14.5 7.5 L14.5 11.5 L12 11.5 L12 14.5"/>
+  <path d="M12 17.5 L12 19"/>
+</svg>

package/dist/icons/crown.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M3.5 8.5 L7.5 12.5 L12 8 L16.5 12.5 L20.5 8.5 L20.5 17.5 L3.5 17.5 Z"/>
+</svg>

package/dist/icons/filter.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
-<path d="M2.5 4.5 L21.5 4.5 L13.5 12.5 L13.5 19.5 L10.5 19.5 L10.5 12.5 Z"/>
+<path d="M4.5 4.5 L19.5 4.5 L13.5 10.5 L13.5 19.5 L10.5 19.5 L10.5 10.5 Z"/>
 </svg>

package/dist/icons/folder-open.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
-<path d="M2.5 20.5 L2.5 4.5 L8.5 4.5 L11.5 7.5 L19.5 7.5 L19.5 12.5"/>
-  <path d="M10.5 12.5 L22.5 12.5 L14.5 20.5 L2.5 20.5 Z"/>
+<path d="M3.5 18.5 L3.5 4.5 L8.5 4.5 L11.5 7.5 L19.5 7.5 L19.5 11.5"/>
+  <path d="M11.5 11.5 L19.5 11.5 L12.5 18.5 L4.5 18.5 Z"/>
 </svg>

package/dist/icons/icons.json

@@ -1,4 +1,20 @@
 [
+  {
+    "name": "activity",
+    "categories": [
+      "status"
+    ],
+    "aliases": [
+      "pulse",
+      "live"
+    ],
+    "keywords": [
+      "health",
+      "chart",
+      "monitor",
+      "heartbeat"
+    ]
+  },
   {
     "name": "arrow-down",
     "categories": [
@@ -165,6 +181,11 @@
       "warning",
       "exclamation"
     ],
+    "lucide": [
+      "alert-circle",
+      "triangle-alert",
+      "alert-triangle"
+    ],
     "keywords": [
       "danger",
       "error",
@@ -179,12 +200,35 @@
     "aliases": [
       "success"
     ],
+    "lucide": [
+      "check-circle",
+      "check-circle-2"
+    ],
     "keywords": [
       "verified",
       "passed",
       "complete"
     ]
   },
+  {
+    "name": "circle-help",
+    "categories": [
+      "status"
+    ],
+    "aliases": [
+      "help",
+      "question"
+    ],
+    "lucide": [
+      "help-circle"
+    ],
+    "keywords": [
+      "what",
+      "support",
+      "unknown",
+      "faq"
+    ]
+  },
   {
     "name": "circle-x",
     "categories": [
@@ -193,6 +237,9 @@
     "aliases": [
       "failure"
     ],
+    "lucide": [
+      "x-circle"
+    ],
     "keywords": [
       "error",
       "rejected",
@@ -226,6 +273,22 @@
       "clone"
     ]
   },
+  {
+    "name": "crown",
+    "categories": [
+      "objects"
+    ],
+    "aliases": [
+      "king",
+      "best"
+    ],
+    "keywords": [
+      "rank",
+      "premium",
+      "featured",
+      "top"
+    ]
+  },
   {
     "name": "download",
     "categories": [
@@ -366,6 +429,25 @@
       "connect"
     ]
   },
+  {
+    "name": "loader-circle",
+    "categories": [
+      "status"
+    ],
+    "aliases": [
+      "spinner",
+      "loading"
+    ],
+    "lucide": [
+      "loader-2"
+    ],
+    "keywords": [
+      "busy",
+      "pending",
+      "wait",
+      "progress"
+    ]
+  },
   {
     "name": "lock",
     "categories": [
@@ -381,6 +463,21 @@
       "closed"
     ]
   },
+  {
+    "name": "maximize-2",
+    "categories": [
+      "actions"
+    ],
+    "aliases": [
+      "expand",
+      "fullscreen"
+    ],
+    "keywords": [
+      "enlarge",
+      "grow",
+      "open"
+    ]
+  },
   {
     "name": "menu",
     "categories": [
@@ -395,6 +492,22 @@
       "more"
     ]
   },
+  {
+    "name": "message-square",
+    "categories": [
+      "objects"
+    ],
+    "aliases": [
+      "comment",
+      "chat"
+    ],
+    "keywords": [
+      "speech",
+      "reply",
+      "thread",
+      "note"
+    ]
+  },
   {
     "name": "minus",
     "categories": [
@@ -431,6 +544,10 @@
       "edit",
       "write"
     ],
+    "lucide": [
+      "edit-2",
+      "square-pen"
+    ],
     "keywords": [
       "rename",
       "modify",
@@ -509,6 +626,22 @@
       "query"
     ]
   },
+  {
+    "name": "settings",
+    "categories": [
+      "actions"
+    ],
+    "aliases": [
+      "gear",
+      "cog"
+    ],
+    "keywords": [
+      "admin",
+      "system",
+      "controls",
+      "setup"
+    ]
+  },
   {
     "name": "settings-2",
     "categories": [
@@ -524,6 +657,37 @@
       "tune"
     ]
   },
+  {
+    "name": "share-2",
+    "categories": [
+      "actions"
+    ],
+    "aliases": [
+      "share"
+    ],
+    "keywords": [
+      "send",
+      "distribute",
+      "network",
+      "nodes"
+    ]
+  },
+  {
+    "name": "shield",
+    "categories": [
+      "status"
+    ],
+    "aliases": [
+      "secure",
+      "protected"
+    ],
+    "keywords": [
+      "guard",
+      "safety",
+      "defence",
+      "trust"
+    ]
+  },
   {
     "name": "skip-forward",
     "categories": [
@@ -545,12 +709,31 @@
     "aliases": [
       "stop"
     ],
+    "lucide": [
+      "circle"
+    ],
     "keywords": [
       "halt",
       "end",
       "record"
     ]
   },
+  {
+    "name": "swords",
+    "categories": [
+      "objects"
+    ],
+    "aliases": [
+      "combat",
+      "versus"
+    ],
+    "keywords": [
+      "battle",
+      "fight",
+      "pvp",
+      "duel"
+    ]
+  },
   {
     "name": "tag",
     "categories": [

package/dist/icons/loader-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M12 3.5 L3.5 3.5 L3.5 20.5 L20.5 20.5 L20.5 12"/>
+</svg>

package/dist/icons/maximize-2.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M14.5 3.5 L20.5 3.5 L20.5 9.5"/>
+  <path d="M9.5 20.5 L3.5 20.5 L3.5 14.5"/>
+  <path d="M20.5 3.5 L3.5 20.5"/>
+</svg>

package/dist/icons/message-square.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M3.5 4.5 L20.5 4.5 L20.5 16.5 L9.5 16.5 L6.5 19.5 L6.5 16.5 L3.5 16.5 Z"/>
+</svg>

package/dist/icons/settings.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M5.5 5.5 L10.5 5.5 L10.5 2.5 L13.5 2.5 L13.5 5.5 L18.5 5.5 L18.5 10.5 L21.5 10.5 L21.5 13.5 L18.5 13.5 L18.5 18.5 L13.5 18.5 L13.5 21.5 L10.5 21.5 L10.5 18.5 L5.5 18.5 L5.5 13.5 L2.5 13.5 L2.5 10.5 L5.5 10.5 Z"/>
+  <path d="M12 10 L14 12 L12 14 L10 12 Z" fill="currentColor" stroke="none"/>
+</svg>

package/dist/icons/share-2.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M8 10 L10 12 L8 14 L6 12 Z"/>
+  <path d="M15.5 2.5 L17.5 4.5 L15.5 6.5 L13.5 4.5 Z"/>
+  <path d="M15.5 17.5 L17.5 19.5 L15.5 21.5 L13.5 19.5 Z"/>
+  <path d="M10 10 L13.5 6.5"/>
+  <path d="M10 14 L13.5 17.5"/>
+</svg>

package/dist/icons/shield.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M5.5 3.5 L18.5 3.5 L18.5 14.5 L12 21 L5.5 14.5 Z"/>
+</svg>

package/dist/icons/sprite.svg

@@ -1,6 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg">
 <!-- axi design language - generated by scripts/build.mjs from icons/.
      Edit the files in icons/ and run `npm run build`; do not edit this file. -->
+  <symbol id="axi-activity" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <path d="M2.5 12 L6 12 L9.5 15.5 L15.5 9.5 L18 12 L21.5 12"/>
+  </symbol>
   <symbol id="axi-arrow-down" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
     <path d="M12 3.5 L12 19.5"/>
     <path d="M6 13.5 L12 19.5 L18 13.5"/>
@@ -51,6 +54,11 @@
     <path d="M8.5 1.5 L15.5 1.5 L22.5 8.5 L22.5 15.5 L15.5 22.5 L8.5 22.5 L1.5 15.5 L1.5 8.5 Z"/>
     <path d="M7 12 L10.5 15.5 L17 9"/>
   </symbol>
+  <symbol id="axi-circle-help" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <path d="M8.5 1.5 L15.5 1.5 L22.5 8.5 L22.5 15.5 L15.5 22.5 L8.5 22.5 L1.5 15.5 L1.5 8.5 Z"/>
+    <path d="M7 9 L8.5 7.5 L14.5 7.5 L14.5 11.5 L12 11.5 L12 14.5"/>
+    <path d="M12 17.5 L12 19"/>
+  </symbol>
   <symbol id="axi-circle-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
     <path d="M8.5 1.5 L15.5 1.5 L22.5 8.5 L22.5 15.5 L15.5 22.5 L8.5 22.5 L1.5 15.5 L1.5 8.5 Z"/>
     <path d="M8 8 L16 16"/>
@@ -64,6 +72,9 @@
     <path d="M8.5 8.5 L20.5 8.5 L20.5 20.5 L8.5 20.5 Z"/>
     <path d="M15.5 5.5 L15.5 3.5 L3.5 3.5 L3.5 15.5 L5.5 15.5"/>
   </symbol>
+  <symbol id="axi-crown" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <path d="M3.5 8.5 L7.5 12.5 L12 8 L16.5 12.5 L20.5 8.5 L20.5 17.5 L3.5 17.5 Z"/>
+  </symbol>
   <symbol id="axi-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
     <path d="M12 2.5 L12 14.5"/>
     <path d="M6.5 9 L12 14.5 L17.5 9"/>
@@ -89,14 +100,14 @@
     <path d="M8.5 16.5 L15.5 16.5"/>
   </symbol>
   <symbol id="axi-filter" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
-    <path d="M2.5 4.5 L21.5 4.5 L13.5 12.5 L13.5 19.5 L10.5 19.5 L10.5 12.5 Z"/>
+    <path d="M4.5 4.5 L19.5 4.5 L13.5 10.5 L13.5 19.5 L10.5 19.5 L10.5 10.5 Z"/>
   </symbol>
   <symbol id="axi-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
     <path d="M2.5 20.5 L2.5 4.5 L8.5 4.5 L11.5 7.5 L21.5 7.5 L21.5 20.5 Z"/>
   </symbol>
   <symbol id="axi-folder-open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
-    <path d="M2.5 20.5 L2.5 4.5 L8.5 4.5 L11.5 7.5 L19.5 7.5 L19.5 12.5"/>
-    <path d="M10.5 12.5 L22.5 12.5 L14.5 20.5 L2.5 20.5 Z"/>
+    <path d="M3.5 18.5 L3.5 4.5 L8.5 4.5 L11.5 7.5 L19.5 7.5 L19.5 11.5"/>
+    <path d="M11.5 11.5 L19.5 11.5 L12.5 18.5 L4.5 18.5 Z"/>
   </symbol>
   <symbol id="axi-info" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
     <path d="M3.5 3.5 L20.5 3.5 L20.5 20.5 L3.5 20.5 Z"/>
@@ -108,15 +119,26 @@
     <path d="M13.5 6.5 L16.5 3.5 L20.5 7.5 L17.5 10.5"/>
     <path d="M10.5 17.5 L7.5 20.5 L3.5 16.5 L6.5 13.5"/>
   </symbol>
+  <symbol id="axi-loader-circle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <path d="M12 3.5 L3.5 3.5 L3.5 20.5 L20.5 20.5 L20.5 12"/>
+  </symbol>
   <symbol id="axi-lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
     <path d="M4.5 11.5 L19.5 11.5 L19.5 21.5 L4.5 21.5 Z"/>
     <path d="M8.5 11.5 L8.5 6.5 L15.5 6.5 L15.5 11.5"/>
   </symbol>
+  <symbol id="axi-maximize-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <path d="M14.5 3.5 L20.5 3.5 L20.5 9.5"/>
+    <path d="M9.5 20.5 L3.5 20.5 L3.5 14.5"/>
+    <path d="M20.5 3.5 L3.5 20.5"/>
+  </symbol>
   <symbol id="axi-menu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
     <path d="M3.5 5.5 L20.5 5.5"/>
     <path d="M3.5 12 L20.5 12"/>
     <path d="M3.5 18.5 L20.5 18.5"/>
   </symbol>
+  <symbol id="axi-message-square" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <path d="M3.5 4.5 L20.5 4.5 L20.5 16.5 L9.5 16.5 L6.5 19.5 L6.5 16.5 L3.5 16.5 Z"/>
+  </symbol>
   <symbol id="axi-minus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
     <path d="M3.5 12 L20.5 12"/>
   </symbol>
@@ -150,12 +172,26 @@
     <path d="M9.5 3.5 L15.5 9.5 L9.5 15.5 L3.5 9.5 Z"/>
     <path d="M13.5 13.5 L20.5 20.5"/>
   </symbol>
+  <symbol id="axi-settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <path d="M5.5 5.5 L10.5 5.5 L10.5 2.5 L13.5 2.5 L13.5 5.5 L18.5 5.5 L18.5 10.5 L21.5 10.5 L21.5 13.5 L18.5 13.5 L18.5 18.5 L13.5 18.5 L13.5 21.5 L10.5 21.5 L10.5 18.5 L5.5 18.5 L5.5 13.5 L2.5 13.5 L2.5 10.5 L5.5 10.5 Z"/>
+    <path d="M12 10 L14 12 L12 14 L10 12 Z" fill="currentColor" stroke="none"/>
+  </symbol>
   <symbol id="axi-settings-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
     <path d="M3.5 8.5 L20.5 8.5"/>
     <path d="M3.5 15.5 L20.5 15.5"/>
     <path d="M9.5 5.5 L12.5 8.5 L9.5 11.5 L6.5 8.5 Z"/>
     <path d="M15.5 12.5 L18.5 15.5 L15.5 18.5 L12.5 15.5 Z"/>
   </symbol>
+  <symbol id="axi-share-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <path d="M8 10 L10 12 L8 14 L6 12 Z"/>
+    <path d="M15.5 2.5 L17.5 4.5 L15.5 6.5 L13.5 4.5 Z"/>
+    <path d="M15.5 17.5 L17.5 19.5 L15.5 21.5 L13.5 19.5 Z"/>
+    <path d="M10 10 L13.5 6.5"/>
+    <path d="M10 14 L13.5 17.5"/>
+  </symbol>
+  <symbol id="axi-shield" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <path d="M5.5 3.5 L18.5 3.5 L18.5 14.5 L12 21 L5.5 14.5 Z"/>
+  </symbol>
   <symbol id="axi-skip-forward" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
     <path d="M6.5 5.5 L13 12 L6.5 18.5 Z"/>
     <path d="M17.5 5.5 L17.5 18.5"/>
@@ -163,6 +199,12 @@
   <symbol id="axi-square" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
     <path d="M4.5 4.5 L19.5 4.5 L19.5 19.5 L4.5 19.5 Z"/>
   </symbol>
+  <symbol id="axi-swords" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <path d="M3.5 6.5 L16.5 19.5"/>
+    <path d="M20.5 6.5 L7.5 19.5"/>
+    <path d="M12.5 18.5 L15.5 15.5"/>
+    <path d="M8.5 15.5 L11.5 18.5"/>
+  </symbol>
   <symbol id="axi-tag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
     <path d="M2.5 2.5 L13.5 2.5 L21.5 10.5 L10.5 21.5 L2.5 13.5 Z"/>
     <path d="M6.5 4.5 L8.5 6.5 L6.5 8.5 L4.5 6.5 Z"/>
@@ -192,7 +234,7 @@
     <path d="M17 14.5 L19.5 14.5 L22.5 17.5 L22.5 20.5"/>
   </symbol>
   <symbol id="axi-volume-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
-    <path d="M2.5 9.5 L6.5 9.5 L12.5 3.5 L12.5 20.5 L6.5 14.5 L2.5 14.5 Z"/>
+    <path d="M2.5 9.5 L7.5 9.5 L12.5 4.5 L12.5 19.5 L7.5 14.5 L2.5 14.5 Z"/>
     <path d="M16.5 8.5 L16.5 15.5"/>
     <path d="M20.5 5.5 L20.5 18.5"/>
   </symbol>
@@ -200,4 +242,37 @@
     <path d="M5.5 5.5 L18.5 18.5"/>
     <path d="M18.5 5.5 L5.5 18.5"/>
   </symbol>
+  <symbol id="axi-alert-circle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <use href="#axi-circle-alert"/>
+  </symbol>
+  <symbol id="axi-alert-triangle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <use href="#axi-circle-alert"/>
+  </symbol>
+  <symbol id="axi-check-circle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <use href="#axi-circle-check"/>
+  </symbol>
+  <symbol id="axi-check-circle-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <use href="#axi-circle-check"/>
+  </symbol>
+  <symbol id="axi-circle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <use href="#axi-square"/>
+  </symbol>
+  <symbol id="axi-edit-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <use href="#axi-pencil"/>
+  </symbol>
+  <symbol id="axi-help-circle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <use href="#axi-circle-help"/>
+  </symbol>
+  <symbol id="axi-loader-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <use href="#axi-loader-circle"/>
+  </symbol>
+  <symbol id="axi-square-pen" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <use href="#axi-pencil"/>
+  </symbol>
+  <symbol id="axi-triangle-alert" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <use href="#axi-circle-alert"/>
+  </symbol>
+  <symbol id="axi-x-circle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+    <use href="#axi-circle-x"/>
+  </symbol>
 </svg>

package/dist/icons/swords.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+<path d="M3.5 6.5 L16.5 19.5"/>
+  <path d="M20.5 6.5 L7.5 19.5"/>
+  <path d="M12.5 18.5 L15.5 15.5"/>
+  <path d="M8.5 15.5 L11.5 18.5"/>
+</svg>

package/dist/icons/volume-2.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
-<path d="M2.5 9.5 L6.5 9.5 L12.5 3.5 L12.5 20.5 L6.5 14.5 L2.5 14.5 Z"/>
+<path d="M2.5 9.5 L7.5 9.5 L12.5 4.5 L12.5 19.5 L7.5 14.5 L2.5 14.5 Z"/>
   <path d="M16.5 8.5 L16.5 15.5"/>
   <path d="M20.5 5.5 L20.5 18.5"/>
 </svg>

package/icons/activity.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+  <path d="M2.5 12 L6 12 L9.5 15.5 L15.5 9.5 L18 12 L21.5 12"/>
+</svg>

package/icons/circle-help.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+  <path d="M8.5 1.5 L15.5 1.5 L22.5 8.5 L22.5 15.5 L15.5 22.5 L8.5 22.5 L1.5 15.5 L1.5 8.5 Z"/>
+  <path d="M7 9 L8.5 7.5 L14.5 7.5 L14.5 11.5 L12 11.5 L12 14.5"/>
+  <path d="M12 17.5 L12 19"/>
+</svg>

package/icons/crown.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+  <path d="M3.5 8.5 L7.5 12.5 L12 8 L16.5 12.5 L20.5 8.5 L20.5 17.5 L3.5 17.5 Z"/>
+</svg>

package/icons/filter.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
-  <path d="M2.5 4.5 L21.5 4.5 L13.5 12.5 L13.5 19.5 L10.5 19.5 L10.5 12.5 Z"/>
+  <path d="M4.5 4.5 L19.5 4.5 L13.5 10.5 L13.5 19.5 L10.5 19.5 L10.5 10.5 Z"/>
 </svg>

package/icons/folder-open.svg

@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
-  <path d="M2.5 20.5 L2.5 4.5 L8.5 4.5 L11.5 7.5 L19.5 7.5 L19.5 12.5"/>
-  <path d="M10.5 12.5 L22.5 12.5 L14.5 20.5 L2.5 20.5 Z"/>
+  <path d="M3.5 18.5 L3.5 4.5 L8.5 4.5 L11.5 7.5 L19.5 7.5 L19.5 11.5"/>
+  <path d="M11.5 11.5 L19.5 11.5 L12.5 18.5 L4.5 18.5 Z"/>
 </svg>

package/icons/loader-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+  <path d="M12 3.5 L3.5 3.5 L3.5 20.5 L20.5 20.5 L20.5 12"/>
+</svg>

package/icons/maximize-2.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+  <path d="M14.5 3.5 L20.5 3.5 L20.5 9.5"/>
+  <path d="M9.5 20.5 L3.5 20.5 L3.5 14.5"/>
+  <path d="M20.5 3.5 L3.5 20.5"/>
+</svg>

package/icons/message-square.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+  <path d="M3.5 4.5 L20.5 4.5 L20.5 16.5 L9.5 16.5 L6.5 19.5 L6.5 16.5 L3.5 16.5 Z"/>
+</svg>

package/icons/settings.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+  <path d="M5.5 5.5 L10.5 5.5 L10.5 2.5 L13.5 2.5 L13.5 5.5 L18.5 5.5 L18.5 10.5 L21.5 10.5 L21.5 13.5 L18.5 13.5 L18.5 18.5 L13.5 18.5 L13.5 21.5 L10.5 21.5 L10.5 18.5 L5.5 18.5 L5.5 13.5 L2.5 13.5 L2.5 10.5 L5.5 10.5 Z"/>
+  <path d="M12 10 L14 12 L12 14 L10 12 Z" fill="currentColor" stroke="none"/>
+</svg>

package/icons/share-2.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+  <path d="M8 10 L10 12 L8 14 L6 12 Z"/>
+  <path d="M15.5 2.5 L17.5 4.5 L15.5 6.5 L13.5 4.5 Z"/>
+  <path d="M15.5 17.5 L17.5 19.5 L15.5 21.5 L13.5 19.5 Z"/>
+  <path d="M10 10 L13.5 6.5"/>
+  <path d="M10 14 L13.5 17.5"/>
+</svg>

package/icons/shield.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+  <path d="M5.5 3.5 L18.5 3.5 L18.5 14.5 L12 21 L5.5 14.5 Z"/>
+</svg>

package/icons/swords.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
+  <path d="M3.5 6.5 L16.5 19.5"/>
+  <path d="M20.5 6.5 L7.5 19.5"/>
+  <path d="M12.5 18.5 L15.5 15.5"/>
+  <path d="M8.5 15.5 L11.5 18.5"/>
+</svg>

package/icons/volume-2.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter">
-  <path d="M2.5 9.5 L6.5 9.5 L12.5 3.5 L12.5 20.5 L6.5 14.5 L2.5 14.5 Z"/>
+  <path d="M2.5 9.5 L7.5 9.5 L12.5 4.5 L12.5 19.5 L7.5 14.5 L2.5 14.5 Z"/>
   <path d="M16.5 8.5 L16.5 15.5"/>
   <path d="M20.5 5.5 L20.5 18.5"/>
 </svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiapps/axi-design",
-  "version": "1.14.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