astryx-dracula 0.3.0 → 0.4.0

package/templates/login-sso.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   Ctr > C[p=4 mw=400] > V[g=4] > ((V[g=1 a=center] > Hd"Welcome back to the night"[level=1] + Tx"Whisper your details to enter the night"[t=body]) + TI"Work email"[t=email] + Lk"Having trouble signing in?" + B.primary"Continue" + D"Or continue with" + B.secondary"Continue with SSO" + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Request access") + (V[g=2 a=center] > Av + Hd"Sign in with Google Workspace"[level=1] + Tx"You will be redirected back after signing in."[t=body]) + (C[p=0] > S[p=4 muted] > (H[g=2 a=center] > Ic + (V[g=0] > Tx"Google Workspace"[t=label] + Tx"vlad@castle.ro"[t=supporting]))) + (V[g=3] > B.primary"Continue with Google Workspace" + B.ghost"Use a different email") + (V[g=1 a=center] > Hd"Welcome back to the night"[level=1] + Tx"vlad@castle.ro"[t=body]) + (V[g=4] > (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?") + B.primary"Enter the night" + B.ghost"Use a different email") + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting]))
+//   Ctr > C[p=4 mw=400] > V[g=4] > ((V[g=1 a=center] > Hd"Welcome back to the night"[level=1] + Tx"Whisper your details to enter the night"[t=body]) + (V[g=1] > TI"Work email"[t=email] + Lk"Having trouble signing in?") + B.primary"Continue" + D"Or continue with" + B.secondary"Continue with SSO" + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Request access") + (V[g=2 a=center] > Av + Hd"Sign in with Google Workspace"[level=1] + Tx"You will be redirected back after signing in."[t=body]) + (C[p=0] > S[p=4 muted] > (H[g=2 a=center] > Ic + (V[g=0] > Tx"Google Workspace"[t=label] + Tx"vlad@castle.ro"[t=supporting]))) + (V[g=3] > B.primary"Continue with Google Workspace" + B.ghost"Use a different email") + (V[g=1 a=center] > Hd"Welcome back to the night"[level=1] + Tx"vlad@castle.ro"[t=body]) + (V[g=4] > (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?") + (V[g=3] > B.primary"Enter the night" + B.ghost"Use a different email")) + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting]))
 
 //   Step-conditional h1: the email and SSO-confirm steps each render their own
 //   h1 (email entry vs provider confirm); the password fallback reuses the
