@api-client/ui 0.5.19 → 0.5.21

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

@@ -1,12 +1,11 @@
-import { type CSSResultOrNative, html, nothing, type PropertyValues, type TemplateResult, adoptStyles } from 'lit'
+import { html, nothing, type PropertyValues, type TemplateResult } from 'lit'
 import { property, query, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js'
 import { type ClassInfo, classMap } from 'lit/directives/class-map.js'
 import { UiElement } from '../../UiElement.js'
 import { isDisabled, setDisabled } from '../../../lib/disabled.js'
 import type UiButton from '../../button/internals/button.js'
 import type { TypedEvents } from '../../../core/types.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { SyntheticSubmitEvent } from '../../../events/SyntheticSubmitEvent.js'
+import type { ButtonType } from '../../button/internals/button.js'
 import '../../button/ui-button.js'
 import { bound } from '../../../decorators/bound.js'
 
@@ -42,8 +41,8 @@ export type RenderFunction = () => TemplateResult
  * closing reason detail.
  *
  * ```javascript
- * <ui-button color="text" value="dismiss">Cancel</ui-button>
- * <ui-button color="text" value="confirm">Take action</ui-button>
+ * <ui-button slot="button" color="text" value="dismiss">Cancel</ui-button>
+ * <ui-button slot="button" color="text" value="confirm">Take action</ui-button>
  * ```
  *
  * ```javascript
@@ -133,26 +132,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
    */
   @property({ type: Boolean }) accessor destructive = false
 
-  /**
-   * Part of the imperative access to the element.
-   * When set, it wraps the content in a `<form>` element.
-   * When this is enabled the following will happen:
-   * - The `confirm` button will get `type="submit"`
-   * - The form `method` attribute is set to `dialog`
-   * - The form `id` attribute is set to a random string. You can get it from the `formId` getter.
-   * - The dialog will dispatch the same `submit` event as the form.
-   * - When the `submit` event dispatched by the dialog gets cancelled, then:
-   *  - The original submit event also gets cancelled.
-   *  - The default confirm action is not invoked
-   *  - The dialog stays opened
-   * - When the submit event is not cancelled, then:
-   *  - The default confirm action is invoked.
-   *  - The dialog is closed.
-   *
-   * @deprecated Wrap the content in a `<form>` element instead.
-   */
-  @property({ type: Boolean }) accessor useForm: boolean | undefined
-
   /**
    * Only when `confirmLabel` is set.
    * Defines the value associated with the button's name when it's submitted with the form data.
@@ -160,6 +139,15 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
    * @attribute
    */
   @property({ type: String }) accessor confirmValue: string | undefined
+
+  /**
+   * The type of the confirm button.
+   * This is used to set the button's `type` attribute.
+   * If not set, the default is `button`.
+   * If set to `submit`, the dialog will trigger the form submission on the parent form.
+   * @attribute
+   */
+  @property({ type: String }) accessor confirmType: ButtonType | undefined
   /**
    * When the dialog is wrapped in a form, set this to `true` to close the dialog
    * when the form is submitted.
@@ -167,6 +155,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
    * Note that the dialog doesn't perform any validation of the form. It only closes
    * when the form is submitted, regardless of the application logic. The `submit` event
    * is dispatched by the dialog when the form is valid.
+   * @attribute
    */
   @property({ type: Boolean }) accessor submitClose: boolean | undefined
 
@@ -193,25 +182,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
    */
   dialogValue?: unknown
 
-  #formId?: string
-
-  /**
-   * @deprecated Use `useForm` instead.
-   */
-  get formId(): string | undefined {
-    return this.#formId
-  }
-
-  /**
-   * @deprecated This will be removed in the future.
-   */
-  @state() accessor #inject: TemplateResult | RenderFunction | undefined
-
-  /**
-   * @deprecated This will be removed in the future.
-   */
-  #pendingStyles?: CSSResultOrNative[]
-
   /**
    * A reference to the parent form element.
    * When a form is found, the dialog will hook into the form's submit event
@@ -228,29 +198,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
     this.addEventListener('keydown', this.handleKeyDown)
   }
 
-  /**
-   * Allows to inject a template into the internals of the element.
-   * This is helpful when working with imperative dialogs.
-   * @param content The content to inject into the body.
-   * @deprecated This will be removed in the future. To use forms, wrap the content in a `<form>` element.
-   */
-  inject(content?: TemplateResult | RenderFunction, styles?: CSSResultOrNative[]): void {
-    this.#inject = content
-    if (styles) {
-      if (this.shadowRoot) {
-        adoptStyles(this.shadowRoot, styles)
-      } else {
-        if (!this.#pendingStyles) {
-          this.#pendingStyles = []
-        }
-        this.#pendingStyles.push(...styles)
-      }
-    }
-    if (this.shadowRoot && styles) {
-      adoptStyles(this.shadowRoot, styles)
-    }
-  }
-
   override connectedCallback(): void {
     super.connectedCallback()
     this.#form = this.closest('form')
@@ -267,22 +214,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
     }
   }
 
-  protected override firstUpdated(): void {
-    const styles = this.#pendingStyles
-    if (styles) {
-      const root = this.shadowRoot as ShadowRoot
-      const all = [...root.adoptedStyleSheets, ...styles]
-      adoptStyles(this.shadowRoot as ShadowRoot, all)
-    }
-  }
-
-  override willUpdate(cp: PropertyValues<this>): void {
-    if (cp.has('useForm') && this.useForm && !this.#formId) {
-      const r = (Math.random() + 1).toString(36).substring(7)
-      this.#formId = `form-${r}`
-    }
-  }
-
   @bound
   protected handleFormSubmit(): void {
     if (this.submitClose) {
@@ -425,33 +356,15 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
   }
 
   protected handleConfirm(): void {
-    if (!this.useForm) {
-      this.handleInteraction('confirm')
-    }
-  }
-
-  #handleSubmit(event: SubmitEvent): void {
-    const form = event.target as HTMLFormElement
-    const copy = new SyntheticSubmitEvent(event.type, form, {
-      submitter: event.submitter,
-      cancelable: true,
-      bubbles: false,
-      composed: false,
-    })
-    const dispatched = this.dispatchEvent(copy)
-    if (dispatched) {
-      this.handleInteraction('confirm')
-    } else {
-      event.preventDefault()
-    }
+    this.handleInteraction('confirm')
   }
 
   override render(): TemplateResult {
-    const { useForm, modal } = this
+    const { modal } = this
     const dialogClass = modal ? 'modal' : 'non-modal'
     return html`
       <dialog @close="${this.handleDialogClose}" part="dialog" class="${dialogClass}">
-        <div class="container">${useForm ? this.#renderFormContent() : this.renderContent()}</div>
+        <div class="container">${this.renderContent()}</div>
       </dialog>
     `
   }
@@ -460,14 +373,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
     return [this.renderIcon(), this.renderTitle(), this.renderBody(), this.renderButtons()]
   }
 
-  #renderFormContent(): TemplateResult {
-    return html`
-      <form id="${ifDefined(this.formId)}" method="dialog" @submit="${this.#handleSubmit}" part="form">
-        ${this.renderContent()}
-      </form>
-    `
-  }
-
   protected renderIcon(): TemplateResult {
     const classes: ClassInfo = {
       'icon': true,
@@ -494,12 +399,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
   }
 
   protected renderBody(): TemplateResult {
-    let content = this.#inject
-    if (typeof content === 'function') {
-      content = content()
-    }
-    const injected = content || nothing
-    return html` <div class="content" part="body"><slot></slot>${injected}</div> `
+    return html` <div class="content" part="body"><slot></slot></div> `
   }
 
   protected renderButtons(): TemplateResult {
@@ -533,11 +433,11 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
   }
 
   #renderConfirmButton(): TemplateResult | typeof nothing {
-    const { confirmLabel, confirmValue = 'confirm', useForm, destructive } = this
+    const { confirmLabel, confirmValue = 'confirm', destructive } = this
     if (!confirmLabel) {
       return nothing
     }
-    const type = useForm ? 'submit' : 'button'
+    const type = this.confirmType ?? 'button'
     const buttonClass = destructive ? 'internal-button destructive' : 'internal-button'
     return html`
       <ui-button

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]

package/build/src/events/SyntheticSubmitEvent.d.ts

@@ -1,9 +0,0 @@
-export declare class SyntheticSubmitEvent extends Event {
-    #private;
-    constructor(type: string, form: HTMLFormElement, eventInitDict?: SubmitEventInit);
-    get form(): HTMLFormElement;
-    get submitter(): HTMLElement | null | undefined;
-    get target(): HTMLFormElement;
-    get currentTarget(): HTMLFormElement;
-}
-//# sourceMappingURL=SyntheticSubmitEvent.d.ts.map

package/build/src/events/SyntheticSubmitEvent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SyntheticSubmitEvent.d.ts","sourceRoot":"","sources":["../../../src/events/SyntheticSubmitEvent.ts"],"names":[],"mappings":"AAAA,qBAAa,oBAAqB,SAAQ,KAAK;;gBAKjC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,aAAa,CAAC,EAAE,eAAe;IAMhF,IAAI,IAAI,IAAI,eAAe,CAE1B;IAED,IAAI,SAAS,IAAI,WAAW,GAAG,IAAI,GAAG,SAAS,CAE9C;IAED,IAAa,MAAM,IAAI,eAAe,CAErC;IAED,IAAa,aAAa,IAAI,eAAe,CAE5C;CACF"}

package/build/src/events/SyntheticSubmitEvent.js

@@ -1,22 +0,0 @@
-export class SyntheticSubmitEvent extends Event {
-    #form;
-    #submitter;
-    constructor(type, form, eventInitDict) {
-        super(type, eventInitDict);
-        this.#form = form;
-        this.#submitter = eventInitDict?.submitter;
-    }
-    get form() {
-        return this.#form;
-    }
-    get submitter() {
-        return this.#submitter;
-    }
-    get target() {
-        return this.#form;
-    }
-    get currentTarget() {
-        return this.#form;
-    }
-}
-//# sourceMappingURL=SyntheticSubmitEvent.js.map

package/build/src/events/SyntheticSubmitEvent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SyntheticSubmitEvent.js","sourceRoot":"","sources":["../../../src/events/SyntheticSubmitEvent.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,oBAAqB,SAAQ,KAAK;IAC7C,KAAK,CAAiB;IAEtB,UAAU,CAAqB;IAE/B,YAAY,IAAY,EAAE,IAAqB,EAAE,aAA+B;QAC9E,KAAK,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;QAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;QACjB,IAAI,CAAC,UAAU,GAAG,aAAa,EAAE,SAAS,CAAA;IAC5C,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,UAAU,CAAA;IACxB,CAAC;IAED,IAAa,MAAM;QACjB,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;IAED,IAAa,aAAa;QACxB,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;CACF","sourcesContent":["export class SyntheticSubmitEvent extends Event {\n  #form: HTMLFormElement\n\n  #submitter?: HTMLElement | null\n\n  constructor(type: string, form: HTMLFormElement, eventInitDict?: SubmitEventInit) {\n    super(type, eventInitDict)\n    this.#form = form\n    this.#submitter = eventInitDict?.submitter\n  }\n\n  get form(): HTMLFormElement {\n    return this.#form\n  }\n\n  get submitter(): HTMLElement | null | undefined {\n    return this.#submitter\n  }\n\n  override get target(): HTMLFormElement {\n    return this.#form\n  }\n\n  override get currentTarget(): HTMLFormElement {\n    return this.#form\n  }\n}\n"]}

package/src/events/SyntheticSubmitEvent.ts

@@ -1,27 +0,0 @@
-export class SyntheticSubmitEvent extends Event {
-  #form: HTMLFormElement
-
-  #submitter?: HTMLElement | null
-
-  constructor(type: string, form: HTMLFormElement, eventInitDict?: SubmitEventInit) {
-    super(type, eventInitDict)
-    this.#form = form
-    this.#submitter = eventInitDict?.submitter
-  }
-
-  get form(): HTMLFormElement {
-    return this.#form
-  }
-
-  get submitter(): HTMLElement | null | undefined {
-    return this.#submitter
-  }
-
-  override get target(): HTMLFormElement {
-    return this.#form
-  }
-
-  override get currentTarget(): HTMLFormElement {
-    return this.#form
-  }
-}