@lockin90/ui-native 1.0.1 → 2.1.0

package/src/components/Icon.tsx

@@ -71,6 +71,7 @@ import {
   Pill,
   Play,
   Plus,
+  QrCode,
   Quote,
   RefreshCcw,
   Ruler,
@@ -231,6 +232,7 @@ export type IconName =
   | 'drop'
   | 'utensil'
   | 'barcode-scan'
+  | 'qr-code'
   | 'pill'
   | 'flask'
   | 'syringe'
@@ -422,6 +424,7 @@ const LUCIDE: Record<Exclude<IconName, CustomIconName>, LucideIcon> = {
   drop: Droplet,
   utensil: Utensils,
   'barcode-scan': ScanBarcode,
+  'qr-code': QrCode,
   pill: Pill,
   flask: FlaskConical,
   syringe: Syringe,

package/src/components/Menu.tsx

@@ -2,6 +2,7 @@ import { useRef, useState, type ReactNode } from 'react';
 import { View, Text, Pressable, StyleSheet, Modal, Dimensions } from 'react-native';
 import { colors, radii, fonts, nativeShadows } from '@lockin90/tokens';
 import { Icon } from './Icon';
+import { absoluteFill } from '../internal/absoluteFill';
 
 /** A single row in a {@link Menu}. A `divider` row renders a hairline
  *  separator instead of an action (its `label` is ignored). */
@@ -129,7 +130,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  backdrop: { ...StyleSheet.absoluteFillObject },
+  backdrop: { ...absoluteFill },
   panel: {
     position: 'absolute',
     minWidth: 160,

package/src/components/Modal.tsx

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 import { Modal as RNModal, View, Text, Pressable, StyleSheet } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { colors, radii, fonts } from '@lockin90/tokens';
+import { absoluteFill } from '../internal/absoluteFill';
 
 export interface ModalProps {
   /** Show the modal. When false, nothing renders. */
@@ -61,7 +62,7 @@ export function Modal({ open = true, onClose, title, children, footer, size = 'm
 
 const styles = StyleSheet.create({
   scrim: {
-    ...StyleSheet.absoluteFillObject,
+    ...absoluteFill,
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/PasswordInput.tsx

@@ -14,9 +14,12 @@ export interface PasswordInputProps extends Omit<TextInputProps, 'secureTextEntr
   leading?: ReactNode;
   /** start with the password revealed @default false */
   defaultVisible?: boolean;
-  /** accessibility label for the show/hide toggle
-   *  (default "Show password" / "Hide password") */
-  toggleLabel?: string;
+  /** accessibility label of the toggle while masked (pass a localized string)
+   *  @default 'Show password' */
+  showLabel?: string;
+  /** accessibility label of the toggle while revealed (pass a localized string)
+   *  @default 'Hide password' */
+  hideLabel?: string;
 }
 
 /**
@@ -30,7 +33,8 @@ export function PasswordInput({
   inputSize = 'md',
   leading,
   defaultVisible = false,
-  toggleLabel,
+  showLabel = 'Show password',
+  hideLabel = 'Hide password',
   style,
   onFocus,
   onBlur,
@@ -40,7 +44,6 @@ export function PasswordInput({
   const [visible, setVisible] = useState(defaultVisible);
   const sm = inputSize === 'sm';
   const borderColor = invalid ? colors.zoneLow : focused ? colors.accent : colors.border2;
-  const aria = toggleLabel ?? (visible ? 'Hide password' : 'Show password');
 
   return (
     <View style={styles.wrap}>
@@ -63,7 +66,7 @@ export function PasswordInput({
         />
         <Pressable
           accessibilityRole="button"
-          accessibilityLabel={aria}
+          accessibilityLabel={visible ? hideLabel : showLabel}
           hitSlop={8}
           onPress={() => setVisible((v) => !v)}
           style={styles.trail}

package/src/components/PhaseWheel.tsx

@@ -2,6 +2,7 @@ import { useId, type ReactNode } from 'react';
 import { View, Text, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { Circle, Defs, FeGaussianBlur, Filter, G, Line, Path, Rect, Text as SvgText } from 'react-native-svg';
 import { colors, fonts, radii } from '@lockin90/tokens';
+import { absoluteFill } from '../internal/absoluteFill';
 
 /** A colored phase band on the 24h ring, drawn CLOCKWISE from `from` to `to`
  *  (hours 0..24). When `from > to` the band wraps through midnight (e.g. 23→7). */
@@ -694,7 +695,7 @@ export function PhaseWheel({
 const styles = StyleSheet.create({
   root: { position: 'relative', alignItems: 'center', justifyContent: 'center' },
   center: {
-    ...StyleSheet.absoluteFillObject,
+    ...absoluteFill,
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/PkChart.tsx

@@ -12,6 +12,7 @@ import {
 } from 'react-native';
 import Svg, { Path, Line, Rect, Defs, LinearGradient, Stop, ClipPath } from 'react-native-svg';
 import { colors, fonts, radii } from '@lockin90/tokens';
+import { absoluteFill } from '../internal/absoluteFill';
 
 /** A single dose taken at `at` hours from t0, of `mg` of substance. */
 export interface PkDose {
@@ -326,7 +327,7 @@ export function PkChart({
           {beatAnim && line && canvasW > 0 ? (
             <Animated.View
               pointerEvents="none"
-              style={[StyleSheet.absoluteFillObject, { opacity: beatAnim.glowOpacity }]}
+              style={[StyleSheet.absoluteFill, { opacity: beatAnim.glowOpacity }]}
             >
               <Svg width={canvasW} height={height} viewBox={`0 0 ${VB_W} ${height}`} preserveAspectRatio="none">
                 <Path d={line} fill="none" stroke={color} strokeWidth={7} strokeLinecap="round" strokeLinejoin="round" />

package/src/components/Popover.tsx

@@ -3,6 +3,7 @@ import { View, Text, Pressable, StyleSheet, Modal, Dimensions } from 'react-nati
 import Svg, { Rect, Path } from 'react-native-svg';
 import { colors, radii, fonts, nativeShadows } from '@lockin90/tokens';
 import { Icon } from './Icon';
+import { absoluteFill } from '../internal/absoluteFill';
 
 /* expo-clipboard is an optional dependency — not a hard dep of this kit.
  * Resolve it lazily and guard usage; if it's absent we keep the visual
@@ -112,7 +113,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  backdrop: { ...StyleSheet.absoluteFillObject },
+  backdrop: { ...absoluteFill },
   panel: {
     position: 'absolute',
     maxWidth: 260,

package/src/components/ProGate.tsx

@@ -3,6 +3,7 @@ import { View, Text, Pressable, StyleSheet, type ViewProps } from 'react-native'
 import Svg, { Path, Rect } from 'react-native-svg';
 import { colors, radii, fonts } from '@lockin90/tokens';
 import { OptionalBlurView } from '../internal/optionalBlur';
+import { absoluteFill } from '../internal/absoluteFill';
 
 export interface ProGateProps extends Omit<ViewProps, 'children'> {
   /** Lock-card heading. */
@@ -100,7 +101,7 @@ const styles = StyleSheet.create({
     opacity: 0.35,
   },
   frost: {
-    ...StyleSheet.absoluteFillObject,
+    ...absoluteFill,
   },
   contentEmpty: {
     minHeight: 150,

package/src/components/RestTimer.tsx

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, type StyleProp, type ViewStyle } from 'react-na
 import Svg, { Circle, Defs, FeGaussianBlur, Filter, G } from 'react-native-svg';
 import { colors, fonts } from '@lockin90/tokens';
 import { Button } from './Button';
+import { absoluteFill } from '../internal/absoluteFill';
 
 export interface RestTimerProps {
   /** Seconds left (drives the arc + the centered readout). */
@@ -159,7 +160,7 @@ const styles = StyleSheet.create({
   ring: { width: SIZE, height: SIZE },
   ringCompact: { width: SIZE_COMPACT, height: SIZE_COMPACT },
   center: {
-    ...StyleSheet.absoluteFillObject,
+    ...absoluteFill,
     alignItems: 'center',
     justifyContent: 'center',
     gap: 2,

package/src/components/Ring.tsx

@@ -2,6 +2,7 @@ import { useId, type ReactNode } from 'react';
 import { View, Text, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { Circle, Defs, FeGaussianBlur, Filter, G, LinearGradient, Stop } from 'react-native-svg';
 import { colors, fonts, radii } from '@lockin90/tokens';
+import { absoluteFill } from '../internal/absoluteFill';
 
 /** Zone verdict color for a 0–100 value (same thresholds as the chart catalog). */
 function zoneColor(v: number): string {
@@ -238,7 +239,7 @@ export function Ring({
 const styles = StyleSheet.create({
   root: { position: 'relative', alignItems: 'center', justifyContent: 'center' },
   center: {
-    ...StyleSheet.absoluteFillObject,
+    ...absoluteFill,
     alignItems: 'center',
     justifyContent: 'center',
   },

package/src/components/SegmentedTabs.tsx

@@ -3,6 +3,7 @@ import { LinearGradient } from 'expo-linear-gradient';
 import { colors, radii, fonts, gradients, nativeShadows } from '@lockin90/tokens';
 import { hapticSelection } from "../internal/optionalHaptics";
 import { Icon, type IconName } from './Icon';
+import { absoluteFill } from '../internal/absoluteFill';
 
 /**
  * Per-segment tone — mirrors the web `SegmentedTone`. Two families:
@@ -347,7 +348,7 @@ const styles = StyleSheet.create({
   // absolutely positioned behind the label) + glow, mirroring web
   // `[data-tone='mint'|'gradient'] .is-active`. The label paints dark-on-bright.
   tabActiveFill: {
-    ...StyleSheet.absoluteFillObject,
+    ...absoluteFill,
     borderRadius: radii.pill,
   },
   glowMint: { ...nativeShadows.glowMint },

package/src/components/Select.tsx

@@ -44,6 +44,11 @@ export interface SelectProps {
   searchPlaceholder?: string;
   /** title shown at the top of the option sheet (with a close button). */
   title?: string;
+  /** accessibility label of the sheet's close button (pass a localized string). @default 'Close' */
+  closeLabel?: string;
+  /** the field's name for screen readers when there is no visible `label`
+   *  (falls back to `label`). Mirrors web `aria-label`. */
+  accessibilityLabel?: string;
   /**
    * Field scale. `'md'` (default) is the standard form field. `'sm'` is the
    * design settings compact glass pill (`.pref-select`): mono 11px value,
@@ -114,6 +119,8 @@ export function Select({
   searchable = false,
   searchPlaceholder = 'Search…',
   title,
+  closeLabel = 'Close',
+  accessibilityLabel,
   size = 'md',
   leading,
 }: SelectProps) {
@@ -147,6 +154,8 @@ export function Select({
           disabled && styles.fieldDisabled,
         ]}
         accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityValue={selected ? { text: selected.label } : undefined}
         accessibilityState={{ disabled, expanded: open }}
         disabled={disabled}
         onPress={() => { hapticSelection(); setOpen(true); }}
@@ -174,7 +183,7 @@ export function Select({
                   <Text style={styles.title}>{title.toUpperCase()}</Text>
                   <Pressable
                     accessibilityRole="button"
-                    accessibilityLabel="Close"
+                    accessibilityLabel={closeLabel}
                     hitSlop={8}
                     onPress={close}
                     style={styles.closeBtn}

package/src/components/ShareCard.tsx

@@ -5,6 +5,7 @@ import { BrandMark } from './BrandMark';
 import { GradientText } from './GradientText';
 import { Ring } from './Ring';
 import { Stat } from './Stat';
+import { absoluteFill } from '../internal/absoluteFill';
 
 export type ShareCardGradient = 'flux' | 'cta' | 'mint' | 'violet';
 export type ShareCardSize = 'sm' | 'md' | 'lg';
@@ -131,7 +132,7 @@ const styles = StyleSheet.create({
   },
   // aurora wash — a subtle token-gradient over the void surface (kept low so the
   // void dominates the center and light --text stays legible, ~matching the web mesh)
-  wash: { ...StyleSheet.absoluteFillObject, opacity: 0.32 },
+  wash: { ...absoluteFill, opacity: 0.32 },
   top: { position: 'relative' },
   body: { flex: 1, position: 'relative', alignItems: 'center', justifyContent: 'center', gap: 10 },
   eyebrow: { fontFamily: fonts.mono, letterSpacing: 2, textTransform: 'uppercase', color: colors.textDim },

package/src/components/Sheet.tsx

@@ -11,6 +11,7 @@ import {
   Platform,
 } from 'react-native';
 import { colors, radii, fonts } from '@lockin90/tokens';
+import { absoluteFill } from '../internal/absoluteFill';
 
 export interface SheetProps {
   /** Show the sheet. When false, nothing renders. */
@@ -129,7 +130,7 @@ export function Sheet({ open = true, onClose, side = 'bottom', title, children }
 
 const styles = StyleSheet.create({
   scrim: {
-    ...StyleSheet.absoluteFillObject,
+    ...absoluteFill,
     flex: 1,
     backgroundColor: 'rgba(0,0,0,0.55)',
   },

package/src/components/TabBar.tsx

@@ -5,6 +5,7 @@ import { colors, radii, fonts, gradients, nativeShadows } from '@lockin90/tokens
 import { Icon, type IconName } from './Icon';
 import { OptionalBlurView } from '../internal/optionalBlur';
 import { hapticSelection } from '../internal/optionalHaptics';
+import { absoluteFill } from '../internal/absoluteFill';
 
 /* ============================================================================
    Mobile atoms — TabBar (bottom navigation) + FAB (floating action button).
@@ -223,7 +224,7 @@ const styles = StyleSheet.create({
   // the frosted/translucent background, clipped to the capsule independently
   // of the content so the FAB overhang survives
   capsuleFill: {
-    ...StyleSheet.absoluteFillObject,
+    ...absoluteFill,
     borderRadius: radii.pill,
     overflow: 'hidden',
     backgroundColor: 'rgba(12,15,26,0.82)',

package/src/components/TagInput.tsx

@@ -129,38 +129,84 @@ export interface CodeInputProps extends ViewProps {
   /** Web-parity alias of `error` — the web `CodeInput` names this `invalid`, so
    *  the same prop works on both platforms. Either prop turns the boxes red. */
   invalid?: boolean;
+  /** each box's a11y label, `position` from 1 — pass a translated one (the default is English, for stories).
+   *  Box 0 also takes a pasted / autofilled whole code but keeps `digitLabel(1, length)`. */
+  digitLabel?: (position: number, length: number) => string;
 }
 
-/** Spread a multi-char entry (paste / iOS SMS autofill delivered into one box)
- *  across the code boxes from `index` on: chars past the last box are dropped,
- *  and focus lands after the last written char (clamped to the last box).
- *  (Pure — extracted from `onBoxChange` so the paste math is unit-testable.) */
-export function spreadCodeAcrossBoxes(
-  chars: readonly string[],
+const defaultDigitLabel = (position: number, length: number) => `Digit ${position} of ${length}`;
+
+/** The boxes for a code string: one digit each, non-digits dropped, padded with '' to `length`. */
+export function codeToBoxes(value: string, length: number): string[] {
+  const digits = value.replace(/\D/g, '');
+  return Array.from({ length }, (_, i) => digits[i] ?? '');
+}
+
+/** Spread a multi-char entry (paste / iOS SMS autofill delivered into one box) across the boxes from
+ *  `index` on: digits only, the ones past the last box dropped, earlier boxes kept. Focus lands after
+ *  the last digit written (clamped). (Pure, so the paste math is unit-testable; mirrors the web.) */
+export function spreadDigits(
+  boxes: readonly string[],
   index: number,
-  digits: string,
-  length: number,
-): { code: string; focusIndex: number } {
-  const next = chars.slice();
-  for (let i = 0; i < digits.length && index + i < length; i++) {
-    next[index + i] = digits[i];
-  }
-  return { code: next.join(''), focusIndex: Math.min(index + digits.length, length - 1) };
+  text: string,
+): { boxes: string[]; focusIndex: number } {
+  const digits = text.replace(/\D/g, '');
+  const next = boxes.slice();
+  for (let i = 0; i < digits.length && index + i < next.length; i++) next[index + i] = digits[i];
+  return { boxes: next, focusIndex: Math.min(index + digits.length, next.length - 1) };
+}
+
+/** What a box's new text does (its digit is always selected, so typing replaces it): one digit fills
+ *  the box; more digits (paste, autofill) spread; no digit at all (a letter) is ignored (`null`);
+ *  empty clears the box. Focus moves on after a written digit. */
+export function typeIntoBox(
+  boxes: readonly string[],
+  index: number,
+  raw: string,
+): { boxes: string[]; focusIndex: number } | null {
+  const digits = raw.replace(/\D/g, '');
+  if (raw && !digits) return null;
+  if (digits.length > 1) return spreadDigits(boxes, index, digits);
+  const next = boxes.slice();
+  next[index] = digits;
+  return { boxes: next, focusIndex: digits ? Math.min(index + 1, next.length - 1) : index };
+}
+
+/** The boxes at another `length`: each keeps its place (a gap stays a gap), the extra ones dropped. */
+export function resizeBoxes(boxes: readonly string[], length: number): string[] {
+  return Array.from({ length }, (_, i) => boxes[i] ?? '');
 }
 
-/** Segmented N-digit verification code — auto-advance + backspace. */
-export function CodeInput({ length = 6, value = '', onChange, error = false, invalid = false, style, ...rest }: CodeInputProps) {
+/** Segmented N-digit verification code — auto-advance + backspace + paste / autofill into box 0. */
+export function CodeInput({
+  length = 6,
+  value = '',
+  onChange,
+  error = false,
+  invalid = false,
+  digitLabel = defaultDigitLabel,
+  style,
+  ...rest
+}: CodeInputProps) {
   const isInvalid = invalid || error;
-  const [code, setCode] = useState<string>(value.slice(0, length));
+  // One entry per box, so clearing a middle box leaves a gap instead of shifting later digits.
+  const [boxes, setBoxes] = useState<string[]>(() => codeToBoxes(value, length));
+  // A new `value` from the app (e.g. cleared after a wrong code) replaces what's shown; the app echoing
+  // back what `onChange` gave it doesn't (it would close up a gap the user left).
+  // Another `length` (another kind of code) re-draws the boxes, each digit in its place; an app that
+  // changes it passes the matching `value` too, which wins.
+  const [prev, setPrev] = useState({ value, length });
+  if (value !== prev.value || length !== prev.length) {
+    setPrev({ value, length });
+    if (value !== prev.value && value !== boxes.join('')) setBoxes(codeToBoxes(value, length));
+    else if (length !== prev.length) setBoxes(resizeBoxes(boxes, length));
+  }
   const [focused, setFocused] = useState<number | null>(null);
   const refs = useRef<Array<TextInput | null>>([]);
 
-  const chars = Array.from({ length }, (_, i) => code[i] ?? '');
-
-  const commit = (next: string) => {
-    const clamped = next.slice(0, length);
-    setCode(clamped);
-    onChange?.(clamped);
+  const commit = (next: string[]) => {
+    setBoxes(next);
+    onChange?.(next.join(''));
   };
 
   const focusBox = (index: number) => {
@@ -168,39 +214,30 @@ export function CodeInput({ length = 6, value = '', onChange, error = false, inv
   };
 
   const onBoxChange = (index: number, raw: string) => {
-    // Paste or iOS SMS autofill can deliver the whole code into one box — spread
-    // it across the remaining boxes from here (mirrors the web `onPaste`).
-    const digits = raw.replace(/\s/g, '');
-    if (digits.length > 1) {
-      const spread = spreadCodeAcrossBoxes(chars, index, digits, length);
-      commit(spread.code);
-      focusBox(spread.focusIndex);
-      return;
-    }
-    const ch = digits.slice(-1);
-    const next = chars.slice();
-    next[index] = ch;
-    commit(next.join(''));
-    if (ch) focusBox(index + 1);
+    const typed = typeIntoBox(boxes, index, raw);
+    // A letter: re-render, so the native field drops it and shows the box's digit again.
+    if (!typed) return setBoxes((current) => current.slice());
+    commit(typed.boxes);
+    if (typed.focusIndex !== index) focusBox(typed.focusIndex);
   };
 
   const onKeyPress = (index: number, e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
     if (e.nativeEvent.key !== 'Backspace') return;
-    if (chars[index]) {
-      const next = chars.slice();
+    if (boxes[index]) {
+      const next = boxes.slice();
       next[index] = '';
-      commit(next.join(''));
+      commit(next);
     } else if (index > 0) {
-      const next = chars.slice();
+      const next = boxes.slice();
       next[index - 1] = '';
-      commit(next.join(''));
+      commit(next);
       focusBox(index - 1);
     }
   };
 
   return (
     <View style={[styles.code, style]} {...rest}>
-      {chars.map((ch, i) => {
+      {boxes.map((ch, i) => {
         const filled = !!ch;
         const isFocused = focused === i;
         const borderColor = isFocused
@@ -230,7 +267,10 @@ export function CodeInput({ length = 6, value = '', onChange, error = false, inv
             // spreads across boxes; the rest stay single-char for clean typing.
             maxLength={i === 0 ? length : 1}
             value={ch}
-            accessibilityLabel={`Digit ${i + 1}`}
+            // The digit stays selected, so typing replaces it (also after a tap on a focused box).
+            selectTextOnFocus
+            selection={{ start: 0, end: ch.length }}
+            accessibilityLabel={digitLabel(i + 1, length)}
             selectionColor={colors.accent}
             onChangeText={(t) => onBoxChange(i, t)}
             onKeyPress={(e) => onKeyPress(i, e)}

package/src/components/Toggle.tsx

@@ -2,6 +2,7 @@ import { View, Text, Pressable, StyleSheet, type StyleProp, type ViewStyle } fro
 import { hapticSelection } from '../internal/optionalHaptics';
 import { LinearGradient } from 'expo-linear-gradient';
 import { colors, radii, fonts, gradients } from '@lockin90/tokens';
+import { absoluteFill } from '../internal/absoluteFill';
 
 export type ToggleSize = 'sm' | 'md';
 
@@ -142,7 +143,7 @@ const styles = StyleSheet.create({
     boxShadow: '0 0 14px rgba(124,92,255,0.45)',
   },
   trackFill: {
-    ...StyleSheet.absoluteFillObject,
+    ...absoluteFill,
     borderRadius: radii.pill,
   },
   knob: {

package/src/components/Tooltip.tsx

@@ -1,6 +1,7 @@
 import { useRef, useState, type ReactNode } from 'react';
 import { View, Text, Pressable, StyleSheet, Modal, Dimensions, type ViewStyle } from 'react-native';
 import { colors, radii, fonts, nativeShadows } from '@lockin90/tokens';
+import { absoluteFill } from '../internal/absoluteFill';
 
 export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 
@@ -166,7 +167,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   badgeText: { fontFamily: fonts.ui, fontSize: 11, fontWeight: '600', color: colors.textDim },
-  backdrop: { ...StyleSheet.absoluteFillObject },
+  backdrop: { ...absoluteFill },
   bubble: {
     position: 'absolute',
     maxWidth: 220,

package/src/components/__tests__/BrandMark.test.tsx

@@ -0,0 +1,17 @@
+import { describe, expect, test } from 'vitest';
+import { BrandMark } from '../BrandMark';
+import { render } from './markup';
+
+/* The web logo is a 30px mark with 19px text: the lockup's wordmark can be
+ * sized apart from the mark, as on web. */
+describe('BrandMark lockup wordmark', () => {
+  test('scales with the mark by default', () => {
+    expect(render(BrandMark, { variant: 'lockup', size: 30 })).toMatch(/font-size:32px/);
+  });
+
+  test('takes its own size from wordmarkSize', () => {
+    const html = render(BrandMark, { variant: 'lockup', size: 30, wordmarkSize: 19 });
+    expect(html).toMatch(/font-size:19px/);
+    expect(html).not.toMatch(/font-size:32px/);
+  });
+});