@@ -135,29 +135,35 @@ export default function LoginSso() {
                 </Text>
               </VStack>
 
-              <TextInput
-                label="Work email"
-                isLabelHidden
-                type="email"
-                {...inputAutoComplete('email')}
-                placeholder={AUTH_EMAIL_PLACEHOLDER}
-                value={email}
-                onChange={(v: string) => {
-                  setEmail(v);
-                  setError(null);
-                }}
-                size="lg"
-                onKeyDown={(e: React.KeyboardEvent) => {
-                  if (e.key === 'Enter') {
-                    handleContinue();
-                  }
-                }}
-                status={error ? {type: 'error', message: error} : undefined}
-              />
+              {/* The helper link belongs to the field above it, so the two
+                  share a gap={1} group — as the password step below groups
+                  its own. As siblings in the outer gap={4} flow it read as
+                  one more control in the button column, 16px from each. */}
+              <VStack gap={1}>
+                <TextInput
+                  label="Work email"
+                  isLabelHidden
+                  type="email"
+                  {...inputAutoComplete('email')}
+                  placeholder={AUTH_EMAIL_PLACEHOLDER}
+                  value={email}
+                  onChange={(v: string) => {
+                    setEmail(v);
+                    setError(null);
+                  }}
+                  size="lg"
+                  onKeyDown={(e: React.KeyboardEvent) => {
+                    if (e.key === 'Enter') {
+                      handleContinue();
+                    }
+                  }}
+                  status={error ? {type: 'error', message: error} : undefined}
+                />
 
-              <Link href="#/templates/login-sso">
-                Having trouble signing in?
-              </Link>
+                <Link href="#/templates/login-sso" isStandalone>
+                  Having trouble signing in?
+                </Link>
+              </VStack>
 
               <Button
                 label="Continue"
@@ -175,10 +181,13 @@ export default function LoginSso() {
                 onClick={handleContinue}
               />
 
+              {/* Prose link: colour alone is not a cue inside a sentence
+                  (WCAG 1.4.1 / F73), so it asks for the underline the kit
+                  only gives on hover. */}
               <VStack hAlign="center">
                 <Text type="supporting" color="secondary">
                   {AUTH_SIGNUP_PROMPT}{' '}
-                  <Link href="#/templates/login-sso" type="supporting">
+                  <Link href="#/templates/login-sso" type="supporting" hasUnderline>
                     Request access
                   </Link>
                 </Text>
@@ -271,26 +280,33 @@ export default function LoginSso() {
                   />
                   {error && (
                     <VStack hAlign="end">
-                      <Link href="#/templates/login-sso">
+                      <Link href="#/templates/login-sso" isStandalone>
                         {AUTH_FORGOT_PASSWORD}
                       </Link>
                     </VStack>
                   )}
                 </VStack>
 
-                <Button
-                  label={AUTH_PRIMARY_CTA}
-                  variant="primary"
-                  size="lg"
-                  isLoading={isLoading}
-                  onClick={handleSignIn}
-                />
-                <Button
-                  label="Use a different email"
-                  variant="ghost"
-                  size="lg"
-                  onClick={handleBack}
-                />
+                {/* gap={3} is the family rhythm for a button pair: the
+                    primary/ghost pair in the confirm step above, the social
+                    pairs in login-card and login-split. At the outer gap={4}
+                    the same two buttons sat 4px further apart in this step
+                    than in the step above it. */}
+                <VStack gap={3}>
+                  <Button
+                    label={AUTH_PRIMARY_CTA}
+                    variant="primary"
+                    size="lg"
+                    isLoading={isLoading}
+                    onClick={handleSignIn}
+                  />
+                  <Button
+                    label="Use a different email"
+                    variant="ghost"
+                    size="lg"
+                    onClick={handleBack}
+                  />
+                </VStack>
               </VStack>
             </>
           )}
@@ -299,14 +315,14 @@ export default function LoginSso() {
           <VStack hAlign="center" width="100%">
             <Text type="supporting" color="secondary" justify="center">
               {AUTH_TERMS_PREFIX}{' '}
-              <Link href="#/templates/login-sso" type="supporting">
+              <Link href="#/templates/login-sso" type="supporting" hasUnderline>
                 {AUTH_TERMS_SERVICE}
               </Link>{' '}
               and{' '}
-              <Link href="#/templates/login-sso" type="supporting">
+              <Link href="#/templates/login-sso" type="supporting" hasUnderline>
                 {AUTH_TERMS_PRIVACY}
               </Link>
-              .
+            .
             </Text>
           </VStack>
         </VStack>

package/templates/login.tsx

@@ -87,26 +87,27 @@ export default function LoginPage() {
               />
 
               <VStack gap={1}>
-              <TextInput
-                label="Password"
-                isLabelHidden
-                value={password}
-                onChange={v => {
-                  setPassword(v);
-                  setError(null);
-                }}
-                placeholder={AUTH_PASSWORD_PLACEHOLDER}
-                type="password"
-                {...inputAutoComplete('current-password')}
-                size="lg"
-                onEnter={handleSignIn}
-                status={error ? {type: 'error', message: error} : undefined}
-              />
+                <TextInput
+                  label="Password"
+                  isLabelHidden
+                  value={password}
+                  onChange={v => {
+                    setPassword(v);
+                    setError(null);
+                  }}
+                  placeholder={AUTH_PASSWORD_PLACEHOLDER}
+                  type="password"
+                  {...inputAutoComplete('current-password')}
+                  size="lg"
+                  onEnter={handleSignIn}
+                  status={error ? {type: 'error', message: error} : undefined}
+                />
                 {error && (
                   <VStack hAlign="end">
                     <Link
                       href="#/templates/login"
-                      color="secondary">
+                      color="secondary"
+                      isStandalone>
                       {AUTH_FORGOT_PASSWORD}
                     </Link>
                   </VStack>
@@ -122,11 +123,13 @@ export default function LoginPage() {
               onClick={handleSignIn}
             />
 
-            {/* Sign up link */}
+            {/* Prose links. A link inside a sentence needs a persistent
+                underline — colour alone is not a cue (WCAG 1.4.1 / F73),
+                and the kit underlines on hover only. */}
             <VStack hAlign="center">
               <Text type="supporting" color="secondary">
                 {AUTH_SIGNUP_PROMPT}{' '}
-                <Link href="#/templates/login" type="supporting">
+                <Link href="#/templates/login" type="supporting" hasUnderline>
                   {AUTH_SIGNUP_LINK}
                 </Link>
               </Text>
@@ -138,11 +141,11 @@ export default function LoginPage() {
         <VStack hAlign="center" width="100%">
           <Text type="supporting" color="secondary" justify="center">
             {AUTH_TERMS_PREFIX}{' '}
-            <Link href="#/templates/login" type="supporting">
+            <Link href="#/templates/login" type="supporting" hasUnderline>
               {AUTH_TERMS_SERVICE}
             </Link>{' '}
             and{' '}
-            <Link href="#/templates/login" type="supporting">
+            <Link href="#/templates/login" type="supporting" hasUnderline>
               {AUTH_TERMS_PRIVACY}
             </Link>
             .

package/templates/payment-form.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > LC[p=0] > Ctr > S.transparent[p=6 mw=1100] > V[g=5] > (V[g=6] > (V[g=2] > (Hd"Payment Request"[level=1 t=display-2] + Tx"Review your order"[t=body]) + D) + H[g=8] > (SI > V[g=8] > (V[g=1] > (H[j=between] > (Hd"Sign in to check out"[level=2] + B"Sign in") + Tx"Sign in to track your order"[t=body]) + V[g=3] > (Hd"Contact information"[level=2] + TI"Email" + CB"Email offers") + V[g=3] > (Hd"Shipping information"[level=2] + G[c=2 g=3] > (TI"First Name" + TI"Last Name") + TI"Address" + G[c=2 g=3] > (TI"City" + TI"ZIP Code") + SE"State" + TI"Phone Number" + CB"Save information") + V[g=3] > (V[g=1] > (Hd"Delivery"[level=2] + Tx"Processing time"[t=body]) + RL"Delivery method" > RLI*2) + V[g=3] > (V[g=1] > (Hd"Payment method"[level=2] + Tx"Encrypted"[t=body]) + G[c=2 g=3] > (B"PayPal" + B"Google Pay") + D"Or pay with card" + TI"Card Number" + G[c=3 g=3] > (SE"Expiry Month" + SE"Expiry Year" + TI"CVC") + TI"Name on Card" + CB"Billing address") + V[g=3] > (Hd"Promo code"[level=2] + H[g=2] > (TI"Promo code" + B"Apply")) + V[g=3] > (Hd"Gift options"[level=2] + CB"Gift message" + TA"Gift message") + V[g=4] > (H[g=5] > (H[g=1] > (Ic + Tx))*3 + V[g=2] > (B"Place order"[primary] + B"Continue shopping") + D + H[g=4] > (Lk"Refund policy" + Lk"Privacy policy" + Lk"Terms" + Lk"Cancellations"))) + SI > C[p=4] > Col"Order Summary" > V[g=4] > (V[g=3] > V[g=3] > (H[g=3] > (Tmb + V[g=1] > (Tx"Obsidian Ritual Chalice" + Tx"Hand-carved"[t=supporting])) + D)*3 + V[g=3] > (Hd"Order Total"[level=3] + H[j=between] > (Tx"Subtotal" + Tx"$91.20") + D + H[j=between] > (Tx"Total"[t=large] + Tx"$91.20"[t=large]) + Bn"Free shipping over $300"))))
+//   L > LC[p=0] > Ctr > S.transparent[p=6 mw=1100] > V[g=5] > (V[g=6] > (V[g=2] > (Hd"Payment Request"[level=1 t=display-2] + Tx"Review your order"[t=body]) + D) + H[g=8] > (SI > V[g=8] > (V[g=1] > (H[j=between] > (Hd"Sign in to check out"[level=2] + B"Sign in") + Tx"Sign in to track your order"[t=body]) + V[g=3] > (Hd"Contact information"[level=2] + TI"Email" + CB"Email offers") + V[g=3] > (Hd"Shipping information"[level=2] + G[c=2 g=3] > (TI"First Name" + TI"Last Name") + TI"Address" + G[c=2 g=3] > (TI"City" + TI"ZIP Code") + SE"State" + TI"Phone Number" + CB"Save information") + V[g=3] > (V[g=1] > (Hd"Delivery"[level=2] + Tx"Processing time"[t=body]) + RL"Delivery method" > RLI*2) + V[g=3] > (V[g=1] > (Hd"Payment method"[level=2] + Tx"Encrypted"[t=body]) + G[c=2 g=3] > (B"PayPal" + B"Google Pay") + D"Or pay with card" + TI"Card Number" + G[c=3 g=3] > (SE"Expiry Month" + SE"Expiry Year" + TI"CVC") + TI"Name on Card" + CB"Billing address") + V[g=3] > (Hd"Promo code"[level=2] + H[g=2] > (TI"Promo code" + B"Apply")) + V[g=3] > (Hd"Gift options"[level=2] + CB"Gift message" + TA"Gift message") + V[g=4] > (H[g=5] > (H[g=1] > (Ic + Tx))*3 + V[g=2] > (B"Place order"[primary] + B"Continue shopping") + D + H[g=4] > (Lk"Refund policy" + Lk"Privacy policy" + Lk"Terms" + Lk"Cancellations"))) + SI > C[p=4] > Col"Order Summary" > V[g=4] > (V[g=3] > H[g=3] > (Tmb + V[g=1] > (Tx"Obsidian Ritual Chalice" + Tx"Hand-carved"[t=supporting])))*3 + V[g=3] > (Hd"Order Total"[level=3] + H[j=between] > (Tx"Subtotal" + Tx"$91.20") + D + H[j=between] > (Tx"Total"[t=large] + Tx"$91.20"[t=large]) + Bn"Free shipping over $300"))))
 
 import {useState, type CSSProperties} from 'react';
 import {
@@ -202,53 +202,47 @@ function OrderLineItem({
   onChangeQty: (v: number) => void;
 }) {
   return (
-    <VStack gap={3}>
-      <HStack gap={3} vAlign="start">
-        <OrderItemPhoto item={item} />
-        <StackItem size="fill">
-          <VStack gap={1}>
-            <HStack gap={2} hAlign="between" vAlign="start">
-              <HStack gap={2} vAlign="center" wrap="wrap">
-                <Text type="body" weight="semibold">
-                  {item.name}
-                </Text>
-                {item.limited && (
-                  <HStack gap={1} vAlign="center">
-                    <StatusDot variant="warning" label="Limited edition" />
-                    <Text type="supporting" color="secondary">
-                      Limited edition
-                    </Text>
-                  </HStack>
-                )}
-              </HStack>
-              <Text type="body" hasTabularNumbers>
-                {fmt(item.price)}
+    <HStack gap={3} vAlign="start">
+      <OrderItemPhoto item={item} />
+      <StackItem size="fill">
+        <VStack gap={1}>
+          <HStack gap={2} hAlign="between" vAlign="start">
+            <HStack gap={2} vAlign="center" wrap="wrap">
+              <Text type="body" weight="semibold">
+                {item.name}
               </Text>
+              {item.limited && (
+                <HStack gap={1} vAlign="center">
+                  <StatusDot variant="warning" label="Limited edition" />
+                  <Text type="supporting" color="secondary">
+                    Limited edition
+                  </Text>
+                </HStack>
+              )}
             </HStack>
-            <Text type="supporting" color="secondary">
-              {item.variant}
+            <Text type="body" hasTabularNumbers>
+              {fmt(item.price)}
             </Text>
-            <HStack gap={2} vAlign="end" wrap="wrap">
-              <NumberInput
-                label="Qty"
-                value={qty}
-                onChange={onChangeQty}
-                min={1}
-                max={10}
-                isIntegerOnly
-              />
-              <Link href={SELF_HREF} type="supporting">
-                Remove
-              </Link>
-              <Link href={SELF_HREF} type="supporting">
-                Save
-              </Link>
-            </HStack>
-          </VStack>
-        </StackItem>
-      </HStack>
-      <Divider />
-    </VStack>
+          </HStack>
+          <Text type="supporting" color="secondary">
+            {item.variant}
+          </Text>
+          <HStack gap={2} vAlign="end" wrap="wrap">
+            <NumberInput
+              label="Qty"
+              value={qty}
+              onChange={onChangeQty}
+              min={1}
+              max={10}
+              isIntegerOnly
+            />
+            {/* Editing the order in place — an action, never a destination. */}
+            <Button label="Remove" variant="ghost" onClick={() => {}} />
+            <Button label="Save" variant="ghost" onClick={() => {}} />
+          </HStack>
+        </VStack>
+      </StackItem>
+    </HStack>
   );
 }
 

package/templates/product-detail.tsx

@@ -16,7 +16,6 @@ import {
 } from '@astryxdesign/core/SegmentedControl';
 import {Token} from '@astryxdesign/core/Token';
 import {Banner} from '@astryxdesign/core/Banner';
-import {Divider} from '@astryxdesign/core/Divider';
 import {Collapsible, CollapsibleGroup} from '@astryxdesign/core/Collapsible';
 import {AspectRatio} from '@astryxdesign/core/AspectRatio';
 import {SelectableCard} from '@astryxdesign/core/SelectableCard';
@@ -282,8 +281,10 @@ function ProductInfo() {
           }
         />
       </VStack>
-      <CollapsibleGroup type="multiple" defaultValue={['composition']}>
-        <Divider />
+      <CollapsibleGroup
+        type="multiple"
+        defaultValue={['composition']}
+        hasDividers>
         <Collapsible
           value="composition"
           trigger={
@@ -293,7 +294,6 @@ function ProductInfo() {
           }>
           <Text type="body">{PRODUCT.composition}</Text>
         </Collapsible>
-        <Divider />
         <Collapsible
           value="delivery"
           defaultIsOpen={false}
@@ -304,7 +304,6 @@ function ProductInfo() {
           }>
           <Text type="body">{PRODUCT.deliveryReturns}</Text>
         </Collapsible>
-        <Divider />
         <Collapsible
           value="dimensions"
           defaultIsOpen={false}
@@ -317,7 +316,6 @@ function ProductInfo() {
             {PRODUCT.dimensions}
           </Text>
         </Collapsible>
-        <Divider />
       </CollapsibleGroup>
     </VStack>
   );

package/templates/product-tour.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   A[cp=0 @sideNav=(SN > (SNS"Getting started" > (SNI"Introduction"! + SNI"Install")) + (SNS"The brand" > (SNI"Palette" + SNI"Type and shape")) + (SNS"In practice" > (SNI"Components" + SNI"Templates")) + (SNS"Reference" > (SNI"Tokens" + SNI"Migrating")))] > L[h=auto] > (LC[p=8 !scroll] > V[g=8] > (V[g=2] > (H[g=2 a=center] > MNT + Tx[t=supporting]) + Hd"Introduction"[level=1 t=display-2] + Tx"v0.3.0"[t=supporting]) + Tx"Intro"[t=large] + AR + (V[g=8] > (V[g=3] > Hd"What it is"[level=2] + Tx"Body"[t=body] + UL + Cd)*2) + D + (H[j=between] > B.secondary"Previous" + B.secondary"Next")) + (LP[!scroll] > Outline)
+//   A[cp=0 @sideNav=(SN > (SNS"Getting started" > (SNI"Introduction"! + SNI"Install")) + (SNS"The brand" > (SNI"Palette" + SNI"Type and shape")) + (SNS"In practice" > (SNI"Components" + SNI"Templates")) + (SNS"Reference" > (SNI"Tokens" + SNI"Migrating")))] > L[h=auto] > (LC[p=8 !scroll] > V[g=8] > (V[g=2] > (H[g=2 a=center] > MNT + Tx[t=supporting]) + Hd"Introduction"[level=1 t=display-2] + Tx"v0.4.0"[t=supporting]) + Tx"Intro"[t=large] + AR + (V[g=8] > (V[g=3] > Hd"What it is"[level=2] + Tx"Body"[t=body] + UL + Cd)*2) + D + (H[j=between] > B.secondary"Previous" + B.secondary"Next")) + (LP[!scroll] > Outline)
 
 /**
  * Product Tour — a chaptered walkthrough of this theme.
@@ -909,7 +909,7 @@ export default function ProductTour() {
       railHref={SELF_HASH}
       railIcon={<Icon icon={Sparkles} size="sm" />}
       eyebrow="Documentation"
-      badge={() => 'astryx-dracula v0.3.0'}
+      badge={() => 'astryx-dracula v0.4.0'}
       art={chapterId => <ChapterArt chapterId={chapterId} />}
     />
   );