Status Island

9.6 KB gzip for the class module · inlines the shared spring

Variants

Recorded states

• closed recorded state; no setter
• expanded recorded state; no setter
• collapsed recorded state; no setter
• dark theme recorded state; no setter
• reduced motion recorded state; no setter
• profile recorded state; no setter
• share recorded state; no setter

Usage

Import

import '/components/status-island/define.js';

// or register it yourself
import { DetentStatusIsland } from '/components/status-island/status-island.js';

Attributes

• avatar
• avatar-alt
• default-state
• description
• greeting
• id-prefix
• name
• job-title
• state
• status-text

Properties

• metadata
• onStateChange
• socials

Slots

• default
• profile-content
• share-content

Events

• detent-state-change — {}

Example

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

<detent-status-island
  avatar
  avatar-alt
  default-state="collapsed"
  description="Building thoughtful interfaces..."
  greeting="Hello, I am [name]"
  id-prefix
  name="Suraj Maurya"
  job-title="Frontend Developer"
  state
  status-text="Available for work"
></detent-status-island>

Property-only values

const element = document.querySelector('detent-status-island');
if (element !== null) {
  // metadata: DynamicIslandMetadataItem[]
  element.metadata = [];
  // socials: DynamicIslandSocials
  element.socials = undefined;
  // onStateChange: (state: DynamicIslandState) => void
  element.onStateChange = () => {};
}

Source

The pinned upstream source for this row:

• src/components/ui/DynamicIsland.tsx sha256 87cc23102b95…

Native files

The native module and its artifacts:

• src/components/status-island/status-island.ts
• src/components/status-island/styles.css
• src/components/status-island/define.ts
• docs/components/status-island.md
• site/examples/status-island.ts
• tests/browser/status-island.spec.ts
• evidence/components/status-island.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.
• `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
• 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.
• React state/hooks replaced by element-owned state with pre-upgrade property preservation.
• state is the observable value. Upstream's controlled/uncontrolled split (state vs defaultState) becomes "state reflects the current state, default-state seeds it", so all four catalogued states stay inspectable and styleable without a second attribute (PC-3.3).
• A polite live region announces the state change. Upstream had none; the port announces each user transition once and never for programmatic writes (PC-12.5).
• Focus is moved deliberately after a transition. Upstream replaced the view without moving focus, leaving focus on a removed node; the port focuses the new view's first control (PC-5.1, PC-12.6).
• The social dock validates URLs. Upstream assigned href unvalidated; a refused URL now becomes an inert element instead of a link (R-3.2).
• No layoutId avatar projection. The avatar is rendered per view; the surface morph is a spring on width/height/radius, which keeps the pill geometry continuous without shared-layout projection (PC-10.2).
• className is replaced by documented parts and custom properties; icon (a React node per social item) is replaced by type-driven local SVGs (PC-11.5).
• The status pulse is disabled under reduced motion, and the dot uses the text token so it is perceivable in both schemes (PC-10.5, WCAG 1.4.11).
• Slots replace React nodes: children → the default slot, profileContent → profile-content, shareContent → share-content (PC-11.2).
• The upstream `role` prop is ported as `job-title`/`jobTitle`: `role` is a reserved global ARIA attribute, so using it for the person's job title put an invalid ARIA role on the host element (axe reports it as critical).