@jxsuite/ui 0.3.0 → 0.4.0

package/components/jx-action-button.json

@@ -55,7 +55,7 @@
       "type": "string",
       "default": "",
       "attribute": "icon",
-      "description": "The glyph, by its name in the kit's manifest. Empty for a text-only action button."
+      "description": "The glyph, by its name in the kit's manifest. Empty for a text-only action button, which the host reflects as data-no-icon so a sheet outside the element can tell the two apart: the icon PART is hidden while a glyph button is loading as well, the spinner having taken its place, so a compact group keyed on that span widened an icon segment by 4px for the length of a verb."
     },
     "mirror": {
       "type": "boolean",
@@ -96,7 +96,7 @@
       "type": "boolean",
       "default": true,
       "attribute": "quiet",
-      "description": "No fill and no border until hovered, which is what a toolbar wants. Off for a standalone tool button."
+      "description": "No fill and no border until hovered, which is what a toolbar wants. Off for a standalone tool button. It has no effect on a member of a compact jx-action-group, which draws the segmented frame itself; a row of quiet tools is a group with compact=false."
     },
     "emphasized": {
       "type": "boolean",
@@ -370,6 +370,7 @@
   "attributes": {
     "role": "${state.checked ? 'none' : null}",
     "data-size": "${state.size}",
+    "data-no-icon": "${state.icon ? null : ''}",
     "data-quiet": "${state.quiet ? '' : null}",
     "data-emphasized": "${state.emphasized ? '' : null}",
     "data-selected": "${state.selected || state.checked === 'true' ? '' : null}",
@@ -455,10 +456,11 @@
       "color": "var(--jx-accent-fg)"
     },
     "&[data-size=\"sm\"] > [part=\"control\"]": {
-      "$description": "The small action button is the kit's most packed control — Studio's toolbars, block action bar and inspector rows declare it some four hundred times — and it draws 4px under the kit's control height, which is the WCAG 2.2 SC 2.5.8 floor (ui.md §4.3). The `::before` is the hit area, jx-tab's close-button technique: an empty pseudo-element that reaches 2px past the drawn box on every side, so the region that accepts the pointer is exactly `--jx-control-h` square while the picture stays 20px. The inset is -3px and not -2px because an absolutely positioned box is offset from its containing block's PADDING edge, and this control draws a 1px border: the border width comes first, then half of the 4px the box is under (jx-tab's close button is borderless, so -4px was exact there). The control is already `position: relative` for the badge, so the pseudo-element needs nothing more. A 4px gap (jx-toolbar's) lets two extended neighbours abut; a compact jx-action-group packs its members touching, and its sheet zeroes the extension on that axis, because an extension over a neighbour's box would take the neighbour's clicks, and the criterion gives an overlapped strip to the target on top rather than to both; a default group's 2px gap leaves every member but the last at 22px on that axis, which ui.md §11 names as a non-claim. Held by target-size.test.ts and the conformance gate, both of which read the border and subtract it.",
+      "$description": "The small action button is the kit's most packed control — Studio's toolbars, block action bar and inspector rows declare it some four hundred times — and it draws 4px under the kit's control height, which is the WCAG 2.2 SC 2.5.8 floor (ui.md §4.3). The `::before` is the hit area, jx-tab's close-button technique: an empty pseudo-element that reaches 2px past the drawn box on every side, so the region that accepts the pointer is exactly `--jx-control-h` square while the picture stays 20px. The inset is -3px and not -2px because an absolutely positioned box is offset from its containing block's PADDING edge, and this control draws a 1px border: the border width comes first, then half of the 4px the box is under (jx-tab's close button is borderless, so -4px was exact there). The control is already `position: relative` for the badge, so the pseudo-element needs nothing more. A 4px gap (jx-toolbar's) lets two extended neighbours abut; a compact jx-action-group packs its members touching, and its sheet zeroes the extension on that axis, because an extension over a neighbour's box would take the neighbour's clicks, and the criterion gives an overlapped strip to the target on top rather than to both; a default group's 2px gap leaves every member but the last at 22px on that axis, which ui.md §11 names as a non-claim. Held by target-size.test.ts and the conformance gate, both of which read the border and subtract it. `contain: layout` is the other half of drawing the hit area OUTSIDE the button's own box, as it is on jx-button's small control: an absolutely positioned descendant still contributes to the SCROLLABLE overflow of the nearest ancestor whose `overflow` isn't `visible`, whether or not anything clips or paints it, so a small action button whose box touched a scrolling host's edge widened that host's scrollable region by 2px and drew a scrollbar over content that fit (Preferences · Keyboard's `Search by keystroke`, and the `Change` of a row whose title wraps, both did). The containment has a price, and it is the baseline: a layout-contained box exports none, so a flex or grid row aligned on `baseline` synthesises one from the button's bottom edge and drops the row's text about 6px onto it. A row that holds a small action button centres it (`align-items: center`), which is what the host's `vertical-align: middle` already says for inline layout. The containment also makes the control a stacking context and the containing block of anything fixed inside it; neither moves a pixel here, because the badge is already positioned against the control, nothing fixed lives inside it, and a compact group's later member still paints over an earlier one, both painting in the positioned layer in tree order.",
       "minWidth": "calc(var(--jx-control-h) - 4px)",
       "minHeight": "calc(var(--jx-control-h) - 4px)",
       "padding": "0 var(--jx-space-1)",
+      "contain": "layout",
       "::before": {
         "content": "\"\"",
         "position": "absolute",

package/components/jx-action-group.json

@@ -14,7 +14,7 @@
       "type": "boolean",
       "default": true,
       "attribute": "compact",
-      "description": "Draw the children joined into one segmented control, sharing their inner borders and rounding only the outer corners. Off leaves them as separate buttons with a gap. This is the one thing no button can do about itself: joining N of them needs selectors about a child's position among its siblings. The seam is a DIRECT-CHILD rule: it reaches the buttons the group itself owns — a slot leaves no node, so a distributed child is one — and so a nested group keeps its own compact, and a button a surface wraps in a div of its own is roved but not joined."
+      "description": "Draw the children joined into one segmented control, sharing their inner borders and rounding only the outer corners. The group draws every member's frame and fill itself, whatever the member's own quiet says: a strong border round an input fill, the selected member in the accent tint with an accent edge (the solid accent with emphasized), 6px of inline padding on a small member that shows text and no glyph, because the small size's 2px ran \"Edit\" into \"Design\", and muted ink on a disabled member, because fading it whole would fade its share of the shared frame. A member's quiet has no effect here. The control is one LINE — a segmented frame is written in tree order and no selector can find the ends of a wrapped line — so a row of choices that has to wrap is compact=false too. Off leaves them as separate buttons with a gap, each drawing itself, so a row of borderless tools is compact=false, never a compact group of quiet members. This is the one thing no button can do about itself: joining N of them needs selectors about a child's position among its siblings. The seam is a DIRECT-CHILD rule: it reaches the buttons the group itself owns — a slot leaves no node, so a distributed child is one — and so a nested group keeps its own compact, and a button a surface wraps in a div of its own is roved but not joined."
     },
     "label": {
       "type": "string",
@@ -83,7 +83,9 @@
       "alignItems": "stretch"
     },
     "&[data-compact]": {
-      "gap": "0"
+      "$description": "A segmented control is ONE line, and this is where it says so. Every seam rule below is written in TREE order — the -1px overlap on `+ jx-action-button`, the rounded ends on `:first-of-type` and `:last-of-type` — and CSS has no selector for the first or last item on a flex LINE, so a group that wrapped put the overlap on a line-start member (1px outside the group's own edge), left both line ends square, and abutted the two lines into a doubled 2px border. Nothing in a sheet can see a line break, so the group refuses one rather than drawing it badly. A row of choices that has to wrap is `compact: false`: there each member draws its own rounded frame and the gap comes back, so every line reads the same (Studio's Size and Features chips are that row).",
+      "gap": "0",
+      "flexWrap": "nowrap"
     },
     "&[data-compact] > jx-action-button > [part=\"control\"]": {
       "borderRadius": "0"
@@ -99,6 +101,10 @@
       "borderStartEndRadius": "var(--jx-radius-sm)",
       "borderEndEndRadius": "var(--jx-radius-sm)"
     },
+    "&[data-compact][data-orientation=\"vertical\"] > jx-action-button > [part=\"control\"]": {
+      "$description": "A vertical group stretches its member HOSTS to the widest one (`align-items: stretch` above), and a host is an inline-flex row whose control sits inside it at its own content width: so the segments' end edges stepped in and out down the column, one frame per label length, from the moment the group started drawing those frames. The control takes the whole host, as the zoom pod's label does for the same reason, and keeps the control's own centring.",
+      "flex": "1"
+    },
     "&[data-compact][data-orientation=\"vertical\"] > jx-action-button + jx-action-button > [part=\"control\"]": {
       "marginInlineStart": "0",
       "marginBlockStart": "-1px"
@@ -111,9 +117,44 @@
       "borderStartEndRadius": "0",
       "borderEndStartRadius": "var(--jx-radius-sm)"
     },
-    "&[data-compact] > jx-action-button > [part=\"control\"]:focus-visible": {
+    "&[data-compact] > jx-action-button:not([data-selected]) > [part=\"control\"]": {
+      "$description": "The frame is the group's, not the member's. Every seam rule above acts on a member's border, and jx-action-button is quiet by default (a transparent border and fill, which is what a toolbar wants), so the shared borders, the rounded ends and the -1px overlap all worked on borders nobody could see, and a compact group drew as a gap-less row of bare words: the Canvas view switch, the Style panel's Display row, Preferences' Theme, the zoom pod and every other group Studio converted from Spectrum, whose sp-action-button was NOT quiet by default, so the conversion dropped the frame without anybody writing it off. So the group draws its members whatever their quiet says, which is what ui.md §5.4 means by `compact` with `single` being the segmented control. This rule and the selected one below are mutually exclusive, so neither depends on sheet order against the member's own; at (0,4,1) under the scope handle each outranks the member's quiet and selected rules at (0,3,0) and quiet's hover at (0,4,0). The ink restates the member's resting colour at this specificity so that only the hover rule below, which leaves a disabled member alone, can raise it: the member's own hover is not gated on disabled, and a disabled segment brightening under the pointer reads as one that can act.",
+      "borderColor": "var(--jx-border-strong)",
+      "background": "var(--jx-bg-input)",
+      "color": "var(--jx-fg-dim)"
+    },
+    "&[data-compact] > jx-action-button:not([data-selected]) > [part=\"control\"]:hover:not(:disabled)": {
+      "$description": "The hover wash is LAYERED over the input fill rather than replacing it, as the member's own hover does. `--jx-hover-bg` is 6% of the ink over transparent, so on its own it shows whatever stands behind the group, and on the zoom pod's darkest background that came out a shade from the resting fill: a hover that did not read. As an image over the fill it is always the resting colour plus the wash, in both schemes.",
+      "backgroundColor": "var(--jx-bg-input)",
+      "backgroundImage": "linear-gradient(var(--jx-hover-bg), var(--jx-hover-bg))",
+      "color": "var(--jx-fg)"
+    },
+    "&[data-compact] > jx-action-button[data-selected] > [part=\"control\"]": {
+      "$description": "The chosen segment: the accent tint with an accent EDGE. The member's own selected state is a 15% tint and nothing else, which beside a bordered neighbour read as a faint wash rather than as the one that is on. Raised over both neighbours, so the accent edge shows on every side through the -1px overlap, and still under a focus ring. A hovered selected segment stays as it is: this outranks the member's quiet hover.",
+      "borderColor": "var(--jx-accent)",
+      "background": "var(--jx-accent-20)",
+      "color": "var(--jx-fg)",
       "zIndex": "1"
     },
+    "&[data-compact] > jx-action-button[data-selected][data-emphasized] > [part=\"control\"]": {
+      "$description": "The member's emphasized, kept: the solid accent, edge and all.",
+      "borderColor": "var(--jx-accent-solid)",
+      "background": "var(--jx-accent-solid)",
+      "color": "var(--jx-accent-fg)"
+    },
+    "&[data-compact] > jx-action-button > [part=\"control\"]:disabled": {
+      "$description": "A disabled segment dims its INK and not the frame. jx-action-button fades the whole control (`opacity: 0.5`), which is right where the border is the button's own; in a group the border is one member's share of a frame drawn across all of them, so half-fading it left the outer rectangle bright on one side of a seam and faint on the other — a control that reads as half-broken rather than as half-unavailable. Muted ink is a step below the resting dim, and it carries a selected segment too: the accent fill and edge stay, so the chosen one still reads as chosen while it cannot act. AFTER the selected rules on purpose, because it ties with them at (0,4,1) and has to win the ink.",
+      "opacity": "1",
+      "color": "var(--jx-fg-muted)"
+    },
+    "&[data-compact] > jx-action-button[data-size=\"sm\"][data-no-icon] > [part=\"control\"]": {
+      "$description": "A small member that shows no glyph is a text segment, and the small size's inline padding is 2px, which is right for a 20px glyph button and ran the words of a text row together (\"flex\" into \"grid\"). A text segment takes 6px: one step between --jx-space-2 and --jx-space-3, because the widest Style panel row measured 220px of its 256px at 4px and --jx-space-3 overflowed it. 6px costs that row 4px — `nowrap`, `wrap-reverse`, `normal` and `auto` are the only values css-meta leaves without a glyph, so no button row draws more than two text segments and the six-segment rows draw one. Keyed on the HOST's data-no-icon, not on a hidden icon part: the icon span is hidden while a glyph segment is `loading` too, since the spinner takes its place, so an icon segment grew 4px mid-verb and snapped back when it settled. Scoped to the group rather than made the small size's own, because some forty other small text buttons in Studio would widen with it.",
+      "paddingInline": "6px"
+    },
+    "&[data-compact] > jx-action-button > [part=\"control\"]:focus-visible": {
+      "$description": "Over everything, the selected segment's raised edge included, so a focus ring is never painted under a neighbour.",
+      "zIndex": "2"
+    },
     "&[data-compact] > jx-action-button[data-size=\"sm\"] > [part=\"control\"]::before": {
       "$description": "A small action button carries a `::before` that extends its hit area 2px past its drawn box on every side (an inset of -3px: the button's 1px border, then half the 4px it is under, because an absolutely positioned box is offset from the padding edge), so that a 20px picture accepts the pointer over the kit's 24px control height (WCAG 2.2 SC 2.5.8, ui.md §4.3). In a compact group the boxes TOUCH on the packed axis — no gap, and each border drawn over the last — so an extension there could reach nothing but the neighbour's own box, and the later sibling paints above the earlier one: the last 2px of every button but the last would activate the button after it. The criterion gives an overlapped area to the target on TOP, so the extension would buy the earlier button nothing and cost it a stolen strip. The default 2px gap is the other case: two extensions overlap by 2px there, the later member keeps the strip, and every small member but the last counts 22px on the packed axis, which is under the floor and which ui.md §11 names beside this one. The packed axis is therefore zeroed here — `0` is the padding edge, 1px inside the drawn border, and the button's own box accepts the pointer over that pixel — and the cross axis keeps its 2px past the drawn box, which reaches only the gap around the group: a compact group's small members are 24px tall and as wide as they draw, which ui.md §11 records as the one thing the technique cannot reach. The vertical variant swaps the axes, and its inline value is the button's own -3px for the same reason.",
       "insetInline": "0"
@@ -121,6 +162,15 @@
     "&[data-compact][data-orientation=\"vertical\"] > jx-action-button[data-size=\"sm\"] > [part=\"control\"]::before": {
       "insetInline": "-3px",
       "insetBlock": "0"
+    },
+    "@(forced-colors: active)": {
+      "&[data-compact] > jx-action-button[data-selected] > [part=\"control\"], &[data-compact] > jx-action-button[data-selected][data-emphasized] > [part=\"control\"]": {
+        "$description": "The chosen segment, redrawn. Forced colours replace every author colour with the user's palette, so the accent tint and the accent edge both collapse into the ones around them and the segmented control would say nothing about which segment is on. The system's own selection pair says it instead, as jx-switch does for its checked track. The emphasized selector is spelled out beside the plain one because a media condition adds no specificity: at (0,4,1) this block won `forced-color-adjust: none` and then LOST border, background and colour to the emphasized rule at (0,5,1), which painted the author's blue over the user's palette with adjustment switched off — the one combination where forced colours were worse than none.",
+        "forcedColorAdjust": "none",
+        "borderColor": "Highlight",
+        "background": "Highlight",
+        "color": "HighlightText"
+      }
     }
   },
   "children": [

package/components/jx-button.json

@@ -297,11 +297,12 @@
       }
     },
     "&[data-size=\"sm\"] > [part=\"control\"]": {
-      "$description": "A small button draws 4px under the kit's control height, and the control height is the WCAG 2.2 SC 2.5.8 floor (ui.md §4.3), so the drawn box alone would be a 20px pointer target at the default density. The `::before` is the hit area: an empty pseudo-element that reaches 2px past the drawn box on every side, so what accepts the pointer is exactly `--jx-control-h` square while the picture stays small — jx-tab's close button's technique, and the criterion measures the region that accepts the pointer, not the paint. The inset is -3px and not -2px because an absolutely positioned box is offset from its containing block's PADDING edge, and this control draws a 1px border: the border width comes first, then half of the 4px the box is under. jx-tab's close button is borderless, which is why -4px was exact there, and why the number did not carry over unchanged. In a jx-toolbar (a 4px gap) two extended neighbours abut and neither loses a pixel; jx-action-group's own sheet zeroes the packed axis in a compact group, where the boxes touch and an extension could only steal a strip of the neighbour. Held by target-size.test.ts and the conformance gate, both of which read the border and subtract it.",
+      "$description": "A small button draws 4px under the kit's control height, and the control height is the WCAG 2.2 SC 2.5.8 floor (ui.md §4.3), so the drawn box alone would be a 20px pointer target at the default density. The `::before` is the hit area: an empty pseudo-element that reaches 2px past the drawn box on every side, so what accepts the pointer is exactly `--jx-control-h` square while the picture stays small — jx-tab's close button's technique, and the criterion measures the region that accepts the pointer, not the paint. The inset is -3px and not -2px because an absolutely positioned box is offset from its containing block's PADDING edge, and this control draws a 1px border: the border width comes first, then half of the 4px the box is under. jx-tab's close button is borderless, which is why -4px was exact there, and why the number did not carry over unchanged. In a jx-toolbar (a 4px gap) two extended neighbours abut and neither loses a pixel; jx-action-group's own sheet zeroes the packed axis in a compact group, where the boxes touch and an extension could only steal a strip of the neighbour. Held by target-size.test.ts and the conformance gate, both of which read the border and subtract it. `contain: layout` is the other half of drawing the hit area OUTSIDE the button's own box: an absolutely positioned descendant still contributes to the SCROLLABLE overflow of the nearest ancestor whose `overflow` isn't `visible`, whether or not anything clips or paints it, so every `sm` button inside a host that scrolls (Preferences · Assistant's `Refresh models` and `Save` both are) was quietly widening and heightening that host's scrollable region by a few px — enough, with jx-textfield's clear button and jx-combobox's toggle doing the same thing beside it, to draw a scrollbar over a panel whose visible content fit. The containment has a price, and it is the baseline: a layout-contained box exports none, so a flex or grid row aligned on `baseline` synthesises one from the button's bottom edge and drops the row's text about 6px onto it (Welcome's `Recent` header stood 7px taller for it until it centred its `Clear all`). A row that holds a small button centres it (`align-items: center`), which is what the host's `vertical-align: middle` already says for inline layout.",
       "position": "relative",
       "minHeight": "calc(var(--jx-control-h) - 4px)",
       "padding": "0 var(--jx-space-3)",
       "fontSize": "var(--jx-text-sm)",
+      "contain": "layout",
       "::before": {
         "content": "\"\"",
         "position": "absolute",

package/components/jx-checkbox.json

@@ -146,11 +146,12 @@
       "color": "var(--jx-fg-dim)"
     },
     "&[data-size=\"sm\"] > [part=\"control\"]": {
-      "$description": "The control is the `<label>` wrapping the input, and the label is the pointer target: a click anywhere on it toggles the box. At `sm` it draws 4px under the kit's control height, the WCAG 2.2 SC 2.5.8 floor (ui.md \u00a74.3), so the `::before` extends the hit area 2px beyond the box on every side — jx-tab's close-button technique, the same shape jx-button carries — and the region that accepts the pointer is `--jx-control-h` tall while the row stays 20px. -2px is exact here where jx-button needs -3px: an absolutely positioned box is offset from the PADDING edge, and the label draws no border, so its padding edge is its drawn edge. The label needs `position: relative` here for the pseudo-element to measure against; the input inside is 14px and needs nothing of its own, because the label around it is the target. Held by target-size.test.ts and the conformance gate.",
+      "$description": "The control is the `<label>` wrapping the input, and the label is the pointer target: a click anywhere on it toggles the box. At `sm` it draws 4px under the kit's control height, the WCAG 2.2 SC 2.5.8 floor (ui.md \u00a74.3), so the `::before` extends the hit area 2px beyond the box on every side — jx-tab's close-button technique, the same shape jx-button carries — and the region that accepts the pointer is `--jx-control-h` tall while the row stays 20px. -2px is exact here where jx-button needs -3px: an absolutely positioned box is offset from the PADDING edge, and the label draws no border, so its padding edge is its drawn edge. The label needs `position: relative` here for the pseudo-element to measure against; the input inside is 14px and needs nothing of its own, because the label around it is the target. Held by target-size.test.ts and the conformance gate. `contain: layout` keeps the reach LOCAL, as it does on jx-button's and jx-action-button's small controls: an absolutely positioned box still counts toward the SCROLLABLE overflow of the nearest ancestor whose `overflow` isn't `visible`, invisible or not, so a small checkbox touching a scrolling host's edge would add 2px to that host's scrollable region and draw a scrollbar over content that fit. The price is the baseline: a layout-contained label exports none, so a row aligned on `baseline` puts the label's bottom edge on its text baseline, and a row that holds a small checkbox centres it (`align-items: center`) instead.",
       "position": "relative",
       "minHeight": "calc(var(--jx-control-h) - 4px)",
       "fontSize": "var(--jx-text-sm)",
       "lineHeight": "var(--jx-leading-sm)",
+      "contain": "layout",
       "::before": {
         "content": "\"\"",
         "position": "absolute",

package/components/jx-combobox.json

@@ -321,7 +321,7 @@
       "fontSize": "var(--jx-text-lg)"
     },
     "& [part=\"toggle\"]": {
-      "$description": "The toggle sits inside the field's border, so it draws 2px under the field's height: 22px in a 24px field, 18px in an `sm` one. The `::before` is its hit area (WCAG 2.2 SC 2.5.8, ui.md \u00a74.3), the same shape as jx-textfield's clear button: an empty pseudo-element inset by half the difference between the drawn box and the kit's control height, -1px on a default field and -3px on a small one, so the region that accepts the pointer is `--jx-control-h` square at every size while the caret and its box stay where they were; on a large field the inset is positive and the pseudo-element is an invisible box inside a button already over the floor. `position: relative` is what the pseudo-element measures against, and it is new here: the toggle is a flex item of the field, not an absolutely placed one. The rotation the open state applies turns the pseudo-element with the button, which a square does not mind.",
+      "$description": "The toggle sits inside the field's border, so it draws 2px under the field's height: 22px in a 24px field, 18px in an `sm` one. The `::before` is its hit area (WCAG 2.2 SC 2.5.8, ui.md \u00a74.3), the same shape as jx-textfield's clear button: an empty pseudo-element inset by half the difference between the drawn box and the kit's control height, -1px on a default field and -3px on a small one, so the region that accepts the pointer is `--jx-control-h` square at every size while the caret and its box stay where they were; on a large field the inset is positive and the pseudo-element is an invisible box inside a button already over the floor. `position: relative` is what the pseudo-element measures against, and it is new here: the toggle is a flex item of the field, not an absolutely placed one. The rotation the open state applies turns the pseudo-element with the button, which a square does not mind. `contain: layout` keeps that invisible expansion a LOCAL fact: an absolutely positioned box still contributes to the SCROLLABLE overflow of the nearest ancestor whose own `overflow` is not `visible`, even though nothing clips it and nothing paints there, so a form host that scrolls (Preferences \u00b7 Assistant does, at `overflow: auto`) picked up a couple of phantom pixels on every axis from these `::before`s alone and drew scrollbars over content that fit.",
       "position": "relative",
       "display": "inline-flex",
       "alignItems": "center",
@@ -339,6 +339,7 @@
       "color": "var(--jx-fg-muted)",
       "cursor": "pointer",
       "outline": "none",
+      "contain": "layout",
       "transition": "rotate var(--jx-dur-1) var(--jx-ease-out)",
       "::before": {
         "content": "\"\"",
@@ -376,7 +377,19 @@
       "color": "var(--jx-danger)"
     },
     "& [part=\"error\"]:empty": {
-      "position": "absolute"
+      "$description": "While the region is empty it draws nothing and takes no click, whatever an ancestor's rule gives it. The kit is light DOM, so a consumer's descendant rule on `[part=\"error\"]` lands on this paragraph too, and under `box-sizing: border-box` a 0×0 box floors at padding plus border, which is how a surface's banner rule drew a small painted box over a field's top-left corner that swallowed the click. So the box model is reset, and `clip-path: inset(50%)` with `pointer-events: none` removes the paint and hit area of anything the reset does not name. It is never `display: none` or `visibility: hidden`, because a live region absent from the accessibility tree does not announce its first text (ui.md §5.1). `jx-textfield.json`'s error region carries the same rule, and its description has the full mechanism.",
+      "position": "absolute",
+      "top": "0",
+      "left": "0",
+      "width": "0",
+      "height": "0",
+      "overflow": "hidden",
+      "margin": "0",
+      "padding": "0",
+      "border": "0",
+      "background": "none",
+      "clipPath": "inset(50%)",
+      "pointerEvents": "none"
     },
     "& > [part=\"help-slot\"]": {
       "display": "contents"

package/components/jx-select.json

@@ -344,7 +344,19 @@
       "color": "var(--jx-danger)"
     },
     "& [part=\"error\"]:empty": {
-      "position": "absolute"
+      "$description": "While the region is empty it draws nothing and takes no click, whatever an ancestor's rule gives it. The kit is light DOM, so a consumer's descendant rule on `[part=\"error\"]` lands on this paragraph too, and under `box-sizing: border-box` a 0×0 box floors at padding plus border: Studio's Source Control banner rule drew a 16×13 box over the branch picker's top-left corner that swallowed the click. So the box model is reset, and `clip-path: inset(50%)` with `pointer-events: none` removes the paint and hit area of anything the reset does not name. It is never `display: none` or `visibility: hidden`, because a live region absent from the accessibility tree does not announce its first text (ui.md §5.1). `jx-textfield.json`'s error region carries the same rule, and its description has the full mechanism.",
+      "position": "absolute",
+      "top": "0",
+      "left": "0",
+      "width": "0",
+      "height": "0",
+      "overflow": "hidden",
+      "margin": "0",
+      "padding": "0",
+      "border": "0",
+      "background": "none",
+      "clipPath": "inset(50%)",
+      "pointerEvents": "none"
     },
     "& > [part=\"help-slot\"]": {
       "display": "contents"

package/components/jx-split.json

@@ -184,13 +184,14 @@
     "$ref": "#/state/onDoubleClick"
   },
   "style": {
+    "$description": "`z-index: 3` is not decoration: a Navigator/Inspector split sits at the shell level, a sibling of the pane grid rather than a descendant of it, so where its box happens to meet a pane's own edge is decided by whichever stacking context wins — not by DOM order. `panels/pane-context.ts`'s floating toolbar band (`surfaces/pane-context.json`'s `[part=\"chrome\"]`) is `position: relative; z-index: 2` so it can float over the canvas stage, and that band's own edge sits flush against this splitter's box at the pane boundary. At `z-index: 1` the band won the last couple of pixels of the splitter's own 5px width, so a drag started right at that edge grabbed the toolbar instead of the handle — the reader-visible shape of that was `elementFromPoint` returning the band's `[part=\"bar\"]` for x inside the splitter's own rect. `3` clears every floating band in the shell (the chrome band's `2`, `diff-toolbar`'s `2`) without touching their own stacking, which still does its job of floating over the stage.",
     "display": "block",
     "&[hidden]": {
       "display": "none"
     },
     "flex": "none",
     "position": "relative",
-    "zIndex": "1",
+    "zIndex": "3",
     "touchAction": "none",
     "background": "var(--jx-border)",
     "cursor": "col-resize",

package/components/jx-tab.json

@@ -170,7 +170,9 @@
       "background": "transparent",
       "color": "var(--jx-fg-muted)",
       "cursor": "pointer",
+      "contain": "layout",
       "::before": {
+        "$description": "The hit area, and the technique every `sm` control in the kit borrows (ui.md §4.3): an empty pseudo-element, absolutely positioned and inset 4px past a borderless 16px box, so the region that accepts the pointer is the 24px SC 2.5.8 asks for while the × stays 16px. The containment above is the other half of it, and it was missing while §4.3 claimed every outset hit area had it: an absolutely positioned box counts toward the SCROLLABLE overflow of the nearest ancestor whose overflow is not visible, painted or not, so a scrolling tab strip counted 4px it could not see. Nothing here pays the containment's price — the tab is a centred flex row, so no baseline is asked of the ×, and the 4px reaches only the tab's own inline padding.",
         "content": "\"\"",
         "position": "absolute",
         "insetBlock": "-4px",

package/components/jx-textfield.json

@@ -447,7 +447,7 @@
       "fontSize": "var(--jx-text-lg)"
     },
     "& [part=\"clear\"]": {
-      "$description": "The clear button sits inside the field's border, so it draws 2px under the field's height: 22px in a 24px field, and 18px in an `sm` one. The `::before` is its hit area (WCAG 2.2 SC 2.5.8, ui.md \u00a74.3): an empty pseudo-element inset by half the difference between the drawn box and the kit's control height, which is -1px on a default field and -3px on a small one, so the region that accepts the pointer is `--jx-control-h` square at every size while the glyph and its hover box stay where they were. On a large field the difference is positive and the pseudo-element is an invisible box INSIDE a button that is already over the floor, which changes nothing. jx-tab's close button is the technique; the button is absolutely positioned already, so it is its own containing block. The extension lies over the input it clears, which was true of the drawn button too, and 2px past the field's edge at `sm`, where a neighbour at the kit's 4px gap extends 2px back and the two abut.",
+      "$description": "The clear button sits inside the field's border, so it draws 2px under the field's height: 22px in a 24px field, and 18px in an `sm` one. The `::before` is its hit area (WCAG 2.2 SC 2.5.8, ui.md \u00a74.3): an empty pseudo-element inset by half the difference between the drawn box and the kit's control height, which is -1px on a default field and -3px on a small one, so the region that accepts the pointer is `--jx-control-h` square at every size while the glyph and its hover box stay where they were. On a large field the difference is positive and the pseudo-element is an invisible box INSIDE a button that is already over the floor, which changes nothing. jx-tab's close button is the technique; the button is absolutely positioned already, so it is its own containing block. The extension lies over the input it clears, which was true of the drawn button too, and 2px past the field's edge at `sm`, where a neighbour at the kit's 4px gap extends 2px back and the two abut. `contain: layout` keeps the expansion LOCAL: an absolutely positioned box still counts toward the SCROLLABLE overflow of the nearest ancestor whose `overflow` is not `visible`, invisible or not, so a host that scrolls picks up a couple of phantom pixels from every `::before` like this one between it and the field, and draws a scrollbar over content that already fit.",
       "position": "absolute",
       "insetBlockStart": "1px",
       "insetInlineEnd": "1px",
@@ -471,6 +471,7 @@
       "color": "var(--jx-fg-muted)",
       "cursor": "pointer",
       "outline": "none",
+      "contain": "layout",
       ":hover": {
         "color": "var(--jx-fg)"
       },
@@ -492,7 +493,19 @@
       "color": "var(--jx-danger)"
     },
     "& [part=\"error\"]:empty": {
-      "position": "absolute"
+      "$description": "The region is permanent and empty until it has something to say, and while it is empty it must draw nothing and take no click, whatever an ancestor's rule gives it. The kit is light DOM, so a consumer's descendant rule on `[part=\"error\"]` (a surface's own banner, a site's stylesheet) lands on this paragraph as well — and under `box-sizing: border-box` a `width`/`height` of 0 floors at padding plus border, which is how a Studio banner's `padding: 6px 8px` and 1px rule drew a 16×13 box at the field's top-left corner that also took the click meant for the control. Pinning the size was never enough on its own; the box model is therefore reset here, and `clip-path: inset(50%)` (the kit's visually-hidden idiom, as `jx-accordion-item.json`'s heading uses it) with `pointer-events: none` removes the paint and the hit area of anything a reset does not name, such as a shadow or an outline. Its `:empty` makes the selector one pseudo-class heavier than the `X [part=\"error\"]` a consumer writes, so it wins in whichever order the sheets land. It is never `display: none` or `visibility: hidden`: a live region absent from the accessibility tree does not announce its first text (ui.md §5.1). When text arrives `:empty` stops matching and the sentence draws in flow exactly as the two rules above say. `jx-select.json` and `jx-combobox.json` carry the same rule, for the same reason.",
+      "position": "absolute",
+      "top": "0",
+      "left": "0",
+      "width": "0",
+      "height": "0",
+      "overflow": "hidden",
+      "margin": "0",
+      "padding": "0",
+      "border": "0",
+      "background": "none",
+      "clipPath": "inset(50%)",
+      "pointerEvents": "none"
     },
     "& > [part=\"control-slot\"], & > [part=\"clear-slot\"], & > [part=\"help-slot\"]": {
       "display": "contents"

package/icons/list.json

@@ -13,6 +13,7 @@
   "arrow-left": ["regular", "bold"],
   "arrow-right": ["regular", "bold"],
   "arrow-square-out": ["regular"],
+  "arrow-u-down-left": ["regular"],
   "arrow-u-up-left": ["regular"],
   "arrow-u-up-right": ["regular"],
   "arrow-up": ["regular", "bold"],
@@ -96,6 +97,7 @@
   "text-strikethrough": ["regular"],
   "text-subscript": ["regular"],
   "text-superscript": ["regular"],
+  "text-t": ["regular"],
   "text-underline": ["regular"],
   "translate": ["regular"],
   "trash": ["regular"],

package/icons/manifest.json

@@ -45,6 +45,9 @@
     "arrow-square-out": {
       "regular": "M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"
     },
+    "arrow-u-down-left": {
+      "regular": "M232,112a64.07,64.07,0,0,1-64,64H51.31l34.35,34.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48a8,8,0,0,1,11.32,11.32L51.31,160H168a48,48,0,0,0,0-96H80a8,8,0,0,1,0-16h88A64.07,64.07,0,0,1,232,112Z"
+    },
     "arrow-u-up-left": {
       "regular": "M232,144a64.07,64.07,0,0,1-64,64H80a8,8,0,0,1,0-16h88a48,48,0,0,0,0-96H51.31l34.35,34.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48A8,8,0,0,1,85.66,45.66L51.31,80H168A64.07,64.07,0,0,1,232,144Z"
     },
@@ -331,6 +334,9 @@
     "text-superscript": {
       "regular": "M248,144a8,8,0,0,1-8,8H192a8,8,0,0,1-6.4-12.8l43.17-57.55a16,16,0,1,0-27.86-15,8,8,0,0,1-15.09-5.33,32,32,0,1,1,55.74,29.92L208,136h32A8,8,0,0,1,248,144ZM149.24,74a8,8,0,0,0-11.29.8L92,127.79l-45.95-53A8,8,0,0,0,34,85.24L81.41,140,34,194.76a8,8,0,0,0,12.1,10.48l46-53,45.95,53a8,8,0,1,0,12.1-10.48L102.59,140l47.46-54.76A8,8,0,0,0,149.24,74Z"
     },
+    "text-t": {
+      "regular": "M208,56V88a8,8,0,0,1-16,0V64H136V192h24a8,8,0,0,1,0,16H96a8,8,0,0,1,0-16h24V64H64V88a8,8,0,0,1-16,0V56a8,8,0,0,1,8-8H200A8,8,0,0,1,208,56Z"
+    },
     "text-underline": {
       "regular": "M200,224a8,8,0,0,1-8,8H64a8,8,0,0,1,0-16H192A8,8,0,0,1,200,224Zm-72-24a64.07,64.07,0,0,0,64-64V56a8,8,0,0,0-16,0v80a48,48,0,0,1-96,0V56a8,8,0,0,0-16,0v80A64.07,64.07,0,0,0,128,200Z"
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "The Jx UI kit: interface elements authored as Jx documents, with their theme and icons",
   "license": "MIT",
   "repository": {
@@ -58,8 +58,8 @@
     "upgrade": "bun update --latest && bun install"
   },
   "dependencies": {
-    "@jxsuite/runtime": "^4.0.1",
-    "@jxsuite/schema": "^2.2.0"
+    "@jxsuite/runtime": "^4.0.2",
+    "@jxsuite/schema": "^2.3.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.14.5",

package/stylebook/jx-action-group.json

@@ -58,6 +58,21 @@
           }
         }
       ]
+    },
+    "mode": "edit",
+    "chooseMode": {
+      "$prototype": "Function",
+      "body": [
+        {
+          "operator": "=",
+          "target": {
+            "$ref": "#/state/mode"
+          },
+          "value": {
+            "$ref": "event#/currentTarget/dataset/value"
+          }
+        }
+      ]
     }
   },
   "style": {
@@ -96,7 +111,7 @@
     },
     {
       "tagName": "p",
-      "textContent": "A row of action buttons with ONE tab stop, and one attribute choosing the whole ARIA pattern: selects=\"none\" is a toolbar, \"single\" a radiogroup, \"multiple\" a group. It owns the roving caret and the segmented seam; it does not own the selection. Horizontal alignment is ${state.align}."
+      "textContent": "A row of action buttons with ONE tab stop, and one attribute choosing the whole ARIA pattern: selects=\"none\" is a toolbar, \"single\" a radiogroup, \"multiple\" a group. It owns the roving caret and, when compact, the whole segmented control: the frame, the shared borders and the selected segment, drawn whatever a member's quiet says. It does not own the selection. Horizontal alignment is ${state.align}; the canvas is in ${state.mode} mode."
     },
     {
       "tagName": "h2",
@@ -170,6 +185,79 @@
         }
       ]
     },
+    {
+      "tagName": "h2",
+      "textContent": "selects=\"single\" with text segments at the small size, as Studio's switches draw them"
+    },
+    {
+      "tagName": "div",
+      "children": [
+        {
+          "tagName": "jx-action-group",
+          "$props": {
+            "label": "Canvas mode",
+            "selects": "single"
+          },
+          "children": [
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "label": "Edit",
+                "size": "sm",
+                "checked": "${state.mode === 'edit' ? 'true' : 'false'}"
+              },
+              "onclick": {
+                "$ref": "#/state/chooseMode"
+              },
+              "attributes": {
+                "data-value": "edit"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "textContent": "Edit"
+                }
+              ]
+            },
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "label": "Design",
+                "size": "sm",
+                "checked": "${state.mode === 'design' ? 'true' : 'false'}"
+              },
+              "onclick": {
+                "$ref": "#/state/chooseMode"
+              },
+              "attributes": {
+                "data-value": "design"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "textContent": "Design"
+                }
+              ]
+            },
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "label": "Source",
+                "size": "sm",
+                "disabled": true,
+                "checked": "false"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "textContent": "Source"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
     {
       "tagName": "h2",
       "textContent": "selects=\"none\" \u2014 a toolbar, and the same row uncompacted"
@@ -189,7 +277,6 @@
                 "label": "Bold",
                 "hint": "Bold",
                 "icon": "text-b",
-                "quiet": false,
                 "toggles": true
               }
             },
