bard-attachment_field 0.4.2 → 0.4.3

data/bard-attachment_field.gemspec

@@ -36,11 +36,9 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency "cucumber"
   spec.add_development_dependency "cucumber-rails"
   spec.add_development_dependency "capybara"
-  spec.add_development_dependency "cuprite"
-  spec.add_development_dependency "cuprite-downloads"
+  spec.add_development_dependency "capybara-playwright-driver"
   spec.add_development_dependency "chop"
   spec.add_development_dependency "rspec"
-  spec.add_development_dependency "capybara-shadowdom"
   spec.add_development_dependency "capybara-screenshot"
   spec.add_development_dependency "database_cleaner"
   spec.add_development_dependency "puma"

data/input-attachment/package.json

@@ -11,7 +11,7 @@
   "scripts": {
     "prepublishOnly": "bun run build",
     "build": "bunx stencil build --docs && bun run bundle",
-    "bundle": "bunx esbuild dist/components/index.js --bundle --format=esm --outfile=dist/input-attachment.esm.js --footer:js='defineCustomElements();'",
+    "bundle": "bunx esbuild src/entry.js --bundle --format=esm --outfile=dist/input-attachment.esm.js",
     "start": "bunx stencil build --docs --watch --serve",
     "test": "NODE_OPTIONS=--experimental-vm-modules bunx stencil test --spec --e2e --max-workers=1",
     "test:spec": "NODE_OPTIONS=--experimental-vm-modules bunx stencil test --spec --max-workers=1",
@@ -36,7 +36,7 @@
     "@botandrose/progress-bar": "^0.1.2",
     "@rails/activestorage": "^8.1.0",
     "@rails/request.js": "0.0.13",
-    "@stencil/core": "^4.38.2",
+    "@stencil/core": "^4.43.2",
     "rails-request-json": "^0.2.0",
     "ts-jest": "^29.4.5"
   },

data/input-attachment/src/components/input-attachment/input-attachment.css

