photo capture closed by default

Author: SharonStrats

src/v2/components/media/photoCapture/PhotoCapture.test.ts

@@ -72,11 +72,17 @@ describe('SolidUIPhotoCapture', () => {
     expect(customElements.get('solid-ui-photo-capture')).toBe(PhotoCapture)
   })
 
-  it('starts the preview inline using the default environment-facing video constraint', async () => {
+  it('is closed by default and only starts the inline preview when opened', async () => {
     const photoCapture = new PhotoCapture()
 
     document.body.appendChild(photoCapture)
     await photoCapture.updateComplete
+
+    expect(photoCapture.open).toBe(false)
+    expect(getUserMedia).not.toHaveBeenCalled()
+
+    photoCapture.open = true
+    await photoCapture.updateComplete
     await Promise.resolve()
     await photoCapture.updateComplete
 
@@ -90,12 +96,14 @@ describe('SolidUIPhotoCapture', () => {
   it('accepts dialog presentation and custom constraints JSON', async () => {
     const photoCapture = new PhotoCapture()
     photoCapture.presentation = 'dialog'
-    photoCapture.open = false
     photoCapture.constraints = JSON.stringify({ video: true, audio: false })
 
     document.body.appendChild(photoCapture)
     await photoCapture.updateComplete
 
+    expect(photoCapture.open).toBe(false)
+    expect(HTMLDialogElement.prototype.showModal).not.toHaveBeenCalled()
+
     const trigger = photoCapture.shadowRoot?.querySelector('button.trigger-button') as HTMLButtonElement
     trigger.click()
     await photoCapture.updateComplete
@@ -111,6 +119,7 @@ describe('SolidUIPhotoCapture', () => {
     const photoCapture = new PhotoCapture()
     const captured = jest.fn()
     const changed = jest.fn()
+    photoCapture.open = true
 
     photoCapture.addEventListener('photo-captured', (event: Event) => {
       captured((event as CustomEvent).detail)
@@ -147,6 +156,7 @@ describe('SolidUIPhotoCapture', () => {
   it('can participate in a form-like submission while still exposing a value property', async () => {
     const form = document.createElement('form')
     const photoCapture = new PhotoCapture()
+    photoCapture.open = true
     photoCapture.name = 'avatar'
     form.appendChild(photoCapture)
     document.body.appendChild(form)

src/v2/components/media/photoCapture/PhotoCapture.ts

@@ -322,7 +322,7 @@ export class PhotoCapture extends LitElement {
     this.constraints = ''
     this.captureFormat = DEFAULT_CAPTURE_FORMAT
     this.captureQuality = undefined
-    this.open = true
+    this.open = false
     this.disabled = false
     this.name = ''
     this.required = false

src/v2/components/media/photoCapture/README.md

@@ -40,7 +40,7 @@ The legacy flat import path `solid-ui/components/photo-capture` still works, but
 | `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` | `true` | Controls whether the capture panel is visible. |
+| `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. |
@@ -74,7 +74,7 @@ The legacy flat import path `solid-ui/components/photo-capture` still works, but
 
 ## Notes
 
-- Inline mode is the default, so the component can be embedded directly inside a page or form.
+- 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 `<dialog>` element and is useful when the capture flow should float above the current page.
 - The component does not upload the photo itself. Consumers can persist it by reading `value`, listening for `change`, or handling `photo-captured`.
 - When form-associated custom elements are supported, the component uses `ElementInternals`. Otherwise it still supports form-style submission via the form's `formdata` event.