@dloizides/auth-web 1.13.0 → 1.14.0

package/dist/index.mjs

@@ -8,15 +8,18 @@ export { BffAuthClient, createFetchHttpClient } from '@dloizides/auth-client';
 // src/components/AuthScreen.tsx
 var FULL_WIDTH = "100%";
 var CARD_BORDER_WIDTH = 1;
+var CARD_TOP_OFFSET = 64;
 function useAuthScreenStyles(theme) {
   return useMemo(() => {
     const { colors, radii, spacing, typography } = theme;
     return StyleSheet.create({
       screen: {
         flex: 1,
-        justifyContent: "center",
+        // Deliberately NOT `justifyContent: 'center'` — see CARD_TOP_OFFSET.
+        justifyContent: "flex-start",
         alignItems: "center",
         padding: spacing.md,
+        paddingTop: CARD_TOP_OFFSET,
         backgroundColor: colors.background
       },
       card: {
@@ -74,7 +77,8 @@ var defaultAuthTheme = {
   typography: {
     title: 28,
     subtitle: 16,
-    label: 14,
+    // 13, not 14 — the shared contract's `field` voice. See AuthThemeTypography.label.
+    label: 13,
     body: 16,
     caption: 12
   }
@@ -390,15 +394,21 @@ function withTestIdPrefix(baseId, prefix) {
 var FULL_WIDTH2 = "100%";
 var CARD_MAX_WIDTH = 420;
 var BUTTON_VERTICAL_PADDING = 14;
+var SCREEN_TOP_OFFSET = 64;
 function useAuthStyles(theme) {
   return useMemo(() => {
     const { colors, radii, spacing, typography } = theme;
     return StyleSheet.create({
       screen: {
         flex: 1,
-        justifyContent: "center",
+        // Top-anchored, NOT centred — a centred card re-centres as it grows and
+        // drags the inputs up under the cursor. Same reasoning (and the same
+        // measurement) as `useAuthScreenStyles`' CARD_TOP_OFFSET; kept in step so
+        // a standalone `<LoginForm>` and an `<AuthScreen>`-composed one agree.
+        justifyContent: "flex-start",
         alignItems: "center",
         padding: spacing.md,
+        paddingTop: SCREEN_TOP_OFFSET,
         backgroundColor: colors.background
       },
       card: {
@@ -2012,14 +2022,15 @@ function DevicePinLengthPicker({
   const theme = useAuthTheme(themeProp);
   const dynamic = usePickerStyles(theme);
   const baseId = withTestIdPrefix(AuthTestIds.devicePinEnrollLength, testIdPrefix);
-  return /* @__PURE__ */ jsx(View, { style: styles2.row, children: DEVICE_PIN_ALLOWED_DIGITS.map((option) => {
+  return /* @__PURE__ */ jsx(View, { accessibilityRole: "radiogroup", role: "radiogroup", style: styles2.row, children: DEVICE_PIN_ALLOWED_DIGITS.map((option) => {
     const active = option === selected;
     return /* @__PURE__ */ jsx(
       Pressable,
       {
+        "aria-checked": active,
         accessibilityHint: interpolate(optionHint, { count: option }),
         accessibilityLabel: String(option),
-        accessibilityRole: "button",
+        accessibilityRole: "radio",
         accessibilityState: { selected: active },
         disabled,
         style: [styles2.pill, dynamic.pill, active ? dynamic.active : null],
@@ -3163,6 +3174,7 @@ function PreferredMethodSettingsCard({
           return /* @__PURE__ */ jsx(
             TouchableOpacity,
             {
+              "aria-checked": isSelected,
               accessibilityHint: labels.description,
               accessibilityLabel: option.label,
               accessibilityRole: "radio",
@@ -3449,6 +3461,7 @@ function DemoCredentialsHint({
         /* @__PURE__ */ jsx(
           TouchableOpacity,
           {
+            "aria-expanded": expanded,
             accessibilityHint: labels.toggleHint,
             accessibilityLabel: labels.toggle,
             accessibilityRole: "button",