/* * NO @import of a webfont host here, deliberately. Loading the fonts is the * consuming app's job — see "Fonts" in the README. * * This file used to open with a Google Fonts @import, and it was broken for * every consumer using a bundler. CSS requires @import to precede all other * rules; a bundler that concatenates stylesheets puts other rules ahead of it, * and the browser then drops it silently. Confirmed in a Next.js 16 / * Turbopack app: the built bundle contained no @import and no * `fonts.googleapis` string at all, so no font ever loaded. * * It failed quietly rather than loudly. The font tokens named bare families * with no generic fallback, so the unresolved families fell through to the * browser default and the whole system rendered in a default serif — which * reads as a token bug, not a font-loading one. The fallbacks added to * token-overrides.json are what makes that failure mode legible. * * Reaching a third-party host at CSS parse time was also the wrong default * regardless: it is a render-blocking request the consumer did not opt into, * it bypasses next/font and friends, and it hands visitor IPs to Google. */ @import url('./tokens/index.css'); /* * Before the components, deliberately. `.ion-icon` is a primitive that every * slot below sizes with its own `... svg` rule, and those rules have to be free * to win on ordering as well as specificity. */ @import url('./icon.css'); @import url('./button.css'); @import url('./tabs.css'); @import url('./alert.css'); @import url('./badge.css'); @import url('./input.css'); @import url('./textarea.css'); @import url('./phone-input.css'); @import url('./select.css'); @import url('./checkbox.css'); @import url('./radio.css'); @import url('./fieldset.css'); @import url('./toggle.css'); @import url('./slider.css'); @import url('./tree-view.css'); @import url('./menu.css'); @import url('./avatar.css'); @import url('./avatar-gradient.css'); @import url('./header.css'); @import url('./logo.css'); @import url('./table.css'); @import url('./table-batch.css'); @import url('./tree-grid.css'); @import url('./pagination.css'); @import url('./divider.css'); @import url('./toolbar.css'); @import url('./link.css'); @import url('./modal.css'); @import url('./popover.css'); @import url('./coachmark.css'); @import url('./app-switcher.css'); @import url('./split-pane.css'); @import url('./tooltip.css'); @import url('./toggletip.css'); @import url('./ai-label.css'); @import url('./chat-message.css'); @import url('./stack.css'); @import url('./grid.css'); @import url('./theme-zone.css'); @import url('./skip-link.css'); @import url('./toast.css'); @import url('./nav-item.css'); @import url('./scroll-progress.css'); @import url('./full-card.css'); /* * The agentic tier. No Figma counterpart yet, so these borrow their * measurements from Button and Alert rather than inventing any — see the * header of each file. */ @import url('./agent-stop.css'); @import url('./approval-gate.css'); @import url('./agent-activity.css'); @import url('./streaming-text.css'); @import url('./citation.css'); @import url('./confidence-indicator.css'); @import url('./empty-state.css'); @import url('./spinner.css'); @import url('./progress-bar.css'); @import url('./progress-ring.css'); @import url('./skeleton.css'); @import url('./breadcrumb.css'); @import url('./accordion.css'); @import url('./drawer.css'); @import url('./side-panel.css'); @import url('./description-list.css'); @import url('./list.css'); @import url('./button-group.css'); @import url('./split-button.css'); @import url('./copy-button.css'); @import url('./code-snippet.css'); @import url('./stepper.css'); @import url('./prompt-input.css'); @import url('./tool-call.css'); @import url('./number-input.css'); @import url('./search-field.css'); @import url('./password-input.css'); @import url('./status-indicator.css'); @import url('./inline-loading.css'); @import url('./notifications-panel.css'); @import url('./inline-edit.css'); @import url('./selectable-tile.css'); @import url('./truncated-text.css'); @import url('./timeline.css'); @import url('./segmented-control.css'); @import url('./sidebar.css'); @import url('./file-upload.css'); @import url('./combobox.css'); @import url('./multi-select.css'); @import url('./dual-listbox.css'); /* * date-range-picker AFTER date-picker, and the order is load-bearing rather * than alphabetical. The range band overrides `.ion-calendar__day`'s * border-radius at equal specificity — square sides so consecutive days join * into one bar — and at equal specificity the later rule is the one that wins. */ @import url('./date-picker.css'); @import url('./date-range-picker.css'); @import url('./date-time-picker.css'); @import url('./time-field.css'); @import url('./color-picker.css'); @import url('./stat-tile.css'); @import url('./setting-row.css'); @import url('./chart.css'); @import url('./card.css'); @import url('./page-header.css'); @import url('./tag-group.css'); @import url('./kbd.css'); @import url('./command-palette.css'); /* * Visually hidden, but not hidden from assistive tech. * * Written once here rather than per component: two components already needed * it for their live regions, and a second copy of a rule this fiddly is how the * two quietly diverge. `display: none` and `visibility: hidden` both remove the * node from the accessibility tree, so an announcement placed in one would * never be made — the clip-path is what keeps it readable while occupying no * space. No `margin: -1px`: that belongs to the older `clip: rect()` variant * and is not needed here, which is convenient, because it is also not a token. */ .ion-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* * Every IonBase element is border-box. * * Not cosmetic: `