@axiapps/axi-design 1.46.0 → 1.48.0

package/dist/axi.css

@@ -727,6 +727,152 @@ button.axi-panel--tile:hover,
 .axi-btn--xs   { --axi-btn-pad: 5px 9px;  --axi-btn-size: 11px; }
 .axi-btn--icon { --axi-btn-pad: 7px; }
 
+/* ---------- split button ---------- */
+/* One control with two targets: a primary action and a disclosure half that
+   opens a menu of its variants. The name is `.axi-btn-split` and not
+   `.axi-split` because that one is already the split *pane* in
+   src/layout.css - a pane and a button are not the same noun, and the
+   language only gets one of them per name.
+
+   The whole component exists because a consumer hand-wrote it and got the
+   radius wrong, which was not carelessness: a split button is the one place
+   where a corner is sometimes square and sometimes the surface's, so it is
+   the one place where a literal gets written. That consumer's control was
+   rounded at 10px on all three surfaces, correct on glass and wrong on the
+   other two, while every ordinary .axi-btn beside it followed
+   --axi-radius-sm. A joined control is not hard, it is just impossible to
+   get right once per app.
+
+   The requirement the consumer stated is the one the rules below are built
+   to: it has to feel like one button on all styles. Not two buttons placed
+   carefully - one control that happens to have a seam. Everything here
+   follows from that, and the three surfaces disagree about enough
+   (--axi-border-control is 3px on axi and 1px on flat and glass,
+   --axi-shadow-control is a hard offset block on axi and a soft drop
+   elsewhere) that "looks joined" had to be true by construction rather than
+   by tuning. */
+.axi-btn-split {
+  position: relative;
+  display: inline-flex;
+  /* stretch, not center: the two halves hold different content - a word and a
+     glyph - so content-sized heights drift apart by a pixel or two and the
+     seam stops being straight. */
+  align-items: stretch;
+  /* The wrapper moves and the halves do not, which is what makes the hover a
+     property of the control rather than of whichever half the cursor found. */
+  transition: transform .1s;
+}
+/* Corners: square at the seam, the surface's radius on the outside. Logical
+   properties rather than the `border-radius: 0 10px 10px 0` shorthand, so an
+   RTL consumer gets a control joined on the correct side without restating
+   anything - and so that each corner is set exactly once. The shorthand is
+   how the hand-written version ended up needing a comment explaining that
+   the rule above it had already squared both right corners. */
+.axi-btn-split > .axi-btn { border-radius: 0; }
+.axi-btn-split > .axi-btn:first-child {
+  border-start-start-radius: var(--axi-radius-sm);
+  border-end-start-radius: var(--axi-radius-sm);
+}
+.axi-btn-split > .axi-btn:last-child {
+  border-start-end-radius: var(--axi-radius-sm);
+  border-end-end-radius: var(--axi-radius-sm);
+}
+/* The seam is one shared edge, not a gap and not a drawn line. Pulling the
+   second half back by the control border width lands its left border exactly
+   on the first half's right border, so the two become a single stroke at the
+   language's own weight, in the language's own colour, on every surface and
+   under every ink. A 1px margin instead - which is what the hand-written
+   version used - puts two borders and a sliver of background between the
+   halves: 7px of edge on the default surface where the border is 3px, which
+   is why that control read as two buttons touching.
+
+   Negative margin and not `border-inline-start: 0`, because dropping the
+   border would make the toggle one border-width shorter than its sibling and
+   the stretch above would have to fight it. */
+.axi-btn-split > .axi-btn + .axi-btn {
+  margin-inline-start: calc(var(--axi-border-control) * -1);
+}
+/* A filled half needs the seam drawn in the ink that sits ON the fill, not in
+   the line that sits around it. --axi-ink-line is opaque near-black on the
+   main theme, where it reads as a stroke against anything; on flat and glass
+   it is a light translucent edge - rgba(255,255,255,.10) and
+   rgba(180,200,255,.16) - chosen to catch light against a dark surface, which
+   is every other place the language draws it. Laid across two bright accent
+   fields it is not faint, it is the wrong direction: a lightener on a light
+   fill can never resolve into an edge, so the shared stroke was there and
+   simply could not be seen, and the control read as one undivided lozenge.
+
+   --axi-accent-ink is the language's answer to "what reads on top of the
+   accent" - it is what the label is already drawn in - and it is near-black on
+   all three surfaces. On the main theme it is literally --axi-ink-line, so
+   this changes nothing there and the 3px seam is the same stroke it was.
+
+   Either half being filled is enough: the stroke you see is the second half's
+   border, and a dark hairline reads against the plain fill on the other side
+   of it just as well. */
+.axi-btn-split > .axi-btn--primary + .axi-btn,
+.axi-btn-split > .axi-btn + .axi-btn--primary {
+  border-inline-start-color: var(--axi-accent-ink);
+}
+/* Neither half casts a shadow across the seam. The surfaces that spell their
+   relief as a soft drop give every control a blur that reaches outward on all
+   four sides - glass's is `0 6px 16px`, so it extends roughly 8px sideways -
+   and a half of a joined control has a sibling 8px away rather than the page.
+   The toggle paints after the label half, so its leftward bleed lands on top
+   of its neighbour as a dark vertical band just inside the seam, which is the
+   second way this control could read as two buttons rather than one. The
+   label half bleeds the other way for the same reason, and shows wherever the
+   toggle's fill is translucent - which on glass is every tone but the ink'd
+   ones.
+
+   So each half clips its own shadow flush with the edge it shares, and leaves
+   the other three sides alone to drop as far as the surface says. The clip is
+   a no-op on the main theme, whose block is a hard offset that only ever
+   travels right and down, and nearly one on flat; it does its work exactly
+   where the blur is wide enough to cross.
+
+   -100% is the box's own width or height, which is always more slack than a
+   control-sized blur needs, and stays right if a surface ever spells a bigger
+   one - a literal here would be a number to maintain.
+
+   `inset()` is physical, so RTL restates the pair rather than inheriting a
+   clip on the wrong edges; this is the one place in the component where the
+   logical properties above cannot carry the direction.
+
+   Not while focused: the focus ring is an `outline` drawn 2px outside the box,
+   so a clip flush with that edge would cut it in half on the seam side. A
+   keyboard user seeing a complete ring is worth more than the band. */
+.axi-btn-split > .axi-btn:where(:not(:focus-visible)):first-child { clip-path: inset(-100% 0 -100% -100%); }
+.axi-btn-split > .axi-btn:where(:not(:focus-visible)):last-child { clip-path: inset(-100% -100% -100% 0); }
+.axi-btn-split:dir(rtl) > .axi-btn:where(:not(:focus-visible)):first-child { clip-path: inset(-100% -100% -100% 0); }
+.axi-btn-split:dir(rtl) > .axi-btn:where(:not(:focus-visible)):last-child { clip-path: inset(-100% 0 -100% -100%); }
+/* Hover is the whole control's. The generic .axi-btn hover translates the
+   button and deepens its block; left alone, that moves one half of a joined
+   control two pixels up and away from the other and tears the seam open -
+   the most visible way this component could fail at being one button.
+   So: the translate moves to the wrapper, and both halves take the hover
+   block whichever one the cursor is over.
+
+   What stays per-half is colour. The generic hover's dim-to-plain brighten
+   still lands only on the half under the cursor, which is the whole reason a
+   split button has two targets - the control lifts as one, and the reader can
+   still see which action they are about to take.
+
+   Specificity: these two rules weigh the same as `.axi-btn--primary:hover`
+   and win on source order, which is the ordering this section depends on -
+   it must stay below the button section it adjusts. The `:where()` keeps the
+   wrapper's hover from spending a point, so the ink layer still out-ranks
+   everything here, per rule 6. */
+.axi-btn-split:where(:hover) { transform: translate(-2px, -2px); }
+.axi-btn-split > .axi-btn:where(:hover) { transform: none; }
+.axi-btn-split:where(:hover) > .axi-btn { box-shadow: var(--axi-shadow-control); }
+.axi-btn-split:where(:hover) > .axi-btn--primary { box-shadow: var(--axi-shadow-control-hover); }
+/* The disclosure half. Vertical padding is zero because the stretch above
+   already gave it the label half's height, and 20px sides around a single
+   chevron is the wide-rectangle failure --icon exists to fix. The gap is for
+   the consumers that put a status dot beside the chevron. */
+.axi-btn-split__toggle { --axi-btn-pad: 0 11px; gap: 5px; }
+
 /* ---------- pill ---------- */
 /* A filter toggle. Its pressed state fills with whatever colour the consumer
    has put on it, so the control reads as the thing it filters to rather than
@@ -2516,6 +2662,12 @@ textarea.axi-input {
   display: flex; align-items: center; gap: 12px;
   height: 38px; padding-left: 14px;
   background: var(--axi-ground-deep);
+  /* The chrome takes the surface filter for the same reason a panel does: on a
+     theme that makes its surfaces translucent, the one strip a reader never
+     scrolls away is the one that has to agree. --axi-surface-filter is none on
+     every opaque surface, so this is inert there - the same inert-by-default
+     shape the panels already use. */
+  backdrop-filter: var(--axi-surface-filter);
   border-bottom: var(--axi-border-control) solid var(--axi-ink-line);
   font: var(--axi-t-micro);
   letter-spacing: var(--axi-ls-micro);