@@ -199,7 +286,6 @@
                 "label": "Italic",
                 "hint": "Italic",
                 "icon": "text-italic",
-                "quiet": false,
                 "toggles": true
               }
             },
@@ -209,7 +295,6 @@
                 "label": "Underline",
                 "hint": "Underline",
                 "icon": "text-a-underline",
-                "quiet": false,
                 "disabled": true
               }
             },
@@ -219,7 +304,6 @@
                 "label": "Strikethrough",
                 "hint": "Strikethrough",
                 "icon": "text-strikethrough",
-                "quiet": false,
                 "toggles": true
               }
             }
@@ -266,6 +350,51 @@
         }
       ]
     },
+    {
+      "tagName": "h2",
+      "textContent": "compact=false with quiet members \u2014 a toolbar of quiet tools, which is never a compact group"
+    },
+    {
+      "tagName": "div",
+      "children": [
+        {
+          "tagName": "jx-action-group",
+          "$props": {
+            "label": "File actions",
+            "compact": false
+          },
+          "children": [
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "label": "New file",
+                "hint": "New file",
+                "icon": "plus",
+                "size": "sm"
+              }
+            },
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "label": "Refresh",
+                "hint": "Refresh",
+                "icon": "arrows-clockwise",
+                "size": "sm"
+              }
+            },
+            {
+              "tagName": "jx-action-button",
+              "$props": {
+                "label": "Copy path",
+                "hint": "Copy path",
+                "icon": "copy",
+                "size": "sm"
+              }
+            }
+          ]
+        }
+      ]
+    },
     {
       "tagName": "h2",
       "textContent": "selects=\"multiple\" \u2014 a group of independent toggles, drawn vertically"
@@ -286,7 +415,6 @@
               "$props": {
                 "label": "Problems",
                 "icon": "warning-circle",
-                "quiet": false,
                 "toggles": true,
                 "selected": true
               },
@@ -302,7 +430,6 @@
               "$props": {
                 "label": "Logic",
                 "icon": "lightning",
-                "quiet": false,
                 "toggles": true
               },
               "children": [
@@ -317,7 +444,6 @@
               "$props": {
                 "label": "Activity",
                 "icon": "clock-counter-clockwise",
-                "quiet": false,
                 "toggles": true
               },
               "children": [

package/stylebook/jx-icon.json

@@ -24,6 +24,7 @@
       "arrow-left",
       "arrow-right",
       "arrow-square-out",
+      "arrow-u-down-left",
       "arrow-u-up-left",
       "arrow-u-up-right",
       "arrow-up",
@@ -107,6 +108,7 @@
       "text-strikethrough",
       "text-subscript",
       "text-superscript",
+      "text-t",
       "text-underline",
       "translate",
       "trash",