('photo-captured', {
+ detail: {
+ file: this.value,
+ blob: this.value,
+ objectUrl: this._previewUrl,
+ contentType: this.value.type || this.captureFormat || DEFAULT_CAPTURE_FORMAT
+ },
+ bubbles: true,
+ composed: true
+ }))
+
+ if (this.autoCloseOnCapture) {
+ this._setOpen(false)
+ }
+ }
+
+ private _handleCancel () {
+ this._stopStream()
+ this._clearValue({ emitEvents: false })
+ this._setOpen(false)
+ this.dispatchEvent(new CustomEvent('cancel', {
+ bubbles: true,
+ composed: true
+ }))
+ }
+
+ private _openCapture () {
+ if (this.disabled) return
+ this._setOpen(true)
+ }
+
+ private _renderViewport () {
+ if (this._previewUrl) {
+ return html`
`
+ }
+
+ return html``
+ }
+
+ private _renderStatus () {
+ if (this._errorMessage) {
+ return html`${this._errorMessage}
`
+ }
+
+ if (this._startingPreview) {
+ return html`Opening camera…
`
+ }
+
+ if (!this.value) {
+ return html`Preview the camera and take a photo when ready.
`
+ }
+
+ return html`Review the photo before confirming it.
`
+ }
+
+ private _renderActions () {
+ return html`
+
+ ${this.showCancelButton
+ ? html`
+
+ `
+ : nothing}
+
+ ${this.value
+ ? html`
+
+
+ `
+ : html`
+
+ `}
+
+ `
+ }
+
+ private _renderPanel () {
+ return html`
+
+
+
${this._renderViewport()}
+ ${this._renderStatus()}
+ ${this._renderActions()}
+
+ ${this.open ? this._renderPanel() : nothing}
+
+ `}
+ `
+ }
+}
diff --git a/src/v2/components/media/photoCapture/README.md b/src/v2/components/media/photoCapture/README.md
new file mode 100644
index 000000000..eb4eeac18
--- /dev/null
+++ b/src/v2/components/media/photoCapture/README.md
@@ -0,0 +1,80 @@
+# solid-ui-photo-capture component
+
+A Lit-based camera capture web component that can render inline on a page or inside a modal dialog. It opens the device camera, lets the user take a photo, review it, retake it, and then exposes the confirmed image both as a form-like `value` and as browser events.
+
+## Installation
+
+```bash
+npm install solid-ui
+```
+
+## Usage
+
+```javascript
+import { PhotoCapture } from 'solid-ui/components/media/photo-capture'
+```
+
+The legacy flat import path `solid-ui/components/photo-capture` still works, but the grouped `media/photo-capture` path is the preferred long-term entrypoint.
+
+```html
+
+
+
+```
+
+## API
+
+### Properties / attributes
+
+| Property | Attribute | Type | Default | Description |
+|---|---|---|---|---|
+| `label` | `label` | `string` | `Take Photo` | Trigger button label. Ignored when `show-trigger` is false and `presentation="inline"`. |
+| `heading` | `heading` | `string` | `Take a photo` | Panel heading. |
+| `presentation` | `presentation` | `'inline' \| 'dialog'` | `'inline'` | Controls whether the capture UI sits in-page or inside a native dialog. |
+| `open` | `open` | `boolean` | `false` | Controls whether the capture panel is visible. |
+| `name` | `name` | `string` | `''` | Form field name used when the component participates in form submission. |
+| `required` | `required` | `boolean` | `false` | Marks the control as required for form validation. |
+| `value` | none | `File \| null` | `null` | The current captured file. Settable from JavaScript. |
+| `showTrigger` | `show-trigger` | `boolean` | `false` | Shows a trigger button that opens the capture UI. |
+| `showCancelButton` | `show-cancel-button` | `boolean` | `true` | Shows the cancel and close controls. |
+| `facingMode` | `facing-mode` | `string` | `environment` | Convenience control for camera selection when custom constraints are not provided. |
+| `constraints` | `constraints` | `string` | `''` | JSON string for full `MediaStreamConstraints`, for example `{ "video": true }`. |
+| `mediaConstraints` | none | `MediaStreamConstraints` | `undefined` | JS-only property for passing constraints directly. Overrides `constraints`. |
+| `captureFormat` | `capture-format` | `string` | `image/png` | Output MIME type used for `canvas.toBlob()`. |
+| `captureQuality` | `capture-quality` | `number` | `undefined` | Optional quality value for formats that support it, such as JPEG or WebP. |
+| `fileNamePrefix` | `file-name-prefix` | `string` | `''` | Prefix used when the component generates a `File` name for the captured image. If omitted, the component falls back to `name` and then `photo`. |
+| `autoCloseOnCapture` | `auto-close-on-capture` | `boolean` | `false` | Closes the component after the user confirms a photo. |
+
+### Events
+
+| Event | Detail | Description |
+|---|---|---|
+| `input` | `{ value: File \| null }` | Fired when the component updates its current file value. |
+| `change` | `{ value: File \| null }` | Fired when the user confirms or clears the current file value. |
+| `photo-captured` | `{ file, blob, objectUrl, contentType }` | Fired when the user confirms the captured photo. |
+| `open-change` | `{ open }` | Fired whenever the component opens or closes itself. |
+| `cancel` | none | Fired when the user cancels the capture flow. |
+| `error` | `{ error, message }` | Fired when camera access or capture fails. |
+
+### Slots
+
+| Slot | Description |
+|---|---|
+| default | Replaces the trigger button label. |
+| `heading` | Replaces the panel heading. |
+
+## Notes
+
+- Inline mode is the default presentation, and the panel starts closed until `open` is set or the trigger button is used.
+- Dialog mode uses the native `