asma-ui-core 3.84.0 → 3.86.0

package/dist/src/components/icons/index.d.ts

@@ -165,7 +165,9 @@ export * from './file-xls-icon';
 export * from './file-image-icon';
 export * from './draw-icon';
 export * from './prohibition-icon';
+export * from './prohibition-large-icon';
 export * from './stylus-note-icon';
+export * from './stylus-note-large-icon';
 export * from './print-icon';
 export * from './arrow-shrink-icon';
 export * from './indeterminate-icon';

package/dist/src/components/icons/prohibition-icon/ProhibitionIcon.d.ts

@@ -1,3 +1,3 @@
 import { SVGProps } from 'react';
-/** Material Symbols `block` glyph, exactly as used by the Ad Voca Figma (rejected states). */
+/** Design-system `not-allowed` glyph (24px grid), as used on the Ad Voca Reject buttons. */
 export declare function ProhibitionIcon(props: SVGProps<SVGSVGElement>): JSX.Element;

package/dist/src/components/icons/prohibition-large-icon/ProhibitionLargeIcon.d.ts

@@ -0,0 +1,7 @@
+import { SVGProps } from 'react';
+/**
+ * Thin-stroke `block` illustration on a 140px grid — the exact Ad Voca Figma export used inside
+ * the tinted result-page circle ("Document rejected"). Not interchangeable with `ProhibitionIcon`:
+ * the 24px glyph has a much heavier stroke and looks wrong at illustration sizes.
+ */
+export declare function ProhibitionLargeIcon(props: SVGProps<SVGSVGElement>): JSX.Element;

package/dist/src/components/icons/prohibition-large-icon/index.d.ts

@@ -0,0 +1 @@
+export * from './ProhibitionLargeIcon';

package/dist/src/components/icons/stylus-note-icon/StylusNoteIcon.d.ts

@@ -1,3 +1,3 @@
 import { SVGProps } from 'react';
-/** Material Symbols `stylus_note` glyph, exactly as used by the Ad Voca Figma (signed states). */
+/** Design-system `stylus_note` glyph (24px grid), as used on the Ad Voca sign buttons. */
 export declare function StylusNoteIcon(props: SVGProps<SVGSVGElement>): JSX.Element;

package/dist/src/components/icons/stylus-note-large-icon/StylusNoteLargeIcon.d.ts

@@ -0,0 +1,7 @@
+import { SVGProps } from 'react';
+/**
+ * Thin-stroke `stylus_note` illustration on a 140px grid — the exact Ad Voca Figma export used
+ * inside the tinted result-page circle ("Document signed"). Not interchangeable with
+ * `StylusNoteIcon`: the 24px glyph has a much heavier stroke and looks wrong at illustration sizes.
+ */
+export declare function StylusNoteLargeIcon(props: SVGProps<SVGSVGElement>): JSX.Element;

package/dist/src/components/icons/stylus-note-large-icon/index.d.ts

@@ -0,0 +1 @@
+export * from './StylusNoteLargeIcon';

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.84.0",
+    "version": "3.86.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",

package/src/styles/index.css

@@ -47,6 +47,109 @@
     }
 }
 