@@ -53,10 +53,10 @@ p{
 @media (prefers-color-scheme: dark) {
   :host {
     --input-attachment-text-color: #e0e0e0;
-    --input-attachment-drop-bg: rgba(255,255,255, 0.08);
+    --input-attachment-drop-bg: #333;
     --input-attachment-drop-border: rgba(255,255,255, 0.25);
     --input-attachment-drop-color: #bbb;
-    --input-attachment-drop-bg-active: rgba(255,255,255, 0.15);
+    --input-attachment-drop-bg-active: #444;
     --input-attachment-error-color: #f66;
   }
 }

data/input-attachment/src/components/input-attachment/input-attachment.spec.tsx

@@ -20,7 +20,7 @@ describe('input-attachment', () => {
     expect(page.root).toEqualHtml(`
       <input-attachment>
         <mock:shadow-root>
-          <input type="file" style="opacity: 0.01; width: 1px; height: 1px; z-index: -999;">
+          <input aria-label="Choose file" type="file" style="opacity: 0.01; width: 1px; height: 1px; z-index: -999;">
           <file-drop>
             <p part="title">
               <strong>Choose file </strong>

data/input-attachment/src/components/input-attachment/input-attachment.tsx

@@ -188,6 +188,7 @@ export class InputAttachment {
         <input
           ref={el => this.fileInput = el}
           type="file"
+          aria-label={`Choose ${this.multiple ? "files" : "file"}`}
           multiple={this.multiple}
           accept={this.accepts}
           required={this.required && this.files.length === 0}

data/input-attachment/src/components.d.ts

@@ -165,6 +165,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
         "max"?: number;
         /**
           * @default false
@@ -186,10 +190,42 @@ declare namespace LocalJSX {
     }
     interface UploadDialog {
     }
+
+    interface AttachmentFileAttributes {
+        "name": string;
+        "accepts": string;
+        "max": number;
+        "url": string;
+        "value": string;
+        "filename": string;
+        "src": string;
+        "filetype": string;
+        "size": number;
+        "state": string;
+        "percent": number;
+        "preview": boolean;
+        "validationMessage": string;
+    }
+    interface AttachmentPreviewAttributes {
+        "src": string;
+        "filetype": string;
+    }
+    interface InputAttachmentAttributes {
+        "name": string;
+        "directupload": string;
+        "multiple": boolean;
+        "required": boolean;
+        "accepts": string;
+        "max": number;
+        "preview": boolean;
+        "disabled": boolean;
+        "uploadDialog": boolean;
+    }
+
     interface IntrinsicElements {
-        "attachment-file": AttachmentFile;
-        "attachment-preview": AttachmentPreview;
-        "input-attachment": InputAttachment;
+        "attachment-file": Omit<AttachmentFile, keyof AttachmentFileAttributes> & { [K in keyof AttachmentFile & keyof AttachmentFileAttributes]?: AttachmentFile[K] } & { [K in keyof AttachmentFile & keyof AttachmentFileAttributes as `attr:${K}`]?: AttachmentFileAttributes[K] } & { [K in keyof AttachmentFile & keyof AttachmentFileAttributes as `prop:${K}`]?: AttachmentFile[K] };
+        "attachment-preview": Omit<AttachmentPreview, keyof AttachmentPreviewAttributes> & { [K in keyof AttachmentPreview & keyof AttachmentPreviewAttributes]?: AttachmentPreview[K] } & { [K in keyof AttachmentPreview & keyof AttachmentPreviewAttributes as `attr:${K}`]?: AttachmentPreviewAttributes[K] } & { [K in keyof AttachmentPreview & keyof AttachmentPreviewAttributes as `prop:${K}`]?: AttachmentPreview[K] };
+        "input-attachment": Omit<InputAttachment, keyof InputAttachmentAttributes> & { [K in keyof InputAttachment & keyof InputAttachmentAttributes]?: InputAttachment[K] } & { [K in keyof InputAttachment & keyof InputAttachmentAttributes as `attr:${K}`]?: InputAttachmentAttributes[K] } & { [K in keyof InputAttachment & keyof InputAttachmentAttributes as `prop:${K}`]?: InputAttachment[K] };
         "upload-dialog": UploadDialog;
     }
 }
@@ -197,10 +233,10 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
-            "attachment-file": LocalJSX.AttachmentFile & JSXBase.HTMLAttributes<HTMLAttachmentFileElement>;
-            "attachment-preview": LocalJSX.AttachmentPreview & JSXBase.HTMLAttributes<HTMLAttachmentPreviewElement>;
-            "input-attachment": LocalJSX.InputAttachment & JSXBase.HTMLAttributes<HTMLInputAttachmentElement>;
-            "upload-dialog": LocalJSX.UploadDialog & JSXBase.HTMLAttributes<HTMLUploadDialogElement>;
+            "attachment-file": LocalJSX.IntrinsicElements["attachment-file"] & JSXBase.HTMLAttributes<HTMLAttachmentFileElement>;
+            "attachment-preview": LocalJSX.IntrinsicElements["attachment-preview"] & JSXBase.HTMLAttributes<HTMLAttachmentPreviewElement>;
+            "input-attachment": LocalJSX.IntrinsicElements["input-attachment"] & JSXBase.HTMLAttributes<HTMLInputAttachmentElement>;
+            "upload-dialog": LocalJSX.IntrinsicElements["upload-dialog"] & JSXBase.HTMLAttributes<HTMLUploadDialogElement>;
         }
     }
 }

data/input-attachment/src/entry.js

@@ -0,0 +1,3 @@
+export * from "../dist/components/index.js"
+import { defineCustomElements } from "../dist/components/index.js"
+defineCustomElements()

data/lib/bard/attachment_field/cucumber.rb

@@ -4,9 +4,9 @@
 #
 # Provides step definitions and helpers for testing attachment fields.
 #
-# Note: CDP's DOM.setFileInputFiles silently fails for file inputs inside shadow DOM.
-# This integration uses a workaround that creates a temporary regular DOM input to
-# receive files via CDP, then transfers them to the component via its addFiles() method.
+# Note: Browser automation APIs can't reliably set files on inputs inside shadow DOM.
+# This integration uses a workaround that creates a temporary regular DOM input,
+# sets files on it, then transfers them to the component via its addFiles() method.
 
 require "active_support/core_ext/module/attribute_accessors"
 require "chop"
@@ -33,17 +33,17 @@ module Bard::AttachmentField::TestHelper
     session.find("input-attachment##{element_id}")
   end
 
-  # CDP's setFileInputFiles fails silently for file inputs inside shadow DOM,
+  # File inputs inside shadow DOM can't be set directly by browser automation,
   # so we use a temp regular DOM input and transfer files via JavaScript.
   def attach_files(session, element_id, file_paths)
-    session.execute_script("document.body.insertAdjacentHTML('beforeend', '<input type=\"file\" id=\"_cdp_file_helper\" multiple style=\"display:none\">')")
+    session.execute_script("document.body.insertAdjacentHTML('beforeend', '<input type=\"file\" id=\"_pw_file_helper\" multiple style=\"opacity:0;position:absolute;pointer-events:none\">')")
 
-    temp_input = session.document.find("#_cdp_file_helper", visible: :all)
-    temp_input.native.node.select_file(file_paths)
+    temp_input = session.document.find("#_pw_file_helper", visible: :all)
+    temp_input.set(file_paths)
 
     session.execute_script(<<~JS)
       (() => {
-        const temp = document.getElementById('_cdp_file_helper');
+        const temp = document.getElementById('_pw_file_helper');
         const host = document.getElementById('#{element_id}');
         host.addFiles(temp.files);
         temp.remove();
@@ -236,14 +236,14 @@ When "I drag the file {string} onto the {string} attachment field" do |path, fie
   element = Bard::AttachmentField::TestHelper.find_field(page, field)
   file_path_full = Bard::AttachmentField::TestHelper.resolve_fixture_path(path)
 
-  # Create temp input to get File objects via CDP, then dispatch drop event on file-drop
-  page.execute_script("document.body.insertAdjacentHTML('beforeend', '<input type=\"file\" id=\"_cdp_file_helper\" multiple style=\"display:none\">')")
-  temp_input = page.find("#_cdp_file_helper", visible: :all)
-  temp_input.native.node.select_file([file_path_full])
+  # Create temp input to get File objects, then dispatch drop event on file-drop
+  page.execute_script("document.body.insertAdjacentHTML('beforeend', '<input type=\"file\" id=\"_pw_file_helper\" multiple style=\"opacity:0;position:absolute;pointer-events:none\">')")
+  temp_input = page.find("#_pw_file_helper", visible: :all)
+  temp_input.set([file_path_full])
 
   page.execute_script(<<~JS, element[:id])
     ((elementId) => {
-      const temp = document.getElementById('_cdp_file_helper');
+      const temp = document.getElementById('_pw_file_helper');
       const host = document.getElementById(elementId);
       const fileDrop = host.shadowRoot.querySelector('file-drop');
 

data/lib/bard/attachment_field/version.rb

@@ -2,6 +2,6 @@
 
 module Bard
   module AttachmentField
-    VERSION = "0.4.2"
+    VERSION = "0.4.3"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bard-attachment_field
 version: !ruby/object:Gem::Version
-  version: 0.4.2
+  version: 0.4.3
 platform: ruby
 authors:
 - Micah Geisel
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2026-03-18 00:00:00.000000000 Z
+date: 2026-04-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activestorage
@@ -109,21 +109,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: cuprite
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-- !ruby/object:Gem::Dependency
-  name: cuprite-downloads
+  name: capybara-playwright-driver
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -164,20 +150,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-- !ruby/object:Gem::Dependency
-  name: capybara-shadowdom
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
 - !ruby/object:Gem::Dependency
   name: capybara-screenshot
   requirement: !ruby/object:Gem::Requirement
@@ -371,6 +343,7 @@ files:
 - input-attachment/src/components/upload-dialog/readme.md
 - input-attachment/src/components/upload-dialog/upload-dialog.css
 - input-attachment/src/components/upload-dialog/upload-dialog.tsx
+- input-attachment/src/entry.js
 - input-attachment/src/global.d.ts
 - input-attachment/src/images/example.jpg
 - input-attachment/src/index.html