Sign Up

8.6 KB gzip for the class module

Variants

Recorded states

• focus-visible recorded state; no setter
• loading recorded state; no setter

Usage

Import

import '/components/sign-up/define.js';

// or register it yourself
import { DetentSignUp } from '/components/sign-up/sign-up.js';

Attributes

• description
• error
• is-loading
• require-confirm-password
• show-social-sign-up
• sign-in-text
• title

Properties

• onSignInClick
• onSocialSignUp
• onSubmit
• formData

Slots

• logo
• terms-text

Events

• detent-submit — {}
• detent-sign-in-click — {}
• detent-social-sign-up — {}

Example

Runnable example: site/examples/sign-up.ts. The snippet below is generated from the catalogued attributes.

<detent-sign-up
  description="Join Detent to access components and templates"
  error
  is-loading
  require-confirm-password
  show-social-sign-up
  sign-in-text
  title="Create an account"
></detent-sign-up>

Property-only values

const element = document.querySelector('detent-sign-up');
if (element !== null) {
  // onSubmit: (data: SignUpFormData) => void
  element.onSubmit = () => {};
  // onSignInClick: () => void
  element.onSignInClick = () => {};
}

Source

The pinned upstream source for this row:

• src/components/ui/SignUp.tsx sha256 e24b677da41e…

Native files

The native module and its artifacts:

• src/components/sign-up/sign-up.ts
• src/components/sign-up/styles.css
• src/components/sign-up/define.ts
• docs/components/sign-up.md
• site/examples/sign-up.ts
• tests/browser/sign-up.spec.ts
• evidence/components/sign-up.md

API

Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.

Attributes

Properties

Events

Slots

CSS customisation

• React `children`/`ReactNode` props become DOM slots; caller content stays light DOM.
• React callback props become typed composed CustomEvents; programmatic state assignment emits none.
• Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
• `lucide-react` icon components replaced with local SVG assets (ISC notice retained).
• React state/hooks replaced by element-owned state with pre-upgrade property preservation.
• The sign-in affordance is always rendered (upstream renders it only when onSignInClick exists); the element always exposes detent-sign-in-click.
• show-social-sign-up and require-confirm-password default to true, are reflected while connected, and the property is the opt-out (presence semantics, PC-3.2).
• The error banner toggles hidden instead of unmounting, so the role="alert" region stays in the tree for reliable announcements.
• Framer Motion springs become CSS transitions; the submit spinner is a static glyph under prefers-reduced-motion: reduce.
• The field boundary uses #6b6b6b so it reaches the WCAG 1.4.11 3:1 non-text ratio; dividers keep the upstream hairline.
• The pinned card was one fixed dark panel because the source has no dark: variants; this port follows the theme tokens in both colour schemes, and --detent-sign-up-* custom properties still override every value.
• The terms links are associated with the required checkbox through aria-labelledby instead of being nested inside the label, so both links stay independently focusable (PC-12.6).
• A failed submit moves focus to the first invalid control (PC-12.6).
• The password-strength meter is role="status" with aria-live="polite" (PC-12.5).
• detail.data always carries confirmPassword, as the string "" when the confirmation field is hidden, matching the pinned source's unconditional argument.
• className is replaced by the documented CSS parts and custom properties; logos and the cloud glyph are local inline SVG, not lucide-react.
• ReactNode props become slots (logo, terms-text) with local fallbacks.
• Client-side validation only: the element never authenticates, stores or transmits credentials and makes no network request.
• Default demo copy and labels use Detent branding instead of EasyUI (pre-release rebrand).