+/*
+ * ASMA-8210 (TB-02) — touch-readiness primitives for the Ad Voca mobile TabBar/Menu work.
+ *
+ * Four opt-in utilities. Every one of them is inert until a finger or a mouse button is on the
+ * control, or until the viewport is mobile, so no resting style changes anywhere: the frozen
+ * barrel (`api-surface.test.ts`) and the VRT baselines — captured at 1280x720 with a fine
+ * pointer — are untouched by design, not by luck. They reach consumers through `dist/style.css`,
+ * the same route as `.noselect` and `.absolute-center`, so no new export is needed to use them.
+ *
+ * Deliberately UNLAYERED (like the reduced-motion block above), not in `@layer utilities`:
+ * `tailwind.config.ts` sets `important: true`, and Tailwind v3 importantifies custom utilities
+ * inside `@layer utilities` too. That would turn `.asma-hit-area`'s `position: relative` into
+ * `!important`, making it unoverridable by Tailwind position utilities and by inline styles.
+ * Unlayered, these rules still sit after the `@tailwind utilities` output in source order, so
+ * the one `!important` we do want (`.asma-touch-target`, below) keeps beating `min-h-*`.
+ *
+ * Pick per control:
+ *   .asma-touch-ready   control that already has a designed `:active` (Button, Chip, Switch).
+ *   .asma-pressable     control with no pressed state at all (Tab, MenuItem, Link).
+ *   .asma-hit-area      isolated control that must reach 44px without growing.
+ *   .asma-touch-target  row in a stack, where growing on a phone is the honest fix.
+ *
+ * Sizes come from `--asma-touch-target-size` (44px, Apple HIG / WCAG 2.5.5 AAA; WCAG 2.5.8 AA
+ * asks only 24px, so this is the stricter of the two) and `--asma-pressed-opacity`. Both are
+ * plain custom properties: a component or a consumer retunes them without a new class.
+ */
+
+/*
+ * Kills the grey iOS/Android tap flash and the 300ms double-tap-zoom delay that `touch-action:
+ * auto` implies. Both behaviours exist only for touch input, so a mouse or trackpad renders and
+ * behaves exactly as it did before.
+ */
+.asma-touch-ready,
+.asma-pressable {
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+}
+
+/*
+ * The replacement for the tap flash removed above — without it, touch would end up with *less*
+ * feedback than before. Opacity is background-agnostic (filled, outlined and bare controls all
+ * read the same) and layout-neutral, so it never reflows and never reaches a VRT baseline.
+ * Disabled controls stay inert, matching their `onClick` being detached.
+ */
+.asma-pressable:active:not(:disabled):not([aria-disabled='true']) {
+    opacity: var(--asma-pressed-opacity, 0.7);
+}
+
+/*
+ * A 44px pointer target on a control that must keep its drawn size: a transparent, centred
+ * overlay that belongs to the control, so a press anywhere inside it activates the control
+ * itself. `width/height: 100%` keeps it at least as large as the control it sits on.
+ *
+ * The supplied `position: relative` carries no `!important` (see the unlayered note above), so
+ * an inline `style` always overrides it, and a Tailwind position utility (importantified by
+ * `important: true`) does too.
+ *
+ * Caveats, all of them reasons to reach for `.asma-touch-target` instead:
+ *   - it is NOT mobile-gated: the enlarged pointer target applies to desktop mouse users too
+ *     (harmless for isolated controls, surprising next to other clickable things);
+ *   - it owns the element's `::after`, clobbering any decorative `::after` the control has;
+ *   - an ancestor `overflow: hidden` clips it, and a scroll container counts it as overflow;
+ *   - it covers nested interactive children, and neighbours closer together than 44px would
+ *     overlap and steal each other's presses.
+ */
+.asma-hit-area {
+    position: relative;
+}
+
+.asma-hit-area::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 100%;
+    height: 100%;
+    min-width: var(--asma-touch-target-size, 44px);
+    min-height: var(--asma-touch-target-size, 44px);
+    transform: translate(-50%, -50%);
+}
+
+/*
+ * 44px tall rows in a stack, where overlapping hit areas would fight and growing is what the
+ * design actually wants. Gated to the mobile breakpoint (`_breakpoints.scss` `$mobile-max`) so
+ * tablet and desktop — including every VRT baseline — stay byte-identical. `!important` is
+ * required to outrank Tailwind's own `min-h-*`, which `important: true` emits with `!`.
+ *
+ * This is a LATER-SOURCE OVERRIDE, not a CSS `max()` floor — it replaces whatever `min-height`
+ * the component declares, it cannot clamp against it. Two consequences (ASMA-8210 review B1):
+ *   - Only apply it where the EFFECTIVE min-height is below 44px — effective, not the class you
+ *     can see: stacked utilities resolve by emitted order, so verify with computed style. On a
+ *     component resting at `min-h-12` (48px) this rule would SHRINK the target — that is why
+ *     StyledTab takes only `asma-pressable` (both tab variants effectively rest at 48px; even
+ *     the small one, whose `min-h-10` loses to the base `min-h-12` by source order).
+ *   - It deliberately sets no `min-width`: a width override would replace designed minimums
+ *     like the tab's `min-w-[90px]` with 44px. Width floors stay per-component.
+ */
+@media (max-width: 743px) {
+    .asma-touch-target {
+        min-height: var(--asma-touch-target-size, 44px) !important;
+    }
+}
+
 @layer utilities {
     .flip-180 {
         transform: rotate(180deg);

package/src/styles/touchReadiness.interaction.test.tsx

@@ -0,0 +1,161 @@
+import { afterEach, describe, it } from 'vitest'
+import { expect } from 'storybook/test'
+import { StyledButton } from 'src/components/inputs/button/StyledButton'
+import { StyledMenuItem } from 'src/components/navigation/menu/StyledMenuItem'
+import { StyledTab } from 'src/components/navigation/tabs/StyledTab'
+import { StyledTabs } from 'src/components/navigation/tabs/StyledTabs'
+import { cleanup, mount } from 'src/test-utils/renderInteraction'
+import { page } from 'src/test-utils/interaction-api'
+
+/**
+ * ASMA-8210 (TB-02) — the touch-readiness primitives in `src/styles/index.css`.
+ *
+ * Real Chromium rather than the unit project, because every claim here is a computed-style or a
+ * hit-testing question: `::after` geometry, `touch-action` and "is this point inside the target"
+ * are exactly what a DOM emulator invents. The suite mounts components directly (no stories), so
+ * it adds no VRT baseline — see `docs/a11y-keyboard-contract.md`.
+ */
+
+/** The `min-height` the mobile-gated `.asma-touch-target` rule declares, or null if it is missing. */
+const touchTargetMinHeightUnderMobileMedia = (): string | null => {
+    for (const sheet of Array.from(document.styleSheets)) {
+        let rules: CSSRule[]
+        try {
+            rules = Array.from(sheet.cssRules)
+        } catch {
+            continue // cross-origin sheet; ours are inline <style> tags, so nothing of interest here
+        }
+        for (const rule of rules) {
+            if (!(rule instanceof CSSMediaRule) || !rule.conditionText.includes('743px')) continue
+            for (const inner of Array.from(rule.cssRules)) {
+                if (inner instanceof CSSStyleRule && inner.selectorText.includes('.asma-touch-target')) {
+                    return inner.style.getPropertyValue('min-height')
+                }
+            }
+        }
+    }
+    return null
+}
+
+const alphaOf = (color: string): number => {
+    const channels = /rgba?\(([^)]+)\)/.exec(color)?.[1]?.split(',') ?? []
+    // rgb() has no alpha channel, so an unparsed or 3-channel colour is fully opaque.
+    return channels.length < 4 ? 1 : Number(channels[3])
+}
+
+describe('touch-readiness primitives', () => {
+    afterEach(cleanup)
+
+    it('gives .asma-hit-area a 44px pointer target without changing the drawn size', async () => {
+        // Fixed positioning pins the probe away from the body edge so the hit tests below are
+        // arithmetic, not a guess about layout. A fixed box is still the containing block its
+        // ::after resolves against.
+        const { container } = mount(
+            <button className='asma-hit-area' style={{ position: 'fixed', left: 100, top: 100, width: 24, height: 24 }}>
+                probe
+            </button>,
+        )
+        const probe = container.querySelector('button')!
+
+        // The class supplies `position: relative` WITHOUT `!important` — the rule lives outside
+        // `@layer utilities` precisely so Tailwind's `important: true` cannot importantify it
+        // (ASMA-8210 review). If this assertion fails, the rule regressed back into the layer and
+        // the inline `fixed` (and any Tailwind position utility) would silently lose again.
+        await expect(getComputedStyle(probe).position).toBe('fixed')
+
+        // The visual box is untouched — this is hit-area padding, not a size change (ASMA-8210).
+        const box = probe.getBoundingClientRect()
+        await expect(box.width).toBe(24)
+        await expect(box.height).toBe(24)
+
+        const overlay = getComputedStyle(probe, '::after')
+        await expect(overlay.minWidth).toBe('44px')
+        await expect(overlay.minHeight).toBe('44px')
+
+        // 92px is outside the 24px box (which starts at 100) but inside the 44px overlay centred on
+        // it (90 → 134). A press there must still land on the control.
+        await expect(document.elementFromPoint(92, 112)).toBe(probe)
+        // …and the target stays bounded: 85px is outside the overlay entirely.
+        await expect(document.elementFromPoint(85, 112)).not.toBe(probe)
+    })
+
+    it('suppresses the tap flash and the double-tap-zoom delay on a pressable control', async () => {
+        const { container } = mount(<StyledMenuItem>Item</StyledMenuItem>)
+        const item = container.querySelector('li')!
+
+        await expect(item.classList.contains('asma-pressable')).toBe(true)
+        await expect(item.classList.contains('asma-touch-target')).toBe(true)
+
+        const style = getComputedStyle(item)
+        await expect(style.touchAction).toBe('manipulation')
+        await expect(alphaOf(style.getPropertyValue('-webkit-tap-highlight-color'))).toBe(0)
+        // Resting opacity is untouched — the pressed feedback lives entirely under `:active`, which
+        // is why no VRT baseline moves.
+        await expect(style.opacity).toBe('1')
+    })
+
+    it('keeps the 44px row growth on phones only, so tablet and desktop are unchanged', async () => {
+        await expect(touchTargetMinHeightUnderMobileMedia()).toBe('var(--asma-touch-target-size, 44px)')
+
+        // The interaction project runs at 1280x720 (vite.config.ts), i.e. the VRT viewport. The rule
+        // above must not apply here, or every desktop baseline would shift.
+        await expect(window.matchMedia('(max-width: 743px)').matches).toBe(false)
+        const { container } = mount(<StyledMenuItem>Item</StyledMenuItem>)
+        await expect(getComputedStyle(container.querySelector('li')!).minHeight).toBe('40px')
+    })
+
+    it('on a phone viewport, grows sub-44px rows and never shrinks a designed minimum', async () => {
+        // 390x700 puts the tester iframe under the 743px gate — the cascade CI otherwise never
+        // sees (interaction and VRT both run at 1280x720). Guards ASMA-8210 review B1: the
+        // touch-target utility is a later-source override, not a floor, so a mis-scoped opt-in
+        // would silently SHRINK a tab's effective 48x90 minimum to 44px. Both tab variants rest
+        // at 48px — the small variant's `min-h-10` loses to the base `min-h-12` by emitted
+        // order (pre-existing quirk, `cn` is plain clsx) — so NEITHER may carry the override.
+        await page.viewport(390, 700)
+        try {
+            await expect(window.matchMedia('(max-width: 743px)').matches).toBe(true)
+            const { container } = mount(
+                <>
+                    <StyledTabs value={0}>
+                        <StyledTab label='Default' />
+                    </StyledTabs>
+                    <StyledTabs size='small' value={0}>
+                        <StyledTab label='Small' />
+                    </StyledTabs>
+                    <StyledMenuItem>Item</StyledMenuItem>
+                </>,
+            )
+            const tabs = Array.from(container.querySelectorAll('[role="tab"]'))
+            await expect(tabs.length).toBe(2)
+
+            // Tabs carry no touch-target class: the effective 48px/90px minimums survive on
+            // both variants, and neither shrinks.
+            for (const tab of tabs) {
+                const tabStyle = getComputedStyle(tab)
+                await expect(tabStyle.minHeight).toBe('48px')
+                await expect(tabStyle.minWidth).toBe('90px')
+                await expect(tab.classList.contains('asma-touch-target')).toBe(false)
+            }
+
+            // Menu item: 40px → 44px, and it must not gain a min-width it never declared
+            // (Chromium resolves the initial `min-width: auto` to 0px on a block-level li).
+            const itemStyle = getComputedStyle(container.querySelector('li')!)
+            await expect(itemStyle.minHeight).toBe('44px')
+            await expect(itemStyle.minWidth).toBe('0px')
+        } finally {
+            // The desktop viewport every other test in this project assumes (vite.config.ts).
+            await page.viewport(1280, 720)
+        }
+    })
+
+    it('opts the button into touch readiness without dimming its designed pressed state', async () => {
+        const { container } = mount(<StyledButton dataTest='touch-ready-probe'>Save</StyledButton>)
+        const button = container.querySelector('button')!
+
+        await expect(button.classList.contains('asma-touch-ready')).toBe(true)
+        // StyledButton.module.scss already paints `:active` from the button colour tokens. Taking
+        // `.asma-pressable` as well would layer a 0.7 opacity over those designed colours.
+        await expect(button.classList.contains('asma-pressable')).toBe(false)
+        await expect(getComputedStyle(button).touchAction).toBe('manipulation')
+    })
+})