@@ -2540,6 +2692,13 @@ textarea.axi-input {
 /* Close is the one destructive control in the chrome, and the one place a
    status ink belongs in a titlebar. */
 .axi-titlebar__btns :where(button:last-child:hover) { background: var(--axi-danger); color: var(--axi-ink-on-fill); }
+/* The page-wide ring sits 2px OUTSIDE its element, which a window button
+   cannot afford: it is flush to the top of the frame and flush to its
+   neighbours, so an outward ring spills past the window edge and reads as a
+   loud accent box across the corner of the chrome. Pull it inward, the same
+   way a picker option and a select option already do inside their own tight
+   containers. */
+.axi-titlebar__btns :where(button:focus-visible) { outline-offset: -3px; }
 /* The scrolling region under the chrome. */
 .axi-window__body { flex: 1; overflow-y: auto; }
 

package/dist/themes/flat.css

@@ -17,6 +17,10 @@
   --axi-text-dim: #8b929e;
   --axi-text-faint: #5d6577;
   --axi-scrim: rgba(4, 5, 8, .72);
+  --axi-offset-panel: 0;
+  --axi-offset-control: 0;
+  --axi-offset-panel-hover: 0;
+  --axi-offset-control-hover: 0;
   --axi-shadow-panel: 0 2px 8px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
   --axi-shadow-control: 0 1px 4px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .045);
   --axi-shadow-panel-hover: 0 6px 18px rgba(0, 0, 0, .5), 0 2px 5px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .07);

