/* ============================================================
ix-form-controls-v1.0.4.css
INBXIFY — Canonical form-control design system
Single source of truth for chips, pickers (combobox-style
inputs), and revert/cancel link affordances across T-A.
PARALLEL TO ix-buttons and ix-modals. Same philosophy: one
module owns one visual domain, consumed additively, migrate
legacy at leisure.
════════════════════════════════════════════════════════════
THREE PRIMITIVES
════════════════════════════════════════════════════════════
ix-chip Single-select / multi-select chip
(Asset Type selector, Attach/Create
toggle, filter pills with state, etc.)
ix-picker Combobox: text input with a positioned
dropdown list of selectable options
(Step 3 asset picker, future surfaces
like customer pickers, article pickers,
tag pickers, etc.)
ix-revert Small text-link affordance for
reverting an edit. Used at two scopes:
• per-control "Change" link
• flow-level "Cancel" link
Visually identical; semantics differ.
════════════════════════════════════════════════════════════
STATE MODIFIER — THE EDITING-STATE PATTERN
════════════════════════════════════════════════════════════
ix-chip--changed Chip has been selected in an
editing state; selection persists
as operator moves around making
other edits. Distinctive border
flags the field for "will save".
ix-picker-input--changed Picker has a value chosen but not
yet committed. Same visual
treatment as chip--changed.
The "changed" terminology matches existing design tokens
(--ix-changed-border, --ix-changed-shadow in
title-admin-page-design v1.4.x).
════════════════════════════════════════════════════════════
USAGE
════════════════════════════════════════════════════════════
Chips (single-select group):
Picker (combobox):
…
Revert link (per-control or flow-level):
════════════════════════════════════════════════════════════
LOAD ORDER (Webflow )
════════════════════════════════════════════════════════════
1. webflow.css
2. title-admin-page-design-v1.4.x.css (design tokens)
3. ta-studio-components-v1.0.x.css (component CSS)
4. ix-buttons-v1.0.4.css
5. ix-modals-v1.0.2.css
6. ix-form-controls-v1.0.4.css ← THIS FILE
7. ix-lightbox-v1.0.0.js (script — order below CSS bundle)
8. (page-specific overrides)
This file MUST load after design tokens and component CSS
so it wins the cascade via source order in addition to its
built-in armor.
════════════════════════════════════════════════════════════
CHROME-CASCADE ARMOR PATTERN (every selector uses this)
════════════════════════════════════════════════════════════
1. Bumped specificity — element-qualified + dual-class +
descendant selectors listed so single-class chrome
resets lose.
2. !important on all visual properties (background, color,
border, box-shadow).
3. Dual background-color + background-image where state
styling matters, so a chrome reset that nukes the
shorthand `background` leaves background-image alive.
════════════════════════════════════════════════════════════
FIRST CONSUMER
════════════════════════════════════════════════════════════
ta-bundles-v1.1.0.js (Bundles Cut 2 cascade)
• Step 1 Asset Type → ix-chip group
• Step 2 Attach/Create → ix-chip group
• Step 3 Asset picker → ix-picker
• Per-step Change → ix-revert
• Cascade Cancel → ix-revert
PLANNED CONSUMERS (no migration in this version; primitives
are available for adoption)
• T-A page tile editor (BA / FA / TS / TXA tiles —
retires the bespoke has-pending pattern)
• PubPlan tile dropdowns (Phase 4+)
• Content Manager filter dropdowns (Directory rebuild)
• Client Manager forms (50-field customer schema)
• ASF (Article Submission Form) editable fields
Authored 2026-05-18 as part of Bundles Cut 2 / Scenario K JS
build. Promoted from the cascade-local pattern that shipped
in bundles-cascade-mockup v0.4.
──────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════
v1.0.4 — THE .t-a PREFIX WAS NEVER THE ARMOR
Every rule in this file pairs a bare selector with a
.t-a-prefixed one. The .t-a class is emitted NOWHERE: no JS in
the platform adds it, no markup carries it. The live T-A body is
body-67 ix-topbar-on ta-rail-grouped ix-operator
so every .t-a half of every pair is dead, and only the bare half
applies.
That is survivable in ix-buttons, because its bare halves are
written DOUBLED — `.ix-btn.ix-btn--primary`, (0,2,0) — which
beats `section.publisher-wrapper *` (0,1,1) unaided. This file
copied the .t-a half and wrote its bare halves single, at
(0,1,0), so the wildcard won and forced background-color:#fff on
every control.
Three of the seven contested rules survived by luck: they asked
for white and the wildcard gave them white. Four did not:
.ix-picker-option:hover wanted cream -> hover did nothing
.ix-picker-input:disabled wanted cream -> looked enabled
.ix-picker-option wanted transparent
.ix-revert wanted transparent
-> a white box behind every
per-field cancel link
FIX: double the class on the bare half, exactly as ix-buttons
does. The .t-a halves are LEFT IN PLACE — harmless where the
class is absent, correct where it is present. Do not "simplify"
a bare selector in this file back to a single class.
Adding .t-a to the body would have been the wrong fix: it would
switch on every dormant rule in this file and in ix-buttons at
once, and nothing here has ever been rendered with them winning.
════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
IX-CHIP — single-select / multi-select toggleable label
════════════════════════════════════════════════════════════ */
.ix-chip.ix-chip,
.t-a button.ix-chip,
.t-a div.ix-chip {
/* Reset Webflow / browser defaults */
appearance: none !important;
-webkit-appearance: none !important;
/* Layout */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
/* Sizing */
padding: 8px 14px !important;
min-height: 32px !important;
line-height: 1.2 !important;
/* Type */
font-family: var(--ix-font-body, 'DM Sans', system-ui, sans-serif) !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
text-decoration: none !important;
white-space: nowrap !important;
/* Border + shape */
border: 1.5px solid var(--ix-border-input, #ddd9c8) !important;
border-radius: var(--ix-radius-sm, 8px) !important;
/* Surface */
background-color: var(--ix-white, #FFFFFF) !important;
background-image: none !important;
color: var(--ix-text-dark, #1e2a3a) !important;
/* Behavior */
cursor: pointer !important;
user-select: none !important;
transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s !important;
}
/* Hover (only when not changed and not disabled) */
.ix-chip:hover:not(:disabled):not(.ix-chip--changed),
.t-a .ix-chip:hover:not(:disabled):not(.ix-chip--changed) {
background-color: var(--ix-cream, #FAF9F5) !important;
border-color: var(--ix-text-light, #8a8e9a) !important;
}
/* Focus-visible (a11y) */
.ix-chip:focus-visible,
.t-a .ix-chip:focus-visible {
outline: none !important;
box-shadow: var(--ix-shadow-gold, 0 0 0 3px rgba(196,163,90,0.20)) !important;
}
/* Disabled */
.ix-chip:disabled,
.ix-chip[disabled],
.t-a .ix-chip:disabled,
.t-a .ix-chip[disabled] {
opacity: 0.4 !important;
cursor: not-allowed !important;
}
/* ── CHIP — CHANGED STATE ──────────────────────────────────
The editing-state pattern: selection persists, distinctive
border tells the operator this field will be saved.
──────────────────────────────────────────────────────── */
.ix-chip.ix-chip--changed,
.t-a button.ix-chip--changed,
.t-a div.ix-chip--changed {
background-color: var(--ix-gold-glow, rgba(196,163,90,0.12)) !important;
background-image: none !important;
border: 2px solid var(--ix-changed-border, #C4A35A) !important;
/* Compensate the +0.5px border so the chip doesn't shift */
padding: 7px 13px !important;
color: var(--ix-text-dark, #1e2a3a) !important;
font-weight: 600 !important;
}
.ix-chip.ix-chip--changed:hover:not(:disabled),
.t-a .ix-chip--changed:hover:not(:disabled) {
background-color: var(--ix-gold-shadow, rgba(196,163,90,0.20)) !important;
}
/* ════════════════════════════════════════════════════════════
IX-SEARCH — free-text filter input v1.0.1, sized .2, armored .3
── v1.0.3 — THE .t-a ARMOR NEVER FIRED ──
Every rule in this file pairs a bare selector with a .t-a-prefixed
one to raise specificity. On the live T-A page the body carries
body-67 ix-topbar-on ta-rail-grouped ix-operator
and NO .t-a class, so the armored halves never match. What is
actually applying is the bare .ix-search-input at (0,1,0) — which
loses to
section.publisher-wrapper * background-color:#fff !important
at (0,1,1). That is why the input stayed white after v1.0.2 set it
transparent. The fix is to armor against the WILDCARD rather than
against a class that is not on the page: .ix-search .ix-search-input
is (0,2,0) and wins on its own.
The .t-a selectors are left in place. They are harmless where the
class is absent and correct where it is present; removing them
would break any surface that does carry it.
Also widened: 380 -> 460 basis, 520 -> 620 cap.
── v1.0.2 — WIDTH AND SURFACE ──
v1.0.1 set flex: 0 1 320px. That is narrower than the string it
has to hold: "Search articles by name or customer…" runs about
295px at 13px DM Sans, and with 36 + 14px of inset the box needs
~345px before it clips. It clipped. The basis is now 380px and
the control GROWS into whatever the strip has spare, capped at
520px so it never crowds the tabs.
The surface is transparent. v1.0.1 hardcoded white, which read as
a lighter panel floating on the row-2 cream bed — a seam in the
exact place this work existed to remove. Transparent means the
control takes whatever surface it is dropped on and is correct on
all of them. Focus is carried by the border and the ring, not by
a fill, so nothing is lost.
Distinct from IX-PICKER on purpose. A picker SELECTS a value
that gets saved; a search FILTERS a view and is never written.
That is why this control has no --changed state: gold means
"this will be written when you press Save", and a query never
will. Using gold here would teach the operator that the colour
means nothing in particular.
REPLACES Asset Library's .cl-search-input, which carried a
10px radius against the 8px token, a #e3dfd2 border against
--ix-border-input #DDD9C8, and
.cl-search-input:focus { outline:none; border:none;
box-shadow:none }
which deleted the border on focus. No keyboard focus indicator
at all, and the visible reason the box looked like it collapsed
when clicked.
USAGE — prefer IxHeader.searchBox() over hand-writing this.
════════════════════════════════════════════════════════════ */
.ix-search.ix-search,
.t-a .ix-search {
position: relative !important;
display: flex !important;
align-items: center !important;
/* Grows into spare room, capped so the tabs are never crowded.
min-width is the floor at which the placeholder stops being
readable — below this the control should wrap, not shrink. */
flex: 1 1 460px !important;
max-width: 620px !important;
min-width: 260px !important;
/* v1.0.3 — the wrapper is a descendant too, so it also gets
whitewashed by `section.publisher-wrapper *`. */
background-color: transparent !important;
background-image: none !important;
}
.ix-search-ico,
.t-a .ix-search-ico {
position: absolute !important;
left: 12px !important;
width: 15px !important;
height: 15px !important;
color: var(--ix-text-light, #6B7280) !important;
pointer-events: none !important;
}
.ix-search-input.ix-search-input,
.t-a input.ix-search-input,
.t-a .ix-search-input {
appearance: none !important;
-webkit-appearance: none !important;
width: 100% !important;
min-width: 0 !important;
height: 36px !important;
/* 36px left clears the 15px glyph at left:12px with 9px of air. */
padding: 0 14px 0 36px !important;
font-family: var(--ix-font-body, 'DM Sans', system-ui, sans-serif) !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
border: 1.5px solid var(--ix-border-input, #DDD9C8) !important;
border-radius: var(--ix-radius-sm, 8px) !important;
/* v1.0.2 — TRANSPARENT, not white. The control inherits whatever
surface it sits on: the cream row-2 strip, the warm cream row 3,
or a white panel. A fixed white made it a lighter rectangle on
the strip, which is the seam this work removes. Dual declaration
per the chrome-cascade armor pattern: a reset nuking the
`background` shorthand still leaves the image rule. */
background-color: transparent !important;
background-image: none !important;
color: var(--ix-text-dark, #1e2a3a) !important;
outline: none !important;
transition: border-color 0.15s, box-shadow 0.15s !important;
}
/* v1.0.3 — (0,2,0), beats `section.publisher-wrapper *` (0,1,1).
This is the rule that actually lands on the live page; the bare
and .t-a variants above are kept for surfaces that differ. */
.ix-search .ix-search-input,
.ix-search input.ix-search-input {
background-color: transparent !important;
background-image: none !important;
padding: 0 14px 0 36px !important;
height: 36px !important;
border: 1.5px solid var(--ix-border-input, #DDD9C8) !important;
border-radius: var(--ix-radius-sm, 8px) !important;
color: var(--ix-text-dark, #1e2a3a) !important;
}
.ix-search .ix-search-input:focus,
.ix-search input.ix-search-input:focus {
background-color: transparent !important;
border-color: var(--ix-gold, #C4A35A) !important;
box-shadow: var(--ix-shadow-gold, 0 0 0 3px rgba(196,163,90,0.20)) !important;
}
.ix-search-input::placeholder,
.t-a .ix-search-input::placeholder {
color: var(--ix-text-light, #6B7280) !important;
opacity: 1 !important;
}
/* Focus KEEPS a border and adds a ring. The control this replaces
removed both. Still transparent — the ring is the signal, so the
control does not change surface under the operator's cursor. */
.ix-search-input:focus,
.t-a .ix-search-input:focus {
border-color: var(--ix-gold, #C4A35A) !important;
box-shadow: var(--ix-shadow-gold, 0 0 0 3px rgba(196,163,90,0.20)) !important;
}
/* Below the strip's wrap point the control takes the full row and
the cap comes off — see ix-header §ROW 2 END SLOT. */
@media (max-width: 860px) {
.ix-search,
.t-a .ix-search {
flex: 1 1 100% !important;
max-width: none !important;
}
}
.ix-search-input:disabled,
.ix-search-input[disabled],
.t-a .ix-search-input:disabled,
.t-a .ix-search-input[disabled] {
opacity: 0.4 !important;
cursor: not-allowed !important;
}
/* ════════════════════════════════════════════════════════════
IX-PICKER — text input + positioned dropdown list (combobox)
════════════════════════════════════════════════════════════ */
.ix-picker {
position: relative !important;
display: block !important;
max-width: 480px !important;
}
.ix-picker-input.ix-picker-input,
.t-a input.ix-picker-input {
/* Reset Webflow input chrome */
appearance: none !important;
-webkit-appearance: none !important;
/* Layout */
display: block !important;
width: 100% !important;
padding: 9px 12px !important;
min-height: 36px !important;
line-height: 1.3 !important;
/* Type */
font-family: var(--ix-font-body, 'DM Sans', system-ui, sans-serif) !important;
font-size: 13px !important;
font-weight: 400 !important;
letter-spacing: 0.01em !important;
/* Border + shape */
border: 1.5px solid var(--ix-border-input, #ddd9c8) !important;
border-radius: var(--ix-radius-sm, 8px) !important;
/* Surface */
background-color: var(--ix-white, #FFFFFF) !important;
background-image: none !important;
color: var(--ix-text-dark, #1e2a3a) !important;
/* Behavior */
cursor: text !important;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s !important;
}
.ix-picker-input::placeholder,
.t-a .ix-picker-input::placeholder {
color: var(--ix-text-light, #8a8e9a) !important;
}
/* Focus — neutral state */
.ix-picker-input:focus:not(.ix-picker-input--changed),
.t-a .ix-picker-input:focus:not(.ix-picker-input--changed) {
outline: none !important;
border-color: var(--ix-blue, #5b7fff) !important;
box-shadow: 0 0 0 3px var(--ix-blue-shadow, rgba(91,127,255,0.20)) !important;
}
/* Disabled */
.ix-picker-input.ix-picker-input:disabled,
.ix-picker-input[disabled],
.t-a .ix-picker-input.ix-picker-input:disabled,
.t-a .ix-picker-input[disabled] {
opacity: 0.4 !important;
cursor: not-allowed !important;
background-color: var(--ix-cream, #FAF9F5) !important;
}
/* ── PICKER-INPUT — CHANGED STATE ──────────────────────────
Same visual logic as chip--changed: gold-glow surface,
2px gold border. Distinctive at a glance.
──────────────────────────────────────────────────────── */
.ix-picker-input.ix-picker-input--changed,
.t-a input.ix-picker-input--changed {
background-color: var(--ix-gold-glow, rgba(196,163,90,0.12)) !important;
background-image: none !important;
border: 2px solid var(--ix-changed-border, #C4A35A) !important;
/* Compensate the +0.5px border so the input doesn't shift */
padding: 8px 11px !important;
font-weight: 600 !important;
color: var(--ix-text-dark, #1e2a3a) !important;
}
.ix-picker-input--changed:focus,
.t-a .ix-picker-input--changed:focus {
outline: none !important;
box-shadow: var(--ix-shadow-gold, 0 0 0 3px rgba(196,163,90,0.20)) !important;
}
/* ── PICKER LIST + OPTIONS ────────────────────────────────
Positioned dropdown that appears beneath the input. Hidden
by default via the `hidden` attribute OR an inline display
override controlled by JS. Consumers should toggle the
`hidden` attribute, not class names, to follow native a11y.
──────────────────────────────────────────────────────── */
.ix-picker-list.ix-picker-list,
.t-a .ix-picker-list {
position: absolute !important;
top: calc(100% + 4px) !important;
left: 0 !important;
right: 0 !important;
z-index: var(--ix-z-dropdown, 5000) !important;
max-height: 280px !important;
overflow-y: auto !important;
margin: 0 !important;
padding: 4px 0 !important;
background-color: var(--ix-white, #FFFFFF) !important;
border: 1px solid var(--ix-border, #e4e0d4) !important;
border-radius: var(--ix-radius-sm, 8px) !important;
box-shadow: var(--ix-shadow-md, 0 4px 24px rgba(91,127,255,0.06)) !important;
}
.ix-picker-list[hidden],
.t-a .ix-picker-list[hidden] {
display: none !important;
}
.ix-picker-option.ix-picker-option,
.t-a .ix-picker-option {
display: block !important;
padding: 9px 12px !important;
font-family: var(--ix-font-body, 'DM Sans', system-ui, sans-serif) !important;
font-size: 13px !important;
font-weight: 400 !important;
color: var(--ix-text-dark, #1e2a3a) !important;
background-color: transparent !important;
border: 0 !important;
border-bottom: 1px solid var(--ix-border-soft, #eee9dc) !important;
cursor: pointer !important;
text-align: left !important;
width: 100% !important;
transition: background-color 0.1s !important;
}
.ix-picker-option:last-child,
.t-a .ix-picker-option:last-child {
border-bottom: 0 !important;
}
.ix-picker-option.ix-picker-option:hover,
.ix-picker-option:focus-visible,
.t-a .ix-picker-option.ix-picker-option:hover,
.t-a .ix-picker-option:focus-visible {
background-color: var(--ix-cream, #FAF9F5) !important;
outline: none !important;
}
.ix-picker-option-meta,
.t-a .ix-picker-option-meta {
display: block !important;
margin-top: 2px !important;
font-family: var(--ix-font-mono, 'DM Mono', monospace) !important;
font-size: 11px !important;
color: var(--ix-text-light, #8a8e9a) !important;
}
/* ════════════════════════════════════════════════════════════
IX-CHIP-GROUP — wrapper for chip rows
Only adds layout; no visual treatment. Optional helper.
════════════════════════════════════════════════════════════ */
.ix-chip-group,
.t-a .ix-chip-group {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
/* ════════════════════════════════════════════════════════════
IX-REVERT — small text-link cancel/revert action
Used at two scopes:
• Per-control revert (e.g., "Change" link beside a step
label that has a saved selection)
• Flow-level cancel (e.g., "Cancel" link in a cascade
footer to abandon the whole flow)
Visually identical at both scopes.
════════════════════════════════════════════════════════════ */
.ix-revert.ix-revert,
.t-a button.ix-revert,
.t-a a.ix-revert {
/* Reset */
appearance: none !important;
-webkit-appearance: none !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
/* Layout */
display: inline-block !important;
padding: 2px 4px !important;
/* Type */
font-family: var(--ix-font-body, 'DM Sans', system-ui, sans-serif) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
color: var(--ix-text-mid, #5a6478) !important;
/* Behavior */
cursor: pointer !important;
transition: color 0.15s !important;
}
.ix-revert:hover:not(:disabled),
.t-a .ix-revert:hover:not(:disabled) {
color: var(--ix-text-dark, #1e2a3a) !important;
}
.ix-revert:focus-visible,
.t-a .ix-revert:focus-visible {
outline: none !important;
color: var(--ix-text-dark, #1e2a3a) !important;
text-decoration-thickness: 2px !important;
}
.ix-revert:disabled,
.ix-revert[disabled],
.t-a .ix-revert:disabled,
.t-a .ix-revert[disabled] {
opacity: 0.4 !important;
cursor: not-allowed !important;
text-decoration: underline !important;
}
/* ════════════════════════════════════════════════════════════
END · ix-form-controls-v1.0.4.css
════════════════════════════════════════════════════════════ */