@api-client/ui 0.5.18 → 0.5.20

package/demo/elements/code-editor/CodeEditorDemo.ts

@@ -123,42 +123,28 @@ class CodeEditorDemo extends DemoPage {
 
         <code-editor
           label="Code Editor"
-          supporting-text="Type function names or {{fnName}} to see autocomplete"
+          supportingtext="Type function names or {{fnName}} to see autocomplete"
           .value=${this.editorValue}
           .functionSchemas=${this.functions}
           .suggestions=${this.suggestions}
-          @function-insert=${this.handleFunctionInsert}
-          @suggestion-insert=${this.handleSuggestionInsert}
+          @functioninsert=${this.handleFunctionInsert}
+          @suggestioninsert=${this.handleSuggestionInsert}
           @input=${this.handleInput}
           @change=${this.handleChange}
-          show-documentation
-          @function-documentation="${this.handleFunctionDocumentation}"
+          showdocumentation
+          @docsrequest="${this.handleFunctionDocumentation}"
         ></code-editor>
 
         ${this.output ? html`<p><strong>Output:</strong> ${this.output}</p>` : ''}
       </section>
 
-      <section class="demo-section">
-        <h2 class="display-large">Dark Theme</h2>
-        <p>The same editor with dark theme enabled.</p>
-
-        <code-editor
-          label="Dark Theme Editor"
-          supporting-text="Dark theme variant"
-          .value=${'// Dark theme example\nconst theme = "dark"'}
-          .functionSchemas=${this.functions}
-          .suggestions=${this.suggestions}
-          dark-theme
-        ></code-editor>
-      </section>
-
       <section class="demo-section">
         <h2 class="display-large">Disabled State</h2>
         <p>A disabled editor for read-only content.</p>
 
         <code-editor
           label="Disabled Editor"
-          supporting-text="This editor is disabled"
+          supportingtext="This editor is disabled"
           .value=${'// This editor is disabled\nconst readOnly = true'}
           .functionSchemas=${this.functions}
           .suggestions=${this.suggestions}
@@ -172,7 +158,7 @@ class CodeEditorDemo extends DemoPage {
 
         <code-editor
           label="Error Editor"
-          supporting-text="This editor has an error"
+          supportingtext="This editor has an error"
           .value=${'// This editor has an error\nconst invalid = true'}
           .functionSchemas=${this.functions}
           .suggestions=${this.suggestions}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.18",
+  "version": "0.5.20",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",
@@ -186,7 +186,6 @@
     "@codemirror/language": "^6.11.2",
     "@codemirror/lint": "^6.8.5",
     "@codemirror/state": "^6.5.2",
-    "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.38.0",
     "@github/relative-time-element": "^4.4.6",
     "@material/web": "^2.3.0",

package/src/elements/code-editor/README.md

@@ -29,8 +29,8 @@ import '@api-client/ui/elements/code-editor/code-editor.js'
   .value=${this.code}
   .functionSchemas=${this.functions}
   .suggestions=${this.suggestions}
-  @function-insert=${this.handleFunctionInsert}
-  @suggestion-insert=${this.handleSuggestionInsert}
+  @functioninsert=${this.handleFunctionInsert}
+  @suggestioninsert=${this.handleSuggestionInsert}
   @input=${this.handleInput}
 ></code-editor>
 ```
@@ -84,8 +84,8 @@ const suggestions: Suggestion[] = [
 
 The component dispatches several events:
 
-- `function-insert`: When a function is inserted via autocomplete
-- `suggestion-insert`: When a suggestion is inserted as a pill
+- `functioninsert`: When a function is inserted via autocomplete
+- `suggestioninsert`: When a suggestion is inserted as a pill
 - `input`: When the editor content changes (standard input event)
 - `change`: When the editor loses focus and content has changed
 
@@ -129,6 +129,7 @@ code-editor {
 ## Accessibility
 
 The component includes:
+
 - Proper ARIA attributes for screen readers
 - Keyboard navigation support
 - Focus management
@@ -154,7 +155,7 @@ The component includes:
   label="Code with Functions"
   .value=${this.code}
   .functionSchemas=${this.functions}
-  @function-insert=${this.onFunctionInsert}
+  @functioninsert=${this.onFunctionInsert}
 >
 </code-editor>
 ```
@@ -166,7 +167,7 @@ The component includes:
   label="Code with Mentions"
   .value=${this.code}
   .suggestions=${this.users}
-  @suggestion-insert=${this.onSuggestionInsert}
+  @suggestioninsert=${this.onSuggestionInsert}
 >
 </code-editor>
 ```
@@ -189,6 +190,7 @@ A comprehensive demo is available at `/demo/elements/code-editor/` when running
 ## Browser Support
 
 The component works in all modern browsers that support:
+
 - ES2020+ features
 - Web Components
 - CSS Custom Properties
@@ -197,6 +199,7 @@ The component works in all modern browsers that support:
 ## Contributing
 
 When contributing to this component, please follow the established patterns:
+
 - Use TypeScript for type safety
 - Follow the existing code style
 - Include tests for new features

package/src/elements/code-editor/internals/CodeEditor.ts

@@ -12,7 +12,6 @@ import {
 } from '@codemirror/autocomplete'
 import { javascript } from '@codemirror/lang-javascript'
 import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language'
-import { oneDark } from '@codemirror/theme-one-dark'
 import { keymap } from '@codemirror/view'
 import { defaultKeymap } from '@codemirror/commands'
 import {
@@ -42,9 +41,9 @@ import '../../../md/button/ui-button.js'
  * - Keyboard navigation
  * - Accessibility support
  *
- * @fires function-insert - When a function is inserted
- * @fires suggestion-insert - When a suggestion is inserted
- * @fires function-documentation - When documentation is requested for a function
+ * @fires functioninsert - When a function is inserted
+ * @fires suggestioninsert - When a suggestion is inserted
+ * @fires docsrequest - When documentation is requested for a function
  * @fires input - When the editor content changes
  * @fires change - When the editor loses focus and content has changed
  */
@@ -69,7 +68,7 @@ export default class CodeEditor extends LitElement {
    * Supporting text displayed below the editor
    * @attribute
    */
-  @property({ type: String, attribute: 'supporting-text' })
+  @property({ type: String })
   accessor supportingText = ''
 
   /**
@@ -141,12 +140,6 @@ export default class CodeEditor extends LitElement {
   @property({ type: Array, attribute: false })
   accessor suggestions: Suggestion[] = []
 
-  /**
-   * Whether to use dark theme
-   */
-  @property({ type: Boolean, attribute: 'dark-theme' })
-  accessor darkTheme = false
-
   /**
    * Programming language for syntax highlighting
    * @attribute
@@ -156,9 +149,9 @@ export default class CodeEditor extends LitElement {
 
   /**
    * Whether to show documentation links/buttons in function tooltips and autocomplete
-   * @attribute show-documentation
+   * @attribute
    */
-  @property({ type: Boolean, attribute: 'show-documentation' })
+  @property({ type: Boolean })
   accessor showDocumentation = false
 
   @query('.editor-container')
@@ -265,11 +258,6 @@ export default class CodeEditor extends LitElement {
       extensions.push(javascript())
     }
 
-    // Add theme
-    if (this.darkTheme) {
-      extensions.push(oneDark)
-    }
-
     // Add placeholder
     if (this.placeholder) {
       extensions.push(
@@ -578,7 +566,7 @@ export default class CodeEditor extends LitElement {
    * Dispatch function insert event
    */
   private dispatchFunctionInsert(functionSchema: FunctionSchema, position: number): void {
-    const event = new CustomEvent<FunctionInsertEvent>('function-insert', {
+    const event = new CustomEvent<FunctionInsertEvent>('functioninsert', {
       detail: { functionSchema, position },
       bubbles: true,
     })
@@ -589,7 +577,7 @@ export default class CodeEditor extends LitElement {
    * Dispatch suggestion insert event
    */
   private dispatchSuggestionInsert(suggestion: Suggestion, position: number): void {
-    const event = new CustomEvent<SuggestionInsertEvent>('suggestion-insert', {
+    const event = new CustomEvent<SuggestionInsertEvent>('suggestioninsert', {
       detail: { suggestion, position },
       bubbles: true,
     })
@@ -600,7 +588,7 @@ export default class CodeEditor extends LitElement {
    * Dispatch function documentation event
    */
   private dispatchFunctionDocumentation(functionSchema: FunctionSchema): void {
-    const event = new CustomEvent<FunctionDocumentationEvent>('function-documentation', {
+    const event = new CustomEvent<FunctionDocumentationEvent>('docsrequest', {
       detail: { functionSchema },
       bubbles: true,
     })

package/src/md/dialog/internals/Dialog.ts

@@ -24,6 +24,7 @@ export interface UiDialogClosingReason {
 }
 
 interface DialogEventMap {
+  closing: CustomEvent<UiDialogClosingReason>
   close: CustomEvent<UiDialogClosingReason>
 }
 
@@ -75,6 +76,8 @@ export type RenderFunction = () => TemplateResult
  * @slot title - The slot to place the dialog title. Do not put elements here, just the text.
  * @slot button - The slot to place the dialog buttons. Use the `confirm` or `dismiss`
  *  buttons to automatically close the dialog.
+ * @fires closing - A cancelable, non-bubbling event with the `UiDialogClosingReason` as the detail,
+ *  dispatched before the dialog closes. If prevented, the dialog will not close.
  * @fires close - A non-bubbling, non-cancellable event with the `UiDialogClosingReason` as the detail.
  */
 export default class UiDialog extends UiElement implements TypedEvents<DialogEventMap> {
@@ -349,13 +352,29 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
     if (!['dismiss', 'confirm'].includes(value)) {
       return
     }
-    this.open = false
+
     const detail: UiDialogClosingReason = {
       cancelled: value === 'dismiss',
     }
     if (this.dialogValue !== undefined) {
       detail.value = this.dialogValue
     }
+
+    // Dispatch cancelable closing event first
+    const closingEvent = new CustomEvent<UiDialogClosingReason>('closing', {
+      cancelable: true,
+      composed: false,
+      bubbles: false,
+      detail,
+    })
+    const canClose = this.dispatchEvent(closingEvent)
+
+    // Only proceed with closing if the event wasn't canceled
+    if (!canClose) {
+      return
+    }
+
+    this.open = false
     this.dispatchEvent(
       new CustomEvent<UiDialogClosingReason>('close', {
         composed: true,
@@ -368,8 +387,37 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
     if (!this.open) {
       return
     }
+
+    const detail: UiDialogClosingReason = {
+      cancelled: true,
+    }
+    if (this.dialogValue !== undefined) {
+      detail.value = this.dialogValue
+    }
+
+    // Dispatch cancelable closing event first
+    const closingEvent = new CustomEvent<UiDialogClosingReason>('closing', {
+      cancelable: true,
+      composed: false,
+      bubbles: false,
+      detail,
+    })
+    const canClose = this.dispatchEvent(closingEvent)
+
+    // Only proceed with closing if the event wasn't canceled
+    if (!canClose) {
+      // If closing was prevented, reopen the dialog
+      this.dialog.showModal()
+      return
+    }
+
     this.open = false
-    this.handleInteraction('dismiss')
+    this.dispatchEvent(
+      new CustomEvent<UiDialogClosingReason>('close', {
+        composed: true,
+        detail,
+      })
+    )
   }
 
   protected handleDismiss(): void {

package/test/elements/code-editor/code-editor.accessibility.test.ts

@@ -42,7 +42,7 @@ describe('CodeEditor - Accessibility', () => {
     return fixture(html`
       <code-editor
         label="Accessible Code Editor"
-        supporting-text="Enter your code with accessibility support"
+        supportingtext="Enter your code with accessibility support"
         placeholder="Type your code here..."
         .functionSchemas="${sampleFunctionSchemas}"
         .suggestions="${sampleSuggestions}"
@@ -54,7 +54,7 @@ describe('CodeEditor - Accessibility', () => {
     return fixture(html`
       <code-editor
         label="Code Editor with Documentation"
-        show-documentation
+        showdocumentation
         .functionSchemas="${sampleFunctionSchemas}"
       ></code-editor>
     `)
@@ -245,33 +245,6 @@ describe('CodeEditor - Accessibility', () => {
     })
   })
 
-  describe('High Contrast and Theme Support', () => {
-    it('should support dark theme for accessibility', async () => {
-      const el = await accessibleFixture()
-      el.darkTheme = true
-      await nextFrame()
-
-      // Wait for CodeMirror to apply theme
-      await aTimeout(100)
-
-      assert.isTrue(el.darkTheme)
-    })
-
-    it('should maintain readability in different themes', async () => {
-      const el = await accessibleFixture()
-      await nextFrame()
-
-      // Test both light and dark themes
-      el.darkTheme = false
-      await nextFrame()
-      assert.isFalse(el.darkTheme)
-
-      el.darkTheme = true
-      await nextFrame()
-      assert.isTrue(el.darkTheme)
-    })
-  })
-
   describe('Touch and Mobile Accessibility', () => {
     it.skip('should be usable on touch devices', async () => {
       const el = await accessibleFixture()

package/test/elements/code-editor/code-editor.test.ts

@@ -77,7 +77,7 @@ describe('CodeEditor', () => {
     return fixture(html`
       <code-editor
         label="Test Editor"
-        supporting-text="Enter your code here"
+        supportingtext="Enter your code here"
         placeholder="Type here..."
         .functionSchemas="${sampleFunctionSchemas}"
         .suggestions="${sampleSuggestions}"
@@ -88,7 +88,7 @@ describe('CodeEditor', () => {
   async function documentationFixture(): Promise<CodeEditorElement> {
     return fixture(html`
       <code-editor
-        show-documentation
+        showdocumentation
         .functionSchemas="${sampleFunctionSchemas}"
         .suggestions="${sampleSuggestions}"
       ></code-editor>
@@ -106,7 +106,6 @@ describe('CodeEditor', () => {
       assert.isFalse(el.required)
       assert.equal(el.placeholder, '')
       assert.equal(el.value, '')
-      assert.isFalse(el.darkTheme)
       assert.equal(el.language, 'javascript')
       assert.isFalse(el.showDocumentation)
       assert.deepEqual(el.functionSchemas, [])
@@ -123,7 +122,6 @@ describe('CodeEditor', () => {
       el.required = true
       el.placeholder = 'Test Placeholder'
       el.value = 'test code'
-      el.darkTheme = true
       el.language = 'python'
       el.showDocumentation = true
       el.functionSchemas = sampleFunctionSchemas
@@ -138,7 +136,6 @@ describe('CodeEditor', () => {
       assert.isTrue(el.required)
       assert.equal(el.placeholder, 'Test Placeholder')
       assert.equal(el.value, 'test code')
-      assert.isTrue(el.darkTheme)
       assert.equal(el.language, 'python')
       assert.isTrue(el.showDocumentation)
       assert.deepEqual(el.functionSchemas, sampleFunctionSchemas)
@@ -342,7 +339,7 @@ describe('CodeEditor', () => {
   })
 
   describe('Function Events', () => {
-    it('should dispatch function-insert event through user interaction', async () => {
+    it('should dispatch functioninsert event through user interaction', async () => {
       const el = await configuredFixture()
       await nextFrame()
 
@@ -351,33 +348,33 @@ describe('CodeEditor', () => {
 
       // Create a spy to capture the event
       const eventSpy = sinon.spy()
-      el.addEventListener('function-insert', eventSpy)
+      el.addEventListener('functioninsert', eventSpy)
 
       // Note: In a real test, this would be triggered by CodeMirror autocompletion
       // For now, we test that the event listener is properly set up
       assert.isFalse(eventSpy.called)
     })
 
-    it('should dispatch suggestion-insert event through user interaction', async () => {
+    it('should dispatch suggestioninsert event through user interaction', async () => {
       const el = await configuredFixture()
       await nextFrame()
 
       // Create a spy to capture the event
       const eventSpy = sinon.spy()
-      el.addEventListener('suggestion-insert', eventSpy)
+      el.addEventListener('suggestioninsert', eventSpy)
 
       // Note: In a real test, this would be triggered by CodeMirror autocompletion
       // For now, we test that the event listener is properly set up
       assert.isFalse(eventSpy.called)
     })
 
-    it('should have function-documentation event listener when showDocumentation is true', async () => {
+    it('should have docsrequest event listener when showDocumentation is true', async () => {
       const el = await documentationFixture()
       await nextFrame()
 
       // Create a spy to capture the event
       const eventSpy = sinon.spy()
-      el.addEventListener('function-documentation', eventSpy)
+      el.addEventListener('docsrequest', eventSpy)
 
       // Test that the element is configured to dispatch this event
       assert.isTrue(el.showDocumentation)
@@ -487,13 +484,13 @@ describe('CodeEditor', () => {
       assert.isAtLeast(el.functionSchemas.length, 1)
     })
 
-    it('should dispatch function-documentation event when documentation is enabled', async () => {
+    it('should dispatch docsrequest event when documentation is enabled', async () => {
       const el = await documentationFixture()
       await nextFrame()
       await aTimeout(100) // Wait for CodeMirror initialization
 
       const eventSpy = sinon.spy()
-      el.addEventListener('function-documentation', eventSpy)
+      el.addEventListener('docsrequest', eventSpy)
 
       // Access the private method through bracket notation to avoid TypeScript errors
       const functionSchema = sampleFunctionSchemas[0]