{"version":3,"file":"accessibility.css.cjs","names":[],"sources":["../../../src/styles/mixins/accessibility.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Visually-Hidden (\"sr-only\") Style\n *\n * Single source of truth for the standard visually-hidden-but-accessible\n * clipping technique — hides content visually while keeping it in the\n * accessibility tree (screen readers, `aria-live` regions).\n *\n * Two forms are exported from the same declarations so component stylesheets\n * and JS-created DOM elements never drift out of sync:\n * - `srOnlyMixin` — a `.sr-only` class for component `styles: [...]` arrays.\n * - `SR_ONLY_INLINE_STYLE` — the equivalent `cssText` string for elements\n *   created outside any component's shadow root (e.g. a live region appended\n *   directly to `document.body`).\n *\n * @example\n * ```ts\n * // Component stylesheet\n * import { srOnlyMixin } from '../../styles';\n * return { styles: [srOnlyMixin, componentStyles], template: html`<span class=\"sr-only\">...</span>` };\n *\n * // JS-created element outside a shadow root\n * import { SR_ONLY_INLINE_STYLE } from '../../styles';\n * el.style.cssText = SR_ONLY_INLINE_STYLE;\n * ```\n */\nexport const SR_ONLY_INLINE_STYLE =\n  'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;' +\n  'white-space:nowrap;border-width:0;clip-path:inset(50%);';\n\nexport const srOnlyMixin = css`\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    white-space: nowrap;\n    border-width: 0;\n    clip-path: inset(50%);\n  }\n`;\n\n/**\n * Coarse Pointer Mixin\n *\n * Under `@media (pointer: coarse)`, promotes the full component one size tier\n * so padding, gap, font-size, height, and icon-size all grow proportionally\n * with the WCAG 44 px touch target — not just the minimum height in isolation:\n *\n * - default / `size=\"md\"` → lg-scale tokens + `--_touch-target: var(--size-11)`\n * - `size=\"sm\"` → md-scale tokens + `--_touch-target: var(--size-11)`\n * - `size=\"lg\"` → touch target only (already at max scale)\n *\n * Interactive elements inside the component that need a guaranteed tap target\n * should still reference `--_touch-target`:\n *\n * ```css\n * .close { min-height: var(--_touch-target); min-width: var(--_touch-target); }\n * ```\n *\n * @example\n * ```ts\n * import { coarsePointerMixin } from '../../styles';\n *\n * return {\n *   styles: [coarsePointerMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const coarsePointerMixin = css`\n  @media (pointer: coarse) {\n    /* Default / md size: promote all scale tokens one tier up (md → lg) */\n    :host,\n    :host([size='md']) {\n      --_touch-target: var(--size-11);\n      --_font-size: var(--text-base);\n      --_gap: var(--size-2-5);\n      --_height: var(--size-12);\n      --_size: var(--size-6);\n      --_icon-size: var(--size-6);\n      --_padding: var(--size-2-5) var(--size-5);\n    }\n\n    /* sm size: promote to md scale */\n    :host([size='sm']) {\n      --_touch-target: var(--size-11);\n      --_font-size: var(--text-sm);\n      --_gap: var(--size-2);\n      --_height: var(--size-10);\n      --_size: var(--size-5);\n      --_icon-size: var(--size-5);\n      --_padding: var(--size-2) var(--size-4);\n    }\n\n    /* lg size: already max, just enforce touch target */\n    :host([size='lg']) {\n      --_touch-target: var(--size-11);\n    }\n  }\n`;\n\n/**\n * Reduced Motion Mixin\n *\n * Defines `--_motion-transition: none` and `--_motion-animation: none` on\n * `:host` under `@media (prefers-reduced-motion: reduce)`.\n * Component CSS opts in via CSS variable fallbacks:\n *\n * ```css\n * .panel { transition: var(--_motion-transition, opacity 300ms ease); }\n * .loader { animation: var(--_motion-animation, spin 0.6s linear infinite); }\n * ```\n *\n * @example\n * ```ts\n * import { reducedMotionMixin } from '../../styles';\n *\n * return {\n *   styles: [reducedMotionMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const reducedMotionMixin = css`\n  @media (prefers-reduced-motion: reduce) {\n    :host {\n      --_motion-transition: none;\n      --_motion-animation: none;\n    }\n  }\n`;\n"],"mappings":"+BA2BA,IAAa,EACX,uIAGW,EAAc,EAAA,GAAG;;;;;;;;;;;;EA0CjB,EAAqB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDxB,EAAqB,EAAA,GAAG"}