Package Box

9.9 KB gzip for the class module

Variants

Recorded states

• open recorded state; no setter
• closed recorded state; no setter
• expanded recorded state; no setter
• reduced motion recorded state; no setter
• active recorded state; no setter

Usage

Import

import '/components/package-box/define.js';

// or register it yourself
import { DetentPackageBox } from '/components/package-box/package-box.js';

Attributes

• close-label
• default-open
• hint
• inner
• max-width
• minor
• open
• open-label
• outer
• paper-class-name
• reserve-space
• tape
• transform

Properties

• angle
• colors
• cut
• data
• onOpenChange
• outerStyle
• slip

Slots

• default
• flap
• label
• symbols
• tape-half

Events

• detent-open-change — { open: boolean }

Example

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

<detent-package-box
  close-label="Close"
  default-open
  hint
  inner
  max-width="460"
  minor
  open
  open-label="Click to open"
  outer
  paper-class-name=""
  reserve-space
  tape
  transform
></detent-package-box>

Property-only values

const element = document.querySelector('detent-package-box');
if (element !== null) {
  // onOpenChange: (open: boolean) => void
  element.onOpenChange = () => {};
  // slip: PackageSlip
  element.slip = undefined;
  // colors: PackageBoxColors
  element.colors = undefined;
}

Source

The pinned upstream source for this row:

• src/components/ui/PackageBox.tsx sha256 12f25d921e82…

Native files

The native module and its artifacts:

• src/components/package-box/package-box.ts
• src/components/package-box/styles.css
• src/components/package-box/define.ts
• docs/components/package-box.md
• site/examples/package-box.ts
• tests/browser/package-box.spec.ts
• evidence/components/package-box.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.
• children, label, symbols, flap and tapeHalf React nodes become the default, label, symbols, flap and tape-half slots; label={false} and symbols={false} are expressed by slotting an empty element.
• className is not an attribute; styling uses the documented parts and custom properties.
• onOpenChange becomes the composed detent-open-change event plus an optional property hook; programmatic writes emit nothing.
• slip, colors and outerStyle stay property-only plain data; angle, cut and data are read-only snapshots; inner, outer, transform and minor are presentation attributes with the pinned source defaults.
• PackageBoxDemo is not ported (a page-level demo wrapper); the docs example and preview replace it.
• clamp:false flap slices are clamped to the pinned end angles (-238deg and -212deg) instead of extrapolating.
• WCAG corrections: muted slip ink is opaque #5c5850 (3.4:1 to 6.78:1) and the stamp is #a8431c at full opacity (4.34:1 to 5.77:1).
• hint=false keeps a visible focus target: the hidden controller row becomes visible while focused.