/* ============================================================================= recipe-controls.css — every control, assembled from the catalogue build. Read recipe-tokens.css first; nothing here works without it. ============================================================================= */ /* ---- 01-existing ---------------------------------------------------- */ /* ============================================================================= THE FOUR CONTROLS THAT SHIPPED FIRST — button, text input, select, checkbox/radio. These lived inside recipe-tokens.css until now, because "lock it in" was read as "put it in the locked file" and the CSS followed the tokens across. It made the token file a token file plus six controls, and made recipe-controls.css claim to hold every control while missing four of them. Nothing here changed on the way over. The token file is now what its own header says it is: reference values, system roles, and the two grounds — the layer a theme re-points. A control's own tokens are declared on the control, in the control's file, next to the properties that read them. ============================================================================= */ /* ============================================================================= 3. COMPONENT — the button. These are declared on .al-btn, NOT on :root, for two reasons. The load-bearing one is CSS resolution: a var() inside a custom property resolves against the element the property is DECLARED on, so --al-button-fill: var(--al-button-intent) sitting on :root could never see .al-btn-danger's override. Declaring it on the element is what makes emphasis and intent compose at all. The second is tidiness: a button's tokens are the button's business, and putting them on :root hangs them off every element in the document. Theming still works, because theming belongs at the sys tier — .theme-dark { --al-sys-color-surface } moves every component that opted in, which is the whole point of the sys tier. ============================================================================= */ .al-btn { /* -- the composition axis. Everything an intent needs to change is one token, so an intent variant is a single line and can never miss a surface. ---- */ --al-button-intent: var(--al-sys-color-accent-primary); --al-button-intent-line: var(--al-sys-color-accent-primary-line); --al-button-intent-strong: var(--al-sys-color-accent-primary-strong); --al-button-intent-stronger: var(--al-sys-color-accent-primary-stronger); /* the text that sits ON this intent's fill. Part of the intent ladder rather than a single global, because the two intents are not obliged to be equally dark: our emerald and red happen to be, so one role covered both and looked correct, but a theme with a pale accent and a deep danger needs black on one and white on the other. One value cannot be both, and the failure is a label nobody can read. */ --al-button-intent-text: var(--al-sys-color-text-on-accent); --al-button-fill: var(--al-button-intent); --al-button-border-color: var(--al-button-intent); /* The BUTTON's ring stays on the intent ladder rather than reading the shared focus role, and that is deliberate. A danger button turns red on every surface it has — fill, border, label, hover veil and ring — off one variant line, and pointing the ring at a global focus colour quietly made a focused Void button wear a green halo. A control that carries an intent rings in that intent. Controls with no intent, the input and the affix, read --al-sys-color-focus-ring instead. */ --al-button-focus-ring-color: var(--al-button-intent-line); --al-button-label: var(--al-button-intent-text); --al-button-veil-hover: var(--al-sys-color-veil-on-accent); --al-button-veil-press: var(--al-sys-color-veil-on-accent); /* -- scale: points at the md rung; a size variant re-points these four ----- */ --al-button-height: var(--al-sys-control-height-md); --al-button-padding-x: var(--al-sys-control-padding-x-md); --al-button-font-size: var(--al-sys-font-size-300); --al-button-icon-size: var(--al-sys-icon-size-md); --al-button-radius: var(--al-sys-control-radius); --al-button-border-width: var(--al-sys-control-border-width); --al-button-gap: var(--al-sys-control-gap); --al-button-font-weight: var(--al-sys-font-weight-control); --al-button-veil-hover-opacity: var(--al-sys-state-hover-opacity-on-fill); --al-button-veil-press-opacity: var(--al-sys-state-press-opacity-on-fill); --al-button-press-scale: var(--al-sys-state-press-scale); --al-button-disabled-opacity: var(--al-sys-state-disabled-opacity); --al-button-spinner-ring-width: var(--al-sys-spinner-ring-width); --al-button-spinner-duration: var(--al-sys-motion-duration-loop); --al-button-focus-hairline-width: var(--al-sys-focus-hairline-width); --al-button-focus-hairline-light: var(--al-sys-color-focus-hairline-light); --al-button-focus-hairline-dark: var(--al-sys-color-focus-hairline-dark); --al-button-focus-ring-width: var(--al-sys-focus-ring-width); --al-button-motion-duration: var(--al-sys-motion-duration-state); --al-button-motion-easing: var(--al-sys-motion-easing); /* -- properties: only --al-button-* below this line ----------------------- */ /* The system owns its own box model rather than borrowing one. Without this the size tier is only true on pages that happen to ship *{box-sizing:border-box}: measured on a page without it, a control naming 36px rendered 48. A tier a host page can silently change is not a tier, and a design system that only works inside someone else's reset is not portable. */ box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--al-button-gap); /* A FLOOR, NOT A FIXED HEIGHT — two separate failures, one shape of fix. flex: none stops a container shrinking it. Put three buttons in a column 120px tall and they were quietly rendering at 19.5px each while the token still said 36: half height, no longer matching the field beside them, no longer a comfortable touch target, and nothing anywhere saying so. Now the panel visibly overflows instead, which is a thing someone notices and fixes. min-height instead of height lets it grow when someone turns their text up. Type is relative to the browser's font setting and the tier is pixels, so at 200% the old box held 28px text in a 36px shell. In normal use this is exactly the tier and nothing moves; it only gives way when the text would not otherwise fit. */ flex: none; align-self: center; height: auto; min-height: var(--al-button-height); padding: 0.35em var(--al-button-padding-x); border-radius: var(--al-button-radius); border: var(--al-button-border-width) solid var(--al-button-border-color); font-family: inherit; font-size: var(--al-button-font-size); font-weight: var(--al-button-font-weight); line-height: 1; /* structural: the height token owns the box, flex owns the centring. Not a type decision. */ white-space: nowrap; /* the button is often an — this file's own markup says so — and an anchor arrives decorated. The hover half is stated once for every anchor-capable control, further down. */ text-decoration: none; background: var(--al-button-fill); color: var(--al-button-label); position: relative; isolation: isolate; cursor: pointer; transition: transform var(--al-button-motion-duration) var(--al-button-motion-easing), box-shadow var(--al-button-motion-duration) var(--al-button-motion-easing); } /* THE LABEL — and it needs no class of its own. Any element inside the button truncates, so `Save` is enough. That was deliberate: every button has a label and about one in five has an icon, so the burden belongs on the rarer case. Only the icon is marked, and only so it keeps its size while the label shrinks beside it. Wrapping the label in SOMETHING is still required, because text-overflow has no effect on a bare text node inside a flex container — measured, not assumed. It also gives the busy state something to hide, and tells a leading glyph from a trailing one. min-width:0 is what lets a flex item shrink below its content width; without it the ellipsis never appears. */ .al-btn > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* THE ELLIPSIS GUARD ABOVE IS FOR A LABEL, AND IT WAS CLIPPING EVERY ICON IN THE PRODUCT. A Material Symbols glyph's ink exceeds its em box by about 2px, so `overflow: hidden` on every direct child of .al-btn squared off the bottom of every icon button there is, and has since the guard landed. It is not text being truncated, so exempting it weakens nothing: a glyph has no label to ellipsise. Measured on the running POS by agent-4olt71: content 80x22 inside a 16x16 box with overflow hidden. The give-away that it had been met before is OrderTypeChangeModal.css:247, an undocumented `.button-visible span { overflow: visible !important }` -- somebody's local workaround for this exact rule, deleted in this commit now that the root is fixed. ONE LINE, AND APPROVED AS ONE LINE. Jeff ruled "1" on ALLM-7419 at 13:44 on 2026-09-20, against an option quoting this exact declaration. Do not widen it without asking again. */ .al-btn .material-symbols-outlined { overflow: visible; } .al-btn-icon { flex: none; /* the label gives way, never the glyph */ } /* THE GLYPH TAKES THE BUTTON'S RUNG. [ALLM-7164] .al-back has said this since it was written and it was never generalised, so every Material Symbols icon in a button drew at the font's own 24px. Counted across views/ and public/: 249 icon buttons in 88 files. 151 are al-btn-sm on the 28px rung, where a 24px glyph does not fit and pushed the button to 35.1px beside 28px siblings. The other 98 fit, and still carried a glyph half again the size their rung asks for. SCOPED UNDER THE CONTROL, for the reason .al-back gives at length: Material Symbols ships `.material-symbols-outlined { font-size: 24px }`, which is one class against one class, so flat the winner would be whichever file loads last and this file does not get to choose. Under .al-btn it is two classes and load order stops mattering. Sized twice on purpose, again as .al-back does: the box sizes an SVG and the type sizes an icon font, and neither alone covers both. NOT .al-btn-icon, deliberately. That class means `flex: none` and the app also puts it on BUTTONS as a shape modifier, so sizing it as a glyph would shrink the control. */ .al-btn .material-symbols-outlined { box-sizing: border-box; flex: none; width: var(--al-button-icon-size); height: var(--al-button-icon-size); font-size: var(--al-button-icon-size); line-height: 1; } /* One overlay serves hover AND press, by changing colour and direction. z-index: -1 puts the veil UNDER the label, which `isolation: isolate` above makes safe: the veil stays inside the button's own stacking context, above its background and below its text. Without it the veil paints over the label — positioned descendants with z-index:auto paint after in-flow content — and a dark press veil visibly dims a white label. */ .al-btn::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--al-button-veil-hover); opacity: 0; pointer-events: none; transition: opacity var(--al-button-motion-duration) var(--al-button-motion-easing); } .al-btn:hover::after { opacity: var(--al-button-veil-hover-opacity); } .al-btn:active::after { background: var(--al-button-veil-press); opacity: var(--al-button-veil-press-opacity); } .al-btn:active { transform: scale(var(--al-button-press-scale)); } .al-btn:focus { outline: none; } .al-btn:focus-visible { /* Windows high-contrast / forced-colors throws box-shadow away, which would leave a keyboard user with no focus indicator at all. A transparent outline is invisible here and is repainted in a system colour there, so the ring survives a mode this design cannot otherwise reach. */ outline: var(--al-button-focus-ring-width) solid transparent; outline-offset: var(--al-button-focus-hairline-width); box-shadow: 0 0 0 var(--al-button-focus-hairline-width) var(--al-button-focus-hairline-light), 0 0 0 calc(var(--al-button-focus-hairline-width) + var(--al-button-focus-ring-width)) var(--al-button-focus-ring-color), 0 0 0 calc(var(--al-button-focus-hairline-width) + var(--al-button-focus-ring-width) + var(--al-button-focus-hairline-width)) var(--al-button-focus-hairline-dark); } .al-btn:disabled { opacity: var(--al-button-disabled-opacity); pointer-events: none; } /* ----------------------------------------------------------------------------- BUSY — the sixth state. Keyed off aria-busy, NOT a --loading modifier class, so the visual state and the screen-reader announcement cannot disagree: you cannot style it without also making it accessible. The label is hidden with `color: transparent` rather than by wrapping it in a span — the label keeps its width so the button does not resize and the row does not reflow, and consumers are not forced into a required inner element. The spinner is sized in `em`, so it scales with the size variant for free. ----------------------------------------------------------------------------- */ .al-btn[aria-busy='true'] { color: transparent; pointer-events: none; } /* `color: transparent` hides text and nothing else. An icon, an SVG painting from a literal fill, or a child with its own background all survive it and collide with the spinner. Hiding children by visibility keeps their space, so the button holds size. */ .al-btn[aria-busy='true'] > * { visibility: hidden; } /* pointer-events stops the MOUSE and nothing else. A focused button still fires on Enter and Space, and Chrome and Firefox both set :active during keyboard activation — so without these two rules a spinning button visibly presses and re-fires under the keyboard. CSS cannot stop the activation itself, only its appearance, so the contract is: a busy button also carries aria-disabled="true" and its handler returns early while busy. Real `disabled` is the wrong tool here — it drops the button out of the tab order mid-action and throws the keyboard user's place away. */ .al-btn[aria-busy='true']:active { transform: none; } .al-btn[aria-busy='true']:active::after { opacity: 0; } .al-btn[aria-disabled='true'] { opacity: var(--al-button-disabled-opacity); pointer-events: none; } /* aria-disabled dims the control but keeps it focusable, which is the point — a keyboard user does not lose their place. It must still not react: without these it looks disabled and then lights up under hover and shrinks under a press. */ .al-btn[aria-disabled='true']:hover::after, .al-btn[aria-disabled='true']:active::after { opacity: 0; } .al-btn[aria-disabled='true']:active { transform: none; } .al-btn[aria-busy='true'][aria-disabled='true'] { opacity: 1; /* busy already says "not now"; dimming it as well just makes the spinner hard to see */ } .al-btn[aria-busy='true']::before { content: ''; position: absolute; left: 50%; top: 50%; /* border-box, explicitly. box-sizing is not inherited, and the usual `*{box-sizing:border-box}` reset does not match pseudo-elements — so this box would be content-box, 1em PLUS 2px of ring on each side, and the -0.5em margins would centre only the content. Measured: 2px right and 2px low in all 18 busy cells, worst at --sm where 2px is a large share of a 17px ring. */ box-sizing: border-box; width: 1em; height: 1em; margin: -0.5em 0 0 -0.5em; border: var(--al-button-spinner-ring-width) solid var(--al-button-label); border-right-color: transparent; border-radius: 50%; animation: al-spin var(--al-button-spinner-duration) linear infinite; } @keyframes al-spin { to { transform: rotate(360deg); } } /* Forced-colors repaints every border side to one system colour, which closes the gap in the ring. A rotationally symmetric circle spinning at 360deg shows no motion at all, so the busy state would go completely silent in exactly the mode the focus ring above is careful to survive. Painting the gap with Canvas keeps the asymmetry that makes the rotation visible. */ @media (forced-colors: active) { .al-btn[aria-busy='true']::before { border-right-color: Canvas; } /* Forced colours repaint `color: transparent` to a visible system colour, so the busy label comes back whatever we do — rendered and confirmed. Since it cannot be hidden here, the spinner moves out of its way instead and the button makes room. Only this mode is affected. */ .al-btn[aria-busy='true'] { padding-right: calc(var(--al-button-padding-x) + var(--al-button-gap) + 1em); } .al-btn[aria-busy='true'] > * { visibility: visible; } .al-btn[aria-busy='true']::before { left: auto; right: var(--al-button-padding-x); margin-left: 0; } } /* ============================================================================= VARIANTS — two independent axes. Every variant below re-points tokens only, so states, focus, scale and disabled all follow without being restated, and the two axes compose: .al-btn-outline.al-btn-danger is a red outline button whose hover veil, focus ring and label are all red, with nothing written to say so. ============================================================================= */ /* -- EMPHASIS: how loud. Default is filled. ------------------------------------ Named for APPEARANCE, not rank. "Secondary" would name a rank, and rank is not an axis this system has — a danger outline button is not "secondary", it is the destructive alternative. Mixing the two axes in one name is the thing that makes other systems' primary/secondary/tertiary/ghost/danger sets so hard to teach. */ /* Outline and quiet are the two emphases whose accent is a LINE rather than a FILL — their edge and their label are ink laid on the ground behind them — so both read the line rung. On a light ground that is the same value as the fill and nothing changes; on any other ground it is what lets them stay legible without a rule per surface being written for them. */ .al-btn-outline { --al-button-fill: var(--al-sys-color-surface-control); --al-button-border-color: var(--al-button-intent-line); --al-button-label: var(--al-button-intent-line); --al-button-veil-hover: var(--al-button-intent-line); --al-button-veil-hover-opacity: var(--al-sys-state-hover-opacity-on-surface); /* PRESS TAKES THE INTENT TOO. It used to be the one state token no variant ever re-pointed, so a pressed outline button fell through to the accent veil: hover was branded and press was grey, on every intent. Worse on a dark panel, where a darkening veil over an already dark canvas produced no visible change at all — the button simply did not respond to being pressed. */ --al-button-veil-press: var(--al-button-intent-line); --al-button-veil-press-opacity: var(--al-sys-state-press-opacity-on-surface); } .al-btn-quiet { --al-button-fill: transparent; --al-button-border-color: transparent; --al-button-label: var(--al-button-intent-line); --al-button-veil-hover: var(--al-button-intent-line); --al-button-veil-hover-opacity: var(--al-sys-state-hover-opacity-on-surface); --al-button-veil-press: var(--al-button-intent-line); --al-button-veil-press-opacity: var(--al-sys-state-press-opacity-on-surface); } /* A state may re-point a token, exactly as a variant does. On a surface-grounded button the ground lightens under the label, so the label deepens to match. */ .al-btn-outline:hover, .al-btn-quiet:hover { --al-button-label: var(--al-button-intent-strong); } .al-btn-outline:active, .al-btn-quiet:active { --al-button-label: var(--al-button-intent-stronger); } /* -- INTENT: what it means. Default is primary. ------------------------------ One line, because every surface that carries meaning already reads the intent token. Composes with all three emphasis levels and all three sizes. */ .al-btn-danger { --al-button-intent: var(--al-sys-color-accent-danger); --al-button-intent-line: var(--al-sys-color-accent-danger-line); --al-button-intent-text: var(--al-sys-color-text-on-accent-danger); --al-button-intent-strong: var(--al-sys-color-accent-danger-strong); --al-button-intent-stronger: var(--al-sys-color-accent-danger-stronger); } /* The utility intent: solid and tappable, and it claims nothing. Use it for the actions that are neither the money nor a destruction -- open a panel, edit a detail, navigate. It is five lines for the same reason danger is: fill, border, label, both veils, the focus ring, all three sizes and all three emphases fall out of the intent axis. */ .al-btn-neutral { --al-button-intent: var(--al-sys-color-accent-neutral); --al-button-intent-line: var(--al-sys-color-accent-neutral-line); --al-button-intent-text: var(--al-sys-color-text-on-accent-neutral); --al-button-intent-strong: var(--al-sys-color-accent-neutral-strong); --al-button-intent-stronger: var(--al-sys-color-accent-neutral-stronger); } /* -- SIZE: default is md. ------------------------------------------------------ Three re-points each, and because the sys tier pairs height with font size and padding, a size variant cannot resize the box without resizing the type. */ .al-btn-sm { --al-button-height: var(--al-sys-control-height-sm); --al-button-padding-x: var(--al-sys-control-padding-x-sm); --al-button-font-size: var(--al-sys-font-size-200); --al-button-icon-size: var(--al-sys-icon-size-sm); } .al-btn-lg { --al-button-height: var(--al-sys-control-height-lg); --al-button-padding-x: var(--al-sys-control-padding-x-lg); --al-button-font-size: var(--al-sys-font-size-400); --al-button-icon-size: var(--al-sys-icon-size-lg); } /* ============================================================================= OUTLINE AND QUIET ARE DARK-CORRECT. This block used to say the opposite — "LIGHT GROUNDS ONLY … on a dark ground both come out as light shapes … a dark surface treatment is not part of the system" — and that has not been true since dark moved to the role layer. The claim outlived the mechanism it described, and it was still being read as current and designed around. What actually happens now is in recipe-tokens.css .al-on-dark: surface-control goes transparent, so an outline button's interior becomes the dark ground itself rather than a white fill; accent-primary-line lightens for the edge and the label; and -strong/-stronger climb instead of deepening, so hover and press still move. Nothing here needs a rule per ground, which is the whole point of reading roles. ============================================================================= */ /* ============================================================================= REDUCED MOTION — keep only what carries meaning. Fires only for someone whose operating system is set to reduce animation, usually because motion makes them unwell. Everyone else sees the design exactly as drawn. The press shrink and the veil fade are polish: they go. The spinner stays, because it is the only thing telling someone their action is still running — removing it would leave a slow save looking like a dead button. It switches to a stepped rotation, which still reads as progress without sweeping continuously. ============================================================================= */ @media (prefers-reduced-motion: reduce) { .al-btn, .al-btn::after { transition: none; } .al-btn:active { transform: none; } .al-btn[aria-busy='true']::before { animation-timing-function: steps(8, end); } } /* ----------------------------------------------------------------------------- BLOCK — fills the width of whatever holds it, instead of being as wide as its label. Narrow panels, modal footers, phone-width layouts. Without it, screens that need one write their own width override and drift off the system. ----------------------------------------------------------------------------- */ .al-btn-block { display: flex; /* NOT block: block destroys the flex context, the label stops being a flex item, and overflow:hidden does nothing on an inline box — so a full-width button silently lost its ability to truncate. */ width: 100%; } /* ============================================================================= THE TEXT INPUT A field is three parts that belong together: the name above it, the control, and one line underneath that carries a hint before anything is wrong and the error message after. The line is always reserved, so a field never changes height when an error appears and a form never jumps under someone's cursor. The label sits ABOVE. Beside the field is more compact but a long name either truncates or breaks the alignment, and it does not survive a narrow screen. Inside as a placeholder disappears the moment someone types, which is when they most want to check what the field was. NO HOVER STATE, deliberately. The button has one because it is a single target you aim at. A form is twenty targets you sweep across, and lighting each one in turn is noise — the text cursor already says the field is typeable. ============================================================================= */ .al-field { /* THE LABEL NO LONGER SHOUTS. Jeff's ruling on ALLM-7417, filed as ALLM-7420. The micro-caps treatment that was here is kept in this note because the reasoning was sound and the next person will otherwise re-propose it: the label is the smallest rung at weight 700, which separates it from its value by weight rather than by size, and uppercase was doing that separating job too. Weight and size still do it. Caps were the part that carried a cost everywhere else -- design/rules.json already says nothing in this product shouts, and field labels were the one large unstated exception. One token, one consumer, 1,609 .al-field instances across 106 files. Nothing re-points it, which is why the flip is the whole change. THE TRACKING GOES WITH THE CAPS. 0.04em is letter-spacing tuned to open up all-caps text; on sentence case at this size it reads loose. Jeff ruled the casing on ALLM-7417 and then ruled the tracking separately after seeing all three states side by side, because the second was not covered by the first and guessing it either way was a change he had not asked for. */ --al-field-label-color: var(--al-sys-color-text-primary); --al-field-label-size: var(--al-sys-font-size-100); --al-field-label-weight: var(--al-sys-font-weight-heading); --al-field-label-tracking: normal; --al-field-label-transform: none; --al-field-hint-color: var(--al-sys-color-text-muted); --al-field-hint-size: var(--al-sys-font-size-100); --al-field-gap: 6px; /* ALLM-7415. The POS centres its text on body and html (App.css), and that centring is INHERITED, so it reaches every child of a field that does not declare its own -- the label is merely where it shows first. Declaring it here rather than on the label rule is why the next element in a field to gain visible text does not have to be found again. `left` rather than `start`: this file uses `left` seven times and `start` never, and this is not the change that introduces one. agent-c17w5r's measurement, Jeff's option 2. */ text-align: left; display: block; } /* :not(.al-affix) because an affix is also a span. Without it, writing the affix as instead of
hands it to this rule — display:block at (0,1,1) beats .al-affix's display:flex at (0,1,0) — and the whole control collapses, silently and totally. Excluding it here is the root fix; restating the affix's own styles at a higher specificity would only be a second copy waiting to drift. A DIRECT
carrying role="group" and aria-labelledby, and the label is the same direct with an id on it. Nothing about the look changes -- .al-field > span already draws the label and does not care what its parent's tag is. What changes is that the grouping is stated in a way the browser can act on, instead of being implied by a wrapper that would act on it wrongly. WHY NOT MAKE EVERY FIELD A GROUP and be done with one pattern. Because a group is not a label: a screen reader names a group when focus enters it and names a label as the control's own name, and for a single input the label is the better of the two. The simple field keeps the better answer; the composite takes the one that works. .al-field-control IS THE ROW, and it exists so the group's parts line up without the page saying how. Anything in it that should take the leftover width says so with al-field-grow; everything else keeps the size it asked for. The gap is the system's control gap, so an input beside a button sits the same distance apart as the two buttons in a form-actions row. -------------------------------------------------------------------------- */ .al-field-composite { /* nothing to re-point. The frame's tokens are the frame's, and the composite is the same frame wearing a different tag -- a variant that restated them would be a second definition waiting to drift from the first. */ display: block; } .al-field-control { box-sizing: border-box; display: flex; align-items: center; gap: var(--al-sys-control-gap); /* a composite may wrap on a narrow page; it may not squash its own controls, and min-width:0 is what lets a grown child shrink instead of overflowing */ flex-wrap: wrap; min-width: 0; } /* the part that takes the leftover width. Stated on the child rather than assumed by position: in an input-and-button pair the input grows, and in a button-and- value pair it is the value, and nothing about the order says which. SCOPED UNDER THE ROW, and that is the half that makes it work. Every control in this file states `flex: none` and `width: 100%` so it fills whatever box it is given, and both of those are (0,1,0) written LATER in the file than this rule -- so written flat, the input kept flex:none, took the whole row on its width, and pushed the button onto a second line. Rendered and confirmed, not reasoned about. Under the row it is (0,2,0) and the question stops being about file order. flex-basis is 0, not auto, for the same reason: an auto basis reads the control's own width:100% as its starting size, which is the whole row before any space is shared out. */ .al-field-control > .al-field-grow { flex: 1 1 0; width: auto; min-width: 0; } /* ============================================================================= FOR SCREEN READERS ONLY A label that has to exist and must not be seen: the header of a column whose cells hold nothing but an icon button, the name of a group of radios that the layout already makes obvious, a live region announcing a result. The alternative people reach for is `display: none`, which removes it from the accessibility tree as well and so removes the only thing it was for. `clip-path` rather than the old `clip: rect()`, and `white-space: nowrap` so a long label cannot be broken into a column one pixel wide and read out a letter at a time. ============================================================================= */ .al-sr-only { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .al-input { --al-input-height: var(--al-sys-control-height-md); --al-input-padding-x: var(--al-sys-control-padding-x-md); --al-input-font-size: var(--al-sys-font-size-300); --al-input-radius: var(--al-sys-control-radius); --al-input-border-width: var(--al-sys-control-border-width); --al-input-border-color: var(--al-sys-color-border-control); --al-input-fill: var(--al-sys-color-surface-control); --al-input-text: var(--al-sys-color-text-primary); --al-input-placeholder: var(--al-sys-color-text-placeholder); --al-input-disabled-opacity: var(--al-sys-state-disabled-opacity); --al-input-line-height: var(--al-sys-line-height-control); --al-input-focus-hairline-width: var(--al-sys-focus-hairline-width); --al-input-focus-hairline-light: var(--al-sys-color-focus-hairline-light); --al-input-focus-hairline-dark: var(--al-sys-color-focus-hairline-dark); --al-input-focus-ring-width: var(--al-sys-focus-ring-width); --al-input-focus-ring-color: var(--al-sys-color-focus-ring); box-sizing: border-box; /* see the button — the system owns its box model */ display: block; width: 100%; /* a floor, not a fixed height — same reasoning as the button */ flex: none; height: auto; min-height: var(--al-input-height); padding: 0.35em var(--al-input-padding-x); border: var(--al-input-border-width) solid var(--al-input-border-color); border-radius: var(--al-input-radius); background: var(--al-input-fill); color: var(--al-input-text); font: inherit; font-size: var(--al-input-font-size); /* SET, not inherited. A host page with line-height 1.65 put a 21.45px line box inside the 28px tier and the small field rendered 33px. A size tier that changes with the host page's typography is not a tier. */ line-height: var(--al-input-line-height); } .al-input::placeholder { color: var(--al-input-placeholder); } /* the same ring as the button, for the same reason: a hairline each side means one of them always separates it from whatever is behind. The border reads the input's OWN border token rather than the ring colour. That one word is the difference between an error surviving focus and being erased by it: setting border-color to the ring here was a PROPERTY overriding a token, so the instant someone clicked into a wrong field the red edge turned brand-green and the field stopped saying anything was wrong. Which token the border points at is decided by the two rules underneath — a valid field's edge becomes the accent, an invalid one keeps its red and turns the RING red instead. */ .al-input:focus { outline: var(--al-input-focus-ring-width) solid transparent; outline-offset: var(--al-input-focus-hairline-width); border-color: var(--al-input-border-color); box-shadow: 0 0 0 var(--al-input-focus-hairline-width) var(--al-input-focus-hairline-light), 0 0 0 calc(var(--al-input-focus-hairline-width) + var(--al-input-focus-ring-width)) var(--al-input-focus-ring-color), 0 0 0 calc(var(--al-input-focus-hairline-width) * 2 + var(--al-input-focus-ring-width)) var(--al-input-focus-hairline-dark); } .al-input:not([aria-invalid='true']):focus { --al-input-border-color: var(--al-sys-color-accent-primary-line); } .al-input[aria-invalid='true']:focus { --al-input-focus-ring-color: var(--al-sys-color-status-error); } .al-input:disabled { opacity: var(--al-input-disabled-opacity); pointer-events: none; } /* READ-ONLY is not disabled. Disabled means "not available right now, maybe later"; read-only means "this is a fact you may read and copy but not change". Dropping the edge and tinting the ground says the second — the value stays at full strength and stays selectable, and it no longer looks like something you can type in. */ .al-input[readonly] { --al-input-border-color: transparent; --al-input-fill: var(--al-sys-color-surface-sunken); padding-left: calc(var(--al-input-padding-x) - var(--al-input-border-width)); } /* ERROR rides on aria-invalid, so it cannot be styled without also being announced. Edge and message only — no tint. Errors arrive in groups, and the version that looks better with one is not the one that survives six on a single form. */ .al-input[aria-invalid='true'] { --al-input-border-color: var(--al-sys-color-status-error); } .al-field:has([aria-invalid='true']) > small { --al-field-hint-color: var(--al-sys-color-status-error-text); } .al-input-sm { --al-input-height: var(--al-sys-control-height-sm); --al-input-padding-x: var(--al-sys-control-padding-x-sm); --al-input-font-size: var(--al-sys-font-size-200); } .al-input-lg { --al-input-height: var(--al-sys-control-height-lg); --al-input-padding-x: var(--al-sys-control-padding-x-lg); --al-input-font-size: var(--al-sys-font-size-400); } /* A unit, a currency symbol, a glyph — inside the field's edge so the whole thing reads as one control rather than a field with something parked next to it. */ .al-affix { --al-affix-height: var(--al-sys-control-height-md); --al-affix-padding-x: var(--al-sys-control-padding-x-md); --al-affix-font-size: var(--al-sys-font-size-300); --al-affix-radius: var(--al-sys-control-radius); --al-affix-border-width: var(--al-sys-control-border-width); --al-affix-border-color: var(--al-sys-color-border-control); --al-affix-fill: var(--al-sys-color-surface-control); /* the unit is CONTENT, not a hint. It reads the secondary ink rung, not the muted one — a gram symbol you cannot read is a broken control, not a quiet one. */ --al-affix-unit-color: var(--al-sys-color-text-secondary); --al-affix-line-height: var(--al-sys-line-height-control); --al-affix-focus-hairline-width: var(--al-sys-focus-hairline-width); --al-affix-focus-hairline-light: var(--al-sys-color-focus-hairline-light); --al-affix-focus-hairline-dark: var(--al-sys-color-focus-hairline-dark); --al-affix-focus-ring-width: var(--al-sys-focus-ring-width); --al-affix-focus-ring-color: var(--al-sys-color-focus-ring); box-sizing: border-box; /* see the button — the system owns its box model */ display: flex; align-items: center; width: 100%; flex: none; min-height: var(--al-affix-height); border: var(--al-affix-border-width) solid var(--al-affix-border-color); border-radius: var(--al-affix-radius); background: var(--al-affix-fill); /* THE TYPE IS STATED, NOT INHERITED, and this is the reason: line-height above is a unitless multiplier, so it resolves against whatever font-size reaches this element. The size token existed and was only ever applied to the unit INSIDE, so the wrapper took the host page's type: 13px on the config lists, a 15.6px line box against the 16.8px this control is supposed to have. Nothing looked wrong because the input states its own size, so only the box around it drifted. Same rule .al-card-title and .al-select already state for themselves: a control whose geometry the host decides is not a control. */ font-size: var(--al-affix-font-size); line-height: var(--al-affix-line-height); /* see the input */ } .al-affix > span { flex: none; padding: 0 var(--al-affix-padding-x); color: var(--al-affix-unit-color); } .al-affix .al-input { border: 0; height: auto; background: transparent; box-shadow: none; /* the input is the part of an affix that gives way. The base rule sets flex:none so a container cannot shrink a control below its tier, but in here that is exactly backwards: an unshrinkable 100%-wide input pushes the unit symbol out through the affix's own edge, so "$" and "g" ended up floating outside the box they are meant to sit inside. Caught by looking at it, not by the numbers, which were all fine. */ flex: 1 1 auto; width: auto; min-width: 0; /* the AFFIX owns the height, not the input inside it. Leaving the input's own floor in place stacked it on top of the affix's borders and made every affixed field 38px while claiming the 36px rung — two pixels taller than the plain field it sits next to in the same form. */ min-height: 0; } /* STATES re-point the affix's own tokens — rule 8, same as every other control. The earlier shape of this fix set border-color as a PROPERTY, which is the exact mistake that made four of the five audit bugs, so it is not used here. Invalid is written as a :not() on focus rather than relying on source order, so a focused wrong field keeps its red edge instead of turning brand-green under the cursor. */ /* THE AFFIX GETS THE SAME RING AS A PLAIN FIELD. It had none at all: the inner input's ring is deliberately removed so the pair reads as one control, and nothing replaced it, so focus was a 1.09:1 border swap. Two controls the file describes as reading "as one control" cannot have completely different focus treatments. */ .al-affix:focus-within { outline: var(--al-affix-focus-ring-width) solid transparent; outline-offset: var(--al-affix-focus-hairline-width); box-shadow: 0 0 0 var(--al-affix-focus-hairline-width) var(--al-affix-focus-hairline-light), 0 0 0 calc(var(--al-affix-focus-hairline-width) + var(--al-affix-focus-ring-width)) var(--al-affix-focus-ring-color), 0 0 0 calc(var(--al-affix-focus-hairline-width) * 2 + var(--al-affix-focus-ring-width)) var(--al-affix-focus-hairline-dark); } .al-affix:not(:has([aria-invalid='true'])):focus-within { --al-affix-border-color: var(--al-sys-color-focus-ring); } .al-affix:has([aria-invalid='true']):focus-within { --al-affix-focus-ring-color: var(--al-sys-color-status-error); } .al-affix:has([readonly]) { --al-affix-border-color: transparent; --al-affix-fill: var(--al-sys-color-surface-sunken); } .al-affix:has([aria-invalid='true']) { --al-affix-border-color: var(--al-sys-color-status-error); } /* SIZE follows the input inside it. Without this the affix hardcoded the md tier, so a small or large field wrapped in one silently stayed medium. */ .al-affix:has(.al-input-sm) { --al-affix-height: var(--al-sys-control-height-sm); --al-affix-padding-x: var(--al-sys-control-padding-x-sm); --al-affix-font-size: var(--al-sys-font-size-200); } .al-affix:has(.al-input-lg) { --al-affix-height: var(--al-sys-control-height-lg); --al-affix-padding-x: var(--al-sys-control-padding-x-lg); --al-affix-font-size: var(--al-sys-font-size-400); } /* The field needs no dark rule. It reads --al-sys-color-surface-control for its fill, -text-primary for its value, -border-control for its edge, -text-placeholder and -text-muted for its quiet ink, and the dark scope re-points all five. Deleting the two blocks that used to live here is what makes read-only and invalid survive on a dark panel: there is no longer a rule at (0,2,0) sitting above the state rules. */ /* ============================================================================ THE SELECT SCOPE, and it is deliberately smaller than the last version: the recipe dresses the CLOSED control. The open list is drawn by the operating system and is not ours to style, and the product's real dropdowns are Kendo's, which already handle the data binding, paging and virtualisation that a hand-built listbox would have to re-implement. Making those match the recipe is an OVERRIDE LAYER, written later alongside the ones for ag-Grid, Bootstrap and the rest. No token here exists to serve a third-party control. ============================================================================ */ .al-select { --al-select-height: var(--al-sys-control-height-md); --al-select-padding-x: var(--al-sys-control-padding-x-md); --al-select-font-size: var(--al-sys-font-size-300); --al-select-radius: var(--al-sys-control-radius); --al-select-border-width: var(--al-sys-control-border-width); --al-select-border-color: var(--al-sys-color-border-control); --al-select-fill: var(--al-sys-color-surface-control); --al-select-text: var(--al-sys-color-text-primary); --al-select-placeholder: var(--al-sys-color-text-placeholder); --al-select-caret: var(--al-sys-color-text-muted); --al-select-caret-size: 10px; --al-select-disabled-opacity: var(--al-sys-state-disabled-opacity); --al-select-focus-hairline-width: var(--al-sys-focus-hairline-width); --al-select-focus-hairline-light: var(--al-sys-color-focus-hairline-light); --al-select-focus-hairline-dark: var(--al-sys-color-focus-hairline-dark); --al-select-focus-ring-width: var(--al-sys-focus-ring-width); --al-select-focus-ring-color: var(--al-sys-color-focus-ring); --al-select-hover-border-color: var(--al-sys-color-accent-primary-line); /* the option list. It inherited nothing before, which is how a dark ground produced a white list carrying white text — the popup kept the platform's white while the text took the ground's ink. Both are set now, from ground-aware roles. */ --al-select-option-fill: var(--al-sys-color-surface-raised); --al-select-option-text: var(--al-sys-color-text-primary); --al-select-option-selected-fill: var(--al-sys-color-accent-primary); --al-select-option-selected-text: var(--al-sys-color-text-on-accent); --al-select-option-disabled-text: var(--al-sys-color-text-placeholder); --al-select-option-check: var(--al-sys-color-accent-primary-line); /* TWO TINTS, ONE LADDER. The chosen row is tinted and carries the check; hovering any row tints it harder. They are steps of the same idea rather than two competing treatments, and the check is what says "chosen" when the pointer is elsewhere. */ --al-select-option-selected-fill: var(--al-sys-color-row-tint-selected); --al-select-option-hover-fill: var(--al-sys-color-row-tint-active); /* appearance:none is the whole trick — it strips the platform's chrome so the box underneath is an ordinary one we can dress, while the control stays a real : keyboard, typeahead, screen readers, touch and form submission are all unchanged. What we get is the chrome — the ground, the hover, the chosen mark, the caret. Everything above this block is the fallback and needs no support for any of it, so a browser without base-select shows the platform's own list and nothing breaks. That is the whole reason this is written as an @supports block rather than as the default: the control degrades to the OS list rather than to a broken one. This is also what un-parks --al-sys-elevation-raised: the popup is ours to cast a shadow on, so the token finally has a consumer. ============================================================================ */ @supports (appearance: base-select) { .al-select, .al-select::picker(select) { appearance: base-select; } /* THE CARET IS A REAL CHILD NOW, so the control has to be a flex row. Left as display:block it laid the icon out as a block and it dropped onto its own line underneath the value — which is what put the caret under the text when closed and made it appear to jump when the list opened. The right padding also goes: it was reserving room for a background image that no longer exists. */ .al-select:not([size]):not([multiple]) { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: var(--al-select-padding-x); } .al-select::picker(select) { background: var(--al-select-option-fill); border: 1px solid var(--al-sys-color-border); border-radius: var(--al-select-radius); box-shadow: var(--al-sys-elevation-raised); padding: 5px; margin-block: 5px 0; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; } .al-select option { display: flex; align-items: center; gap: 8px; min-height: var(--al-select-height); padding: 0.3em 10px; border-radius: 5px; font-size: var(--al-select-font-size); background: transparent; /* the colour is stated, not inherited: the user agent paints a checked option with its own accent pair, and leaving `color` alone left the chosen row's text pale on our own hover tint. */ color: var(--al-select-option-text); } /* THE GROUND SAYS WHERE YOU ARE, THE CHECK SAYS WHAT IS CHOSEN. Two facts, two channels. Filling the chosen row with the accent instead would make an option carrying its own colour vanish into it, and it would then be competing with hover for the same background. */ /* the chosen row stays tinted whether or not the pointer is near it */ .al-select option:checked { background: var(--al-select-option-selected-fill); color: var(--al-select-option-text); font-weight: 600; } /* hover is one step up the same ladder, and it wins over chosen */ .al-select option:hover, .al-select option:focus, .al-select option:active, .al-select option:checked:hover, .al-select option:checked:active { background: var(--al-select-option-hover-fill); color: var(--al-select-option-text); outline: none; } .al-select option::checkmark { content: '✓'; color: var(--al-select-option-check); font-weight: 700; width: 1em; order: -1; } .al-select option:disabled { opacity: var(--al-sys-state-disabled-opacity); } /* the caret becomes a real element, so it can turn over when the list is open. The browser's own picker-icon is a filled triangle, and colouring it leaves it a triangle: it has to be MASKED OUT and replaced, or the chevron above never appears on the one engine most people are using. Masking rather than hiding keeps the element, so the rotate-on-open below still has something to turn. */ .al-select { background-image: none; } .al-select::picker-icon { color: transparent; width: var(--al-select-caret-size); height: var(--al-select-caret-size); background-color: var(--al-select-caret); mask: var(--al-ref-icon-chevron-down) center / contain no-repeat; -webkit-mask: var(--al-ref-icon-chevron-down) center / contain no-repeat; transition: transform var(--al-sys-motion-duration-state) var(--al-sys-motion-easing); } .al-select:open::picker-icon { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .al-select::picker-icon { transition: none; } } } /* ============================================================================ THE CHECKBOX AND THE RADIO They are ONE control with two marks and two meanings. Everything except the mark and the shape of the box is shared, so they are written once — a checkbox that drifts from its radio is the kind of inconsistency nobody reports and everybody notices. THE MARK IS A MASK, not a background image. The shape comes from an SVG and the COLOUR comes from a token, so a theme can move it. The select's caret had to bake its colour into the image; this does not, and it is the better pattern of the two. ============================================================================ */ .al-check { --al-check-size: 18px; --al-check-radius: 5px; --al-check-border-width: var(--al-sys-control-border-width); --al-check-border-color: var(--al-sys-color-border-control); --al-check-fill: var(--al-sys-color-surface-control); --al-check-mark: var(--al-sys-color-text-on-accent); --al-check-mark-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 4.3 6.5 11 2.8 7.3' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --al-check-selected-fill: var(--al-sys-color-accent-primary); --al-check-selected-border-color: var(--al-sys-color-accent-primary); --al-check-hover-border-color: var(--al-sys-color-accent-primary-line); --al-check-label-color: var(--al-sys-color-text-primary); --al-check-label-size: var(--al-sys-font-size-300); --al-check-gap: 9px; --al-check-row-gap: 9px; --al-check-disabled-opacity: var(--al-sys-state-disabled-opacity); --al-check-focus-hairline-width: var(--al-sys-focus-hairline-width); --al-check-focus-hairline-light: var(--al-sys-color-focus-hairline-light); --al-check-focus-hairline-dark: var(--al-sys-color-focus-hairline-dark); --al-check-focus-ring-width: var(--al-sys-focus-ring-width); --al-check-focus-ring-color: var(--al-sys-color-focus-ring); box-sizing: border-box; display: flex; /* FLEX-START, not centre. Centring looks right on a one-line label and wrong on a two-line one: the box drifts to the middle of the paragraph instead of sitting beside the thing it marks. */ align-items: flex-start; gap: var(--al-check-gap); cursor: pointer; font-size: var(--al-check-label-size); line-height: 1.45; /* set, not inherited — see the select */ color: var(--al-check-label-color); } .al-check > input { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex: none; position: relative; width: var(--al-check-size); height: var(--al-check-size); /* centre the box on the FIRST line of the label, whatever the label does after */ margin: calc((1.45em - var(--al-check-size)) / 2) 0 0; border: var(--al-check-border-width) solid var(--al-check-border-color); border-radius: var(--al-check-radius); background: var(--al-check-fill); cursor: inherit; } .al-check > input[type='radio'] { border-radius: 50%; } /* THE TOUCH TARGET is bigger than the box. An 18px square is the right SIZE and the wrong TARGET, so the box grows an invisible one around itself rather than growing itself. Nothing moves on the page. */ .al-check > input::before { content: ''; position: absolute; inset: calc((var(--al-check-size) - var(--al-check-hit)) / 2); --al-check-hit: 24px; } .al-check > input::after { content: ''; position: absolute; inset: -1px; background: var(--al-check-mark); -webkit-mask: var(--al-check-mark-image) center / contain no-repeat; mask: var(--al-check-mark-image) center / contain no-repeat; opacity: 0; } .al-check > input:checked::after, .al-check > input:indeterminate::after { opacity: 1; } .al-check > input:checked, .al-check > input:indeterminate { --al-check-fill: var(--al-check-selected-fill); --al-check-border-color: var(--al-check-selected-border-color); } .al-check > input:indeterminate { --al-check-mark-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8h8.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); } .al-check > input[type='radio']:checked { --al-check-mark-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.4' fill='%23000'/%3E%3C/svg%3E"); } .al-check:hover > input:not(:disabled) { --al-check-border-color: var(--al-check-hover-border-color); } .al-check > input:focus-visible { outline: var(--al-check-focus-ring-width) solid transparent; outline-offset: var(--al-check-focus-hairline-width); box-shadow: 0 0 0 var(--al-check-focus-hairline-width) var(--al-check-focus-hairline-light), 0 0 0 calc(var(--al-check-focus-hairline-width) + var(--al-check-focus-ring-width)) var(--al-check-focus-ring-color), 0 0 0 calc(var(--al-check-focus-hairline-width) * 2 + var(--al-check-focus-ring-width)) var(--al-check-focus-hairline-dark); } /* DISABLED POINTS not-allowed, AND READONLY DOES NOT. This is the system's policy and it is stated here because this is the control that caused it (ALLM-7165): a permission-locked location faded to 0.5 and said nothing else, so it read as a box you had not ticked yet rather than one you cannot. Opacity says inert; the cursor is what says "not by you". Thirteen disabled states carry it. The three [data-readonly='true'] controls and the two static crumbs deliberately keep `default`: readonly is not refusal, it is a value that happens to be fixed, and not-allowed there would promise a permission problem that does not exist. Jeff's call, made recipe-wide rather than on this one control, so a disabled switch cannot behave differently from a disabled checkbox. The cursor is not the whole answer and was never meant to be -- it is unreachable by keyboard and absent on touch. The reason itself lives in the app's [data-tooltip], which opens on focus as well as hover. */ .al-check:has(> input:disabled) { opacity: var(--al-check-disabled-opacity); cursor: not-allowed; } .al-check[data-invalid='true'] > input { --al-check-border-color: var(--al-sys-color-status-error); } .al-check[data-invalid='true'] > input:focus-visible { --al-check-focus-ring-color: var(--al-sys-color-status-error); } .al-check-sm { --al-check-size: 15px; --al-check-radius: 4px; --al-check-label-size: var(--al-sys-font-size-200); } /* A SET. Several of them under one name and one line, which is the field frame doing the same job it does for an input — so a group of checkboxes gets a hint, an error and a required mark without inventing anything. */ .al-check-set { display: flex; flex-direction: column; gap: var(--al-check-row-gap); } /* ---- text-entry ---------------------------------------------------- */ /* ============================================================================= TEXT ENTRY AND FORM STRUCTURE Five things: the textarea, the number field, the search field, the field group and the actions row. Four of them are the existing field family extended rather than restated. The text input, the field frame and the affix already decided what a typeable box looks like, so nothing here re-decides it. Where a rule below looks like a copy of one in the recipe, it is a copy on purpose: the same three-layer focus ring, the same aria-invalid hook, the same read-only treatment. A second idiom for "you may type here" is the failure this avoids. NOT ONE RULE IN THIS FILE NAMES A CONTROL ON A DARK GROUND. Every colour comes from a sys role that .al-on-dark re-points, so all five are correct on both grounds the day they are written. If something here ever looks wrong on a dark panel, the bug is a hardcoded value in this file, not a missing dark rule. ============================================================================= */ /* ============================================================================= THE TEXTAREA The single-line input truncates; this one wraps. That is the whole difference in what it means, and almost the whole difference in how it is built: same edge, same fill, same ring, same states, one extra decision about height. HEIGHT IS ROWS, NOT A CONTROL TIER. A control tier says how tall a box you click is. A textarea's height says how much of the text you can see at once, which is a different question and belongs to the content. So `rows` still works, and the size variants move the type and the horizontal padding without touching the height. ============================================================================= */ .al-textarea { --al-textarea-padding-x: var(--al-sys-control-padding-x-md); /* vertical padding steps with the tier and comes from the spacing scale. A single-line input can use one em-relative value because its box is a floor; here the padding is real air above the first line of prose, so it is a length. */ --al-textarea-padding-y: var(--al-sys-space-100); --al-textarea-font-size: var(--al-sys-font-size-300); /* SET, NOT INHERITED. This is the trap the select block warns about, and it bites hardest here: line-height is inherited, and a host page running 1.65 would make a three-line box render four lines tall while the token still said three. */ --al-textarea-line-height: var(--al-sys-line-height-body); /* THE FLOOR, in lines. Three, because two reads as a stretched input and someone writing a manifest note needs to see the sentence before the one they are typing. Anything shorter than three lines is a text input wearing the wrong control. Above the floor the height is the `rows` attribute, which is the author's own statement of how much of the note should be visible. */ --al-textarea-rows: 3; /* VERTICAL ONLY, and held as a token because two states turn it off. A state that overrode `resize` as a property would be the rule-8 mistake: the value belongs to the control, the state only re-points it. */ --al-textarea-resize: vertical; --al-textarea-radius: var(--al-sys-control-radius); --al-textarea-border-width: var(--al-sys-control-border-width); --al-textarea-border-color: var(--al-sys-color-border-control); --al-textarea-fill: var(--al-sys-color-surface-control); --al-textarea-text: var(--al-sys-color-text-primary); --al-textarea-placeholder: var(--al-sys-color-text-placeholder); --al-textarea-disabled-opacity: var(--al-sys-state-disabled-opacity); --al-textarea-focus-hairline-width: var(--al-sys-focus-hairline-width); --al-textarea-focus-hairline-light: var(--al-sys-color-focus-hairline-light); --al-textarea-focus-hairline-dark: var(--al-sys-color-focus-hairline-dark); --al-textarea-focus-ring-width: var(--al-sys-focus-ring-width); --al-textarea-focus-ring-color: var(--al-sys-color-focus-ring); box-sizing: border-box; /* see the button: the system owns its box model */ display: block; width: 100%; max-width: 100%; /* a textarea's `cols` default is 20 characters and it is an inline-block, so without this a wide value can push a form column open */ min-height: calc( var(--al-textarea-rows) * var(--al-textarea-line-height) * 1em + 2 * var(--al-textarea-padding-y) + 2 * var(--al-textarea-border-width) ); padding: var(--al-textarea-padding-y) var(--al-textarea-padding-x); border: var(--al-textarea-border-width) solid var(--al-textarea-border-color); border-radius: var(--al-textarea-radius); background: var(--al-textarea-fill); color: var(--al-textarea-text); /* the face is INHERITED, exactly as the input's is. The system names its own family at the sys tier, but a note whose face does not match the field above it is the visible bug, and matching the input beside it is what this family is for. A bare textarea inherits a monospace face from the user agent in some browsers, which is why `font: inherit` is not optional here. */ font: inherit; font-size: var(--al-textarea-font-size); line-height: var(--al-textarea-line-height); /* Dragging a textarea wider does not widen the column it sits in, so a horizontal resize overlaps whatever is beside it and the form stays broken until the page reloads. Down is the only direction with anywhere to go. */ resize: var(--al-textarea-resize); } .al-textarea::placeholder { color: var(--al-textarea-placeholder); } /* NO AUTO-GROW, and this one was written, rendered and taken back out. `field-sizing: content` makes a textarea grow as you type, which is pleasant and which Chromium supports today. It also silently outranks `rows`: a note authored as six lines rendered four in Chrome and six in Firefox, because the height stopped being a statement by the author and became a fact about how much had been typed so far. A height that means one thing in one browser and another in the next is the same defect as a size tier that changes with the host page's typography, and it is worse here because nothing on the screen says it happened. So the height is `rows`, in every browser, and the box scrolls when it runs out. The ring, the invalid hook and the read-only treatment are the input's, verbatim, reading this control's own tokens. The border deliberately reads --al-textarea-border-color rather than the ring colour: that one word is what stops focus erasing a red edge and telling someone their note is fine when it is too long. */ .al-textarea:focus { outline: var(--al-textarea-focus-ring-width) solid transparent; outline-offset: var(--al-textarea-focus-hairline-width); border-color: var(--al-textarea-border-color); box-shadow: 0 0 0 var(--al-textarea-focus-hairline-width) var(--al-textarea-focus-hairline-light), 0 0 0 calc(var(--al-textarea-focus-hairline-width) + var(--al-textarea-focus-ring-width)) var(--al-textarea-focus-ring-color), 0 0 0 calc(var(--al-textarea-focus-hairline-width) * 2 + var(--al-textarea-focus-ring-width)) var(--al-textarea-focus-hairline-dark); } .al-textarea:not([aria-invalid='true']):focus { --al-textarea-border-color: var(--al-sys-color-accent-primary-line); } .al-textarea[aria-invalid='true'] { --al-textarea-border-color: var(--al-sys-color-status-error); } .al-textarea[aria-invalid='true']:focus { --al-textarea-focus-ring-color: var(--al-sys-color-status-error); } /* READ-ONLY loses its edge and sinks, same as the input: a fact you may read and copy. No padding compensation, because a transparent border still occupies its 1px, so nothing has moved and adjusting for it would shift the text one pixel out of line with every other field in the group. The handle goes too, because there is nothing to resize toward: the value is already whatever length it is. */ .al-textarea[readonly] { --al-textarea-border-color: transparent; --al-textarea-fill: var(--al-sys-color-surface-sunken); --al-textarea-resize: none; } .al-textarea:disabled { --al-textarea-resize: none; opacity: var(--al-textarea-disabled-opacity); pointer-events: none; } /* SIZE re-points type and horizontal padding and leaves the height to `rows`, which is the point of the height being rows: a compact textarea holds the same amount of text in smaller type rather than showing less of it. */ .al-textarea-sm { --al-textarea-padding-x: var(--al-sys-control-padding-x-sm); --al-textarea-padding-y: var(--al-sys-space-50); --al-textarea-font-size: var(--al-sys-font-size-200); } .al-textarea-lg { --al-textarea-padding-x: var(--al-sys-control-padding-x-lg); --al-textarea-padding-y: var(--al-sys-space-150); --al-textarea-font-size: var(--al-sys-font-size-400); } /* ----------------------------------------------------------------------------- THE NOTE LINE, AND THE CHARACTER COUNT The field frame already reserves exactly one line under the control and gives it to the hint and then to the error. The count rides that SAME line rather than adding a second one: a form that grows a line when a counter appears is the jump the reserved line exists to prevent. The second selector is not decoration. `.al-field > small` is a class plus a type, so a bare class loses to it and the note would silently stay display:block with the count sitting in the text flow. Naming the parent is what outranks it, and it is cheaper than a second element. ----------------------------------------------------------------------------- */ .al-fieldnote, .al-field > .al-fieldnote { --al-fieldnote-gap: var(--al-sys-space-150); box-sizing: border-box; display: flex; align-items: baseline; /* the count sits on the hint's first baseline, not on its box, so a hint that wraps to two lines does not drag the count down with it */ gap: var(--al-fieldnote-gap); } .al-charcount { --al-charcount-color: var(--al-sys-color-text-muted); --al-charcount-size: var(--al-sys-font-size-100); --al-charcount-over-color: var(--al-sys-color-status-error-text); box-sizing: border-box; margin-inline-start: auto; /* to the far end, whether or not there is a hint beside it. A count is scanned, not read, and it is only findable in a fixed place. */ flex: none; font-size: var(--al-charcount-size); /* the colour is STATED, not inherited. An invalid field turns its note red, and a count that went red with it would claim the length was the problem when the problem was the licence number. */ color: var(--al-charcount-color); font-variant-numeric: tabular-nums; /* the digits change on every keystroke, and proportional figures make the whole count shuffle sideways as they do */ } /* Over the limit is the count's own state, and it is reachable only where the limit is enforced somewhere other than the browser: with `maxlength` set, typing stops at the cap and this never fires. */ .al-charcount[data-over='true'] { --al-charcount-color: var(--al-charcount-over-color); } /* ============================================================================= THE NUMBER FIELD Not a new control: `.al-input` with the digits made readable and the browser's spinner taken away. It mints no tokens of its own, because it re-points nothing. Everything it looks like is the input's, and the two things it changes are structural facts about numerals rather than values a theme would ever move. NO STEPPERS, and that is the decision this control exists to record. The native spinner is twelve pixels of unlabelled target that changes the number by an amount nobody stated, it appears only on hover so it is discoverable by accident, and it puts the scroll wheel in charge of a package weight while someone is scrolling past it. Every number in this product — a weight in grams, a unit price, a case count of 144 — is typed or scanned, never nudged. Where plus and minus really are the interaction, that is a quantity stepper: a control with two real targets, its own states and its own tier, and it gets built when a screen needs one. Follows `.al-btn-block`'s precedent: a variant that changes structure states properties, and says why, rather than pretending to be a token. ============================================================================= */ .al-input-number { /* tabular figures, so a column of quantities lines up and the caret does not shuffle sideways as 1s become 7s while someone types */ font-variant-numeric: tabular-nums; /* LEFT ALIGNED, like every other field, which is why nothing sets it: start alignment is already the default and restating it would only be a thing to keep in step. The box is as wide as the layout, not as wide as the number, so right-aligning parks the value away from its label and away from the unit sitting on the left edge of an affix. A column of numbers lining up on the decimal point is a table cell's job, where the cell is sized to the number. `appearance: textfield` is what removes the spinner in Firefox; the two pseudo-elements below do it in Chrome and Safari. */ appearance: textfield; -moz-appearance: textfield; } .al-input-number::-webkit-outer-spin-button, .al-input-number::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } /* ============================================================================= THE SEARCH FIELD A SEARCH FIELD IS AN AFFIX. It carries `al-affix al-search`, and that is deliberate: the frame, the edge, the fill, the focus ring, read-only, invalid and all three sizes are already decided there, and a search box that drifted from the field beside it would be the most obvious inconsistency on any toolbar. What this adds is the payload — a glyph in front and a way to empty it. The magnifier is a pseudo-element, because it is decoration: nothing should be able to select it, tab to it or hear it announced. The clear button is a real