package/dist/themes/glass.css

@@ -13,7 +13,7 @@
   --axi-surface-filter: blur(18px) saturate(140%);
   --axi-ink-line: rgba(180, 200, 255, .16);
   --axi-rule: rgba(180, 200, 255, .14);
-  --axi-ground-deep: #0c0e12;
+  --axi-ground-deep: rgba(12, 14, 18, .72);
   --axi-well-fill: rgba(6, 8, 14, .32);
   --axi-accent-ink: #0c0e12;
   --axi-ink-on-fill: #0c0e12;
@@ -21,6 +21,10 @@
   --axi-text-dim: #b3bdd0;
   --axi-text-faint: #7f8aa0;
   --axi-scrim: rgba(4, 6, 12, .66);
+  --axi-offset-panel: 0;
+  --axi-offset-control: 0;
+  --axi-offset-panel-hover: 0;
+  --axi-offset-control-hover: 0;
   --axi-shadow-panel: 0 18px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .14);
   --axi-shadow-control: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
   --axi-shadow-panel-hover: 0 26px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .2);

package/docs/RULES.md

@@ -830,10 +830,19 @@ What is **not** a theme's to restate, and each for its own reason:
   companions are not on this list: `--axi-accent-ink` and `--axi-ink-on-fill`
   are the colour a word is written in when it sits on a fill, and a theme that
   lightens the outline has to be able to hold them dark.
-- **The offset scale.** `--axi-offset-*` is what the main theme's block is
-  composed *from*. A theme restates the composed `--axi-shadow-*` wholesale or
-  leaves it; retuning the offsets underneath would leave the two spellings of
-  "the block" disagreeing.
+- **The offset scale, except to switch it off.** `--axi-offset-*` is what the
+  main theme's block is composed *from*, and retuning it underneath a restated
+  `--axi-shadow-*` would leave the two spellings of "the block" disagreeing.
+  A theme may set the offsets to `0` and may do nothing else to them. Zero is
+  not a retune — it is the same sentence the restated `--axi-shadow-*` is
+  already saying. This started out as a flat prohibition and shipped a bug:
+  the tokens are public, consumers compose blocks from them directly rather
+  than asking for `--axi-shadow-panel`, and a theme whose relief is a soft drop
+  was leaving a 6px near-black step standing behind every one of those cards.
+  On a square corner it read as a stray backdrop; on a rounded one it read as
+  broken rounding. A consumer still composing from the offsets now gets no
+  relief on a theme rather than the wrong one, which is a visible prompt to ask
+  for the composed block instead.
 - **The measure.** `--axi-page`, `--axi-gutter`. Where the text wraps is not a
   look, and moving it would reflow every page rather than repaint it.
 - **The type.** `--axi-sans`, `--axi-mono`, `--axi-t-*`, `--axi-ls-*`. The same

package/package.json

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

package/src/primitives.css

@@ -323,6 +323,152 @@ button.axi-panel--tile:hover,
 .axi-btn--xs   { --axi-btn-pad: 5px 9px;  --axi-btn-size: 11px; }
 .axi-btn--icon { --axi-btn-pad: 7px; }
 
+/* ---------- split button ---------- */
+/* One control with two targets: a primary action and a disclosure half that
+   opens a menu of its variants. The name is `.axi-btn-split` and not
+   `.axi-split` because that one is already the split *pane* in
+   src/layout.css - a pane and a button are not the same noun, and the
+   language only gets one of them per name.
+
+   The whole component exists because a consumer hand-wrote it and got the
+   radius wrong, which was not carelessness: a split button is the one place
+   where a corner is sometimes square and sometimes the surface's, so it is
+   the one place where a literal gets written. That consumer's control was
+   rounded at 10px on all three surfaces, correct on glass and wrong on the
+   other two, while every ordinary .axi-btn beside it followed
+   --axi-radius-sm. A joined control is not hard, it is just impossible to
+   get right once per app.
+
+   The requirement the consumer stated is the one the rules below are built
+   to: it has to feel like one button on all styles. Not two buttons placed
+   carefully - one control that happens to have a seam. Everything here
+   follows from that, and the three surfaces disagree about enough
+   (--axi-border-control is 3px on axi and 1px on flat and glass,
+   --axi-shadow-control is a hard offset block on axi and a soft drop
+   elsewhere) that "looks joined" had to be true by construction rather than
+   by tuning. */
+.axi-btn-split {
+  position: relative;
+  display: inline-flex;
+  /* stretch, not center: the two halves hold different content - a word and a
+     glyph - so content-sized heights drift apart by a pixel or two and the
+     seam stops being straight. */
+  align-items: stretch;
+  /* The wrapper moves and the halves do not, which is what makes the hover a
+     property of the control rather than of whichever half the cursor found. */
+  transition: transform .1s;
+}
+/* Corners: square at the seam, the surface's radius on the outside. Logical
+   properties rather than the `border-radius: 0 10px 10px 0` shorthand, so an
+   RTL consumer gets a control joined on the correct side without restating
+   anything - and so that each corner is set exactly once. The shorthand is
+   how the hand-written version ended up needing a comment explaining that
+   the rule above it had already squared both right corners. */
+.axi-btn-split > .axi-btn { border-radius: 0; }
+.axi-btn-split > .axi-btn:first-child {
+  border-start-start-radius: var(--axi-radius-sm);
+  border-end-start-radius: var(--axi-radius-sm);
+}
+.axi-btn-split > .axi-btn:last-child {
+  border-start-end-radius: var(--axi-radius-sm);
+  border-end-end-radius: var(--axi-radius-sm);
+}
+/* The seam is one shared edge, not a gap and not a drawn line. Pulling the
+   second half back by the control border width lands its left border exactly
+   on the first half's right border, so the two become a single stroke at the
+   language's own weight, in the language's own colour, on every surface and
+   under every ink. A 1px margin instead - which is what the hand-written
+   version used - puts two borders and a sliver of background between the
+   halves: 7px of edge on the default surface where the border is 3px, which
+   is why that control read as two buttons touching.
+
+   Negative margin and not `border-inline-start: 0`, because dropping the
+   border would make the toggle one border-width shorter than its sibling and
+   the stretch above would have to fight it. */
+.axi-btn-split > .axi-btn + .axi-btn {
+  margin-inline-start: calc(var(--axi-border-control) * -1);
+}
+/* A filled half needs the seam drawn in the ink that sits ON the fill, not in
+   the line that sits around it. --axi-ink-line is opaque near-black on the
+   main theme, where it reads as a stroke against anything; on flat and glass
+   it is a light translucent edge - rgba(255,255,255,.10) and
+   rgba(180,200,255,.16) - chosen to catch light against a dark surface, which
+   is every other place the language draws it. Laid across two bright accent
+   fields it is not faint, it is the wrong direction: a lightener on a light
+   fill can never resolve into an edge, so the shared stroke was there and
+   simply could not be seen, and the control read as one undivided lozenge.
+
+   --axi-accent-ink is the language's answer to "what reads on top of the
+   accent" - it is what the label is already drawn in - and it is near-black on
+   all three surfaces. On the main theme it is literally --axi-ink-line, so
+   this changes nothing there and the 3px seam is the same stroke it was.
+
+   Either half being filled is enough: the stroke you see is the second half's
+   border, and a dark hairline reads against the plain fill on the other side
+   of it just as well. */
+.axi-btn-split > .axi-btn--primary + .axi-btn,
+.axi-btn-split > .axi-btn + .axi-btn--primary {
+  border-inline-start-color: var(--axi-accent-ink);
+}
+/* Neither half casts a shadow across the seam. The surfaces that spell their
+   relief as a soft drop give every control a blur that reaches outward on all
+   four sides - glass's is `0 6px 16px`, so it extends roughly 8px sideways -
+   and a half of a joined control has a sibling 8px away rather than the page.
+   The toggle paints after the label half, so its leftward bleed lands on top
+   of its neighbour as a dark vertical band just inside the seam, which is the
+   second way this control could read as two buttons rather than one. The
+   label half bleeds the other way for the same reason, and shows wherever the
+   toggle's fill is translucent - which on glass is every tone but the ink'd
+   ones.
+
+   So each half clips its own shadow flush with the edge it shares, and leaves
+   the other three sides alone to drop as far as the surface says. The clip is
+   a no-op on the main theme, whose block is a hard offset that only ever
+   travels right and down, and nearly one on flat; it does its work exactly
+   where the blur is wide enough to cross.
+
+   -100% is the box's own width or height, which is always more slack than a
+   control-sized blur needs, and stays right if a surface ever spells a bigger
+   one - a literal here would be a number to maintain.
+
+   `inset()` is physical, so RTL restates the pair rather than inheriting a
+   clip on the wrong edges; this is the one place in the component where the
+   logical properties above cannot carry the direction.
+
+   Not while focused: the focus ring is an `outline` drawn 2px outside the box,
+   so a clip flush with that edge would cut it in half on the seam side. A
+   keyboard user seeing a complete ring is worth more than the band. */
+.axi-btn-split > .axi-btn:where(:not(:focus-visible)):first-child { clip-path: inset(-100% 0 -100% -100%); }
+.axi-btn-split > .axi-btn:where(:not(:focus-visible)):last-child { clip-path: inset(-100% -100% -100% 0); }
+.axi-btn-split:dir(rtl) > .axi-btn:where(:not(:focus-visible)):first-child { clip-path: inset(-100% -100% -100% 0); }
+.axi-btn-split:dir(rtl) > .axi-btn:where(:not(:focus-visible)):last-child { clip-path: inset(-100% 0 -100% -100%); }
+/* Hover is the whole control's. The generic .axi-btn hover translates the
+   button and deepens its block; left alone, that moves one half of a joined
+   control two pixels up and away from the other and tears the seam open -
+   the most visible way this component could fail at being one button.
+   So: the translate moves to the wrapper, and both halves take the hover
+   block whichever one the cursor is over.
+
+   What stays per-half is colour. The generic hover's dim-to-plain brighten
+   still lands only on the half under the cursor, which is the whole reason a
+   split button has two targets - the control lifts as one, and the reader can
+   still see which action they are about to take.
+
+   Specificity: these two rules weigh the same as `.axi-btn--primary:hover`
+   and win on source order, which is the ordering this section depends on -
+   it must stay below the button section it adjusts. The `:where()` keeps the
+   wrapper's hover from spending a point, so the ink layer still out-ranks
+   everything here, per rule 6. */
+.axi-btn-split:where(:hover) { transform: translate(-2px, -2px); }
+.axi-btn-split > .axi-btn:where(:hover) { transform: none; }
+.axi-btn-split:where(:hover) > .axi-btn { box-shadow: var(--axi-shadow-control); }
+.axi-btn-split:where(:hover) > .axi-btn--primary { box-shadow: var(--axi-shadow-control-hover); }
+/* The disclosure half. Vertical padding is zero because the stretch above
+   already gave it the label half's height, and 20px sides around a single
+   chevron is the wide-rectangle failure --icon exists to fix. The gap is for
+   the consumers that put a status dot beside the chevron. */
+.axi-btn-split__toggle { --axi-btn-pad: 0 11px; gap: 5px; }
+
 /* ---------- pill ---------- */
 /* A filter toggle. Its pressed state fills with whatever colour the consumer
    has put on it, so the control reads as the thing it filters to rather than

package/src/shells.css

@@ -947,6 +947,12 @@
   display: flex; align-items: center; gap: 12px;
   height: 38px; padding-left: 14px;
   background: var(--axi-ground-deep);
+  /* The chrome takes the surface filter for the same reason a panel does: on a
+     theme that makes its surfaces translucent, the one strip a reader never
+     scrolls away is the one that has to agree. --axi-surface-filter is none on
+     every opaque surface, so this is inert there - the same inert-by-default
+     shape the panels already use. */
+  backdrop-filter: var(--axi-surface-filter);
   border-bottom: var(--axi-border-control) solid var(--axi-ink-line);
   font: var(--axi-t-micro);
   letter-spacing: var(--axi-ls-micro);
@@ -971,6 +977,13 @@
 /* Close is the one destructive control in the chrome, and the one place a
    status ink belongs in a titlebar. */
 .axi-titlebar__btns :where(button:last-child:hover) { background: var(--axi-danger); color: var(--axi-ink-on-fill); }
+/* The page-wide ring sits 2px OUTSIDE its element, which a window button
+   cannot afford: it is flush to the top of the frame and flush to its
+   neighbours, so an outward ring spills past the window edge and reads as a
+   loud accent box across the corner of the chrome. Pull it inward, the same
+   way a picker option and a select option already do inside their own tight
+   containers. */
+.axi-titlebar__btns :where(button:focus-visible) { outline-offset: -3px; }
 /* The scrolling region under the chrome. */
 .axi-window__body { flex: 1; overflow-y: auto; }