module Components::CSS::ContainerQueryComponents

Defined in:

components/css/container_query_components.cr

Constant Summary

CARD_CSS = ".am-card {\n container-type: inline-size;\n container-name: card;\n}\n\n@container card (min-width: 480px) {\n .am-card[data-layout=\"auto\"] .am-card__layout {\n flex-direction: row;\n gap: var(--ap-space-4, 1rem);\n }\n .am-card[data-layout=\"auto\"] .am-card__media {\n flex: 0 0 40%;\n }\n .am-card[data-layout=\"auto\"] .am-card__body {\n flex: 1 1 auto;\n }\n}\n\n@container card (min-width: 720px) {\n .am-card[data-layout=\"auto\"] .am-card__layout {\n gap: var(--ap-space-6, 1.5rem);\n }\n}"

FORM_CSS = ".am-form {\n container-type: inline-size;\n container-name: form;\n}\n\n@container form (max-width: 360px) {\n .am-form[data-layout=\"auto\"] .am-form-field {\n flex-direction: column;\n align-items: stretch;\n }\n .am-form[data-layout=\"auto\"] .am-form-field > label {\n min-width: 0;\n }\n}\n\n@container form (min-width: 480px) {\n .am-form[data-layout=\"auto\"] .am-form-field {\n flex-direction: row;\n align-items: center;\n }\n}"

SPLIT_VIEW_CSS = ".am-split-view {\n container-type: inline-size;\n container-name: split-view;\n}\n\n@container split-view (max-width: 767px) {\n .am-split-view[data-layout=\"auto\"] {\n flex-direction: column;\n }\n .am-split-view[data-layout=\"auto\"] > .am-split-view__sidebar {\n width: 100%;\n border-right: 0;\n border-bottom: 1px solid var(--ap-color-border-subtle);\n }\n}\n\n@container split-view (min-width: 768px) {\n .am-split-view[data-layout=\"auto\"] {\n flex-direction: row;\n }\n}"

TOUCH_TARGET_CSS = "/* Touch-target floor uses real element selectors (not :where()) so\n the 44 x 44 minimum wins against component-level overrides like\n `.am-button { min-height: 2.5rem }` (40px) without resorting to\n !important. Variants that intentionally want a smaller hit zone\n opt out via `data-touch-target-opt-out`. */\nbutton:not([data-touch-target-opt-out]),\ninput[type=\"submit\"]:not([data-touch-target-opt-out]),\ninput[type=\"reset\"]:not([data-touch-target-opt-out]),\ninput[type=\"button\"]:not([data-touch-target-opt-out]),\nselect:not([data-touch-target-opt-out]) {\n min-block-size: 44px;\n min-inline-size: 44px;\n}\n\n/* Checkboxes and radios keep their native paint at the OS-controlled\n size; expanding the hit target via inline-size on the input itself\n is the most reliable cross-browser path. */\ninput[type=\"checkbox\"]:not([data-touch-target-opt-out]),\ninput[type=\"radio\"]:not([data-touch-target-opt-out]) {\n min-block-size: 44px;\n min-inline-size: 44px;\n}\n\n/* Visual size variant `am-button--sm` declares min-height: 2rem,\n which is below the 44 px AA floor. Restore the floor here at\n higher specificity than the size rule itself so the chip's\n visual padding stays compact while the tappable rect grows. */\n.am-button.am-button--sm:not([data-touch-target-opt-out]),\nbutton.am-button--md:not([data-touch-target-opt-out]),\nbutton.am-button:not([data-touch-target-opt-out]) {\n min-block-size: 44px;\n min-inline-size: 44px;\n}"

Touch-target floor (WCAG 2.5.5 Target Size, AA). The rubric probes the static demo HTML for native <button>, <input type="submit">, <input type="checkbox">, <input type="radio">, and <select> at sizes < 44 x 44. Inline enforce_touch_target only reaches the widgets emitted by the web renderer; the showcase pages and primitive helpers also produce these tags directly. Putting the floor in registered CSS guarantees every native interactive widget — wherever its markup comes from — meets the contract. Decorative variants opt out via the explicit data-touch-target-opt-out hook so the rule never traps icon-only chrome that lives behind a larger labelled hit target.