@api-client/ui 0.5.19 → 0.5.21

package/build/src/md/dialog/internals/Dialog.js

@@ -1,11 +1,9 @@
-import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
-import { html, nothing, adoptStyles } from 'lit';
+import { __esDecorate, __runInitializers } from "tslib";
+import { html, nothing } from 'lit';
 import { property, query, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { UiElement } from '../../UiElement.js';
 import { isDisabled, setDisabled } from '../../../lib/disabled.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { SyntheticSubmitEvent } from '../../../events/SyntheticSubmitEvent.js';
 import '../../button/ui-button.js';
 import { bound } from '../../../decorators/bound.js';
 let UiDialog = (() => {
@@ -27,12 +25,12 @@ let UiDialog = (() => {
     let _destructive_decorators;
     let _destructive_initializers = [];
     let _destructive_extraInitializers = [];
-    let _useForm_decorators;
-    let _useForm_initializers = [];
-    let _useForm_extraInitializers = [];
     let _confirmValue_decorators;
     let _confirmValue_initializers = [];
     let _confirmValue_extraInitializers = [];
+    let _confirmType_decorators;
+    let _confirmType_initializers = [];
+    let _confirmType_extraInitializers = [];
     let _submitClose_decorators;
     let _submitClose_initializers = [];
     let _submitClose_extraInitializers = [];
@@ -57,10 +55,6 @@ let UiDialog = (() => {
     let _buttons_decorators;
     let _buttons_initializers = [];
     let _buttons_extraInitializers = [];
-    let _private_inject_decorators;
-    let _private_inject_initializers = [];
-    let _private_inject_extraInitializers = [];
-    let _private_inject_descriptor;
     let _handleFormSubmit_decorators;
     return class UiDialog extends _classSuper {
         static {
@@ -71,8 +65,8 @@ let UiDialog = (() => {
             _dismissLabel_decorators = [property({ type: String })];
             _confirmLabel_decorators = [property({ type: String })];
             _destructive_decorators = [property({ type: Boolean })];
-            _useForm_decorators = [property({ type: Boolean })];
             _confirmValue_decorators = [property({ type: String })];
+            _confirmType_decorators = [property({ type: String })];
             _submitClose_decorators = [property({ type: Boolean })];
             _dialog_decorators = [query('dialog')];
             _hasIcon_decorators = [state()];
@@ -81,7 +75,6 @@ let UiDialog = (() => {
             _icons_decorators = [queryAssignedElements({ flatten: true, slot: 'icon' })];
             _titles_decorators = [queryAssignedNodes({ flatten: true, slot: 'title' })];
             _buttons_decorators = [queryAssignedElements({ flatten: true, slot: 'button' })];
-            _private_inject_decorators = [state()];
             _handleFormSubmit_decorators = [bound];
             __esDecorate(this, null, _set_disabled_decorators, { kind: "setter", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _modal_decorators, { kind: "accessor", name: "modal", static: false, private: false, access: { has: obj => "modal" in obj, get: obj => obj.modal, set: (obj, value) => { obj.modal = value; } }, metadata: _metadata }, _modal_initializers, _modal_extraInitializers);
@@ -89,8 +82,8 @@ let UiDialog = (() => {
             __esDecorate(this, null, _dismissLabel_decorators, { kind: "accessor", name: "dismissLabel", static: false, private: false, access: { has: obj => "dismissLabel" in obj, get: obj => obj.dismissLabel, set: (obj, value) => { obj.dismissLabel = value; } }, metadata: _metadata }, _dismissLabel_initializers, _dismissLabel_extraInitializers);
             __esDecorate(this, null, _confirmLabel_decorators, { kind: "accessor", name: "confirmLabel", static: false, private: false, access: { has: obj => "confirmLabel" in obj, get: obj => obj.confirmLabel, set: (obj, value) => { obj.confirmLabel = value; } }, metadata: _metadata }, _confirmLabel_initializers, _confirmLabel_extraInitializers);
             __esDecorate(this, null, _destructive_decorators, { kind: "accessor", name: "destructive", static: false, private: false, access: { has: obj => "destructive" in obj, get: obj => obj.destructive, set: (obj, value) => { obj.destructive = value; } }, metadata: _metadata }, _destructive_initializers, _destructive_extraInitializers);
-            __esDecorate(this, null, _useForm_decorators, { kind: "accessor", name: "useForm", static: false, private: false, access: { has: obj => "useForm" in obj, get: obj => obj.useForm, set: (obj, value) => { obj.useForm = value; } }, metadata: _metadata }, _useForm_initializers, _useForm_extraInitializers);
             __esDecorate(this, null, _confirmValue_decorators, { kind: "accessor", name: "confirmValue", static: false, private: false, access: { has: obj => "confirmValue" in obj, get: obj => obj.confirmValue, set: (obj, value) => { obj.confirmValue = value; } }, metadata: _metadata }, _confirmValue_initializers, _confirmValue_extraInitializers);
+            __esDecorate(this, null, _confirmType_decorators, { kind: "accessor", name: "confirmType", static: false, private: false, access: { has: obj => "confirmType" in obj, get: obj => obj.confirmType, set: (obj, value) => { obj.confirmType = value; } }, metadata: _metadata }, _confirmType_initializers, _confirmType_extraInitializers);
             __esDecorate(this, null, _submitClose_decorators, { kind: "accessor", name: "submitClose", static: false, private: false, access: { has: obj => "submitClose" in obj, get: obj => obj.submitClose, set: (obj, value) => { obj.submitClose = value; } }, metadata: _metadata }, _submitClose_initializers, _submitClose_extraInitializers);
             __esDecorate(this, null, _dialog_decorators, { kind: "accessor", name: "dialog", static: false, private: false, access: { has: obj => "dialog" in obj, get: obj => obj.dialog, set: (obj, value) => { obj.dialog = value; } }, metadata: _metadata }, _dialog_initializers, _dialog_extraInitializers);
             __esDecorate(this, null, _hasIcon_decorators, { kind: "accessor", name: "hasIcon", static: false, private: false, access: { has: obj => "hasIcon" in obj, get: obj => obj.hasIcon, set: (obj, value) => { obj.hasIcon = value; } }, metadata: _metadata }, _hasIcon_initializers, _hasIcon_extraInitializers);
@@ -99,7 +92,6 @@ let UiDialog = (() => {
             __esDecorate(this, null, _icons_decorators, { kind: "accessor", name: "icons", static: false, private: false, access: { has: obj => "icons" in obj, get: obj => obj.icons, set: (obj, value) => { obj.icons = value; } }, metadata: _metadata }, _icons_initializers, _icons_extraInitializers);
             __esDecorate(this, null, _titles_decorators, { kind: "accessor", name: "titles", static: false, private: false, access: { has: obj => "titles" in obj, get: obj => obj.titles, set: (obj, value) => { obj.titles = value; } }, metadata: _metadata }, _titles_initializers, _titles_extraInitializers);
             __esDecorate(this, null, _buttons_decorators, { kind: "accessor", name: "buttons", static: false, private: false, access: { has: obj => "buttons" in obj, get: obj => obj.buttons, set: (obj, value) => { obj.buttons = value; } }, metadata: _metadata }, _buttons_initializers, _buttons_extraInitializers);
-            __esDecorate(this, _private_inject_descriptor = { get: __setFunctionName(function () { return this.#inject_accessor_storage; }, "#inject", "get"), set: __setFunctionName(function (value) { this.#inject_accessor_storage = value; }, "#inject", "set") }, _private_inject_decorators, { kind: "accessor", name: "#inject", static: false, private: true, access: { has: obj => #inject in obj, get: obj => obj.#inject, set: (obj, value) => { obj.#inject = value; } }, metadata: _metadata }, _private_inject_initializers, _private_inject_extraInitializers);
             __esDecorate(this, null, _handleFormSubmit_decorators, { kind: "method", name: "handleFormSubmit", static: false, private: false, access: { has: obj => "handleFormSubmit" in obj, get: obj => obj.handleFormSubmit }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
@@ -163,22 +155,10 @@ let UiDialog = (() => {
         set confirmLabel(value) { this.#confirmLabel_accessor_storage = value; }
         #destructive_accessor_storage = (__runInitializers(this, _confirmLabel_extraInitializers), __runInitializers(this, _destructive_initializers, 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.
+         * Only when `confirmLabel` is set.
+         * Defines the value associated with the button's name when it's submitted with the form data.
+         * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value}
+         * @attribute
          */
         ));
         /**
@@ -188,28 +168,7 @@ let UiDialog = (() => {
          */
         get destructive() { return this.#destructive_accessor_storage; }
         set destructive(value) { this.#destructive_accessor_storage = value; }
-        #useForm_accessor_storage = (__runInitializers(this, _destructive_extraInitializers), __runInitializers(this, _useForm_initializers, void 0));
-        /**
-         * 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.
-         */
-        get useForm() { return this.#useForm_accessor_storage; }
-        set useForm(value) { this.#useForm_accessor_storage = value; }
-        #confirmValue_accessor_storage = (__runInitializers(this, _useForm_extraInitializers), __runInitializers(this, _confirmValue_initializers, void 0));
+        #confirmValue_accessor_storage = (__runInitializers(this, _destructive_extraInitializers), __runInitializers(this, _confirmValue_initializers, void 0));
         /**
          * Only when `confirmLabel` is set.
          * Defines the value associated with the button's name when it's submitted with the form data.
@@ -218,7 +177,17 @@ let UiDialog = (() => {
          */
         get confirmValue() { return this.#confirmValue_accessor_storage; }
         set confirmValue(value) { this.#confirmValue_accessor_storage = value; }
-        #submitClose_accessor_storage = (__runInitializers(this, _confirmValue_extraInitializers), __runInitializers(this, _submitClose_initializers, void 0));
+        #confirmType_accessor_storage = (__runInitializers(this, _confirmValue_extraInitializers), __runInitializers(this, _confirmType_initializers, void 0));
+        /**
+         * 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
+         */
+        get confirmType() { return this.#confirmType_accessor_storage; }
+        set confirmType(value) { this.#confirmType_accessor_storage = value; }
+        #submitClose_accessor_storage = (__runInitializers(this, _confirmType_extraInitializers), __runInitializers(this, _submitClose_initializers, void 0));
         /**
          * When the dialog is wrapped in a form, set this to `true` to close the dialog
          * when the form is submitted.
@@ -226,6 +195,7 @@ let UiDialog = (() => {
          * 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
          */
         get submitClose() { return this.#submitClose_accessor_storage; }
         set submitClose(value) { this.#submitClose_accessor_storage = value; }
@@ -258,23 +228,6 @@ let UiDialog = (() => {
          * This is passed to the close event.
          */
         dialogValue = __runInitializers(this, _buttons_extraInitializers);
-        #formId;
-        /**
-         * @deprecated Use `useForm` instead.
-         */
-        get formId() {
-            return this.#formId;
-        }
-        #inject_accessor_storage = __runInitializers(this, _private_inject_initializers, void 0);
-        /**
-         * @deprecated This will be removed in the future.
-         */
-        get #inject() { return _private_inject_descriptor.get.call(this); }
-        set #inject(value) { return _private_inject_descriptor.set.call(this, value); }
-        /**
-         * @deprecated This will be removed in the future.
-         */
-        #pendingStyles = __runInitializers(this, _private_inject_extraInitializers);
         /**
          * A reference to the parent form element.
          * When a form is found, the dialog will hook into the form's submit event
@@ -288,29 +241,6 @@ let UiDialog = (() => {
             this.addEventListener('click', this.handleClick);
             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, styles) {
-            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);
-            }
-        }
         connectedCallback() {
             super.connectedCallback();
             this.#form = this.closest('form');
@@ -325,20 +255,6 @@ let UiDialog = (() => {
                 this.#form = null;
             }
         }
-        firstUpdated() {
-            const styles = this.#pendingStyles;
-            if (styles) {
-                const root = this.shadowRoot;
-                const all = [...root.adoptedStyleSheets, ...styles];
-                adoptStyles(this.shadowRoot, all);
-            }
-        }
-        willUpdate(cp) {
-            if (cp.has('useForm') && this.useForm && !this.#formId) {
-                const r = (Math.random() + 1).toString(36).substring(7);
-                this.#formId = `form-${r}`;
-            }
-        }
         handleFormSubmit() {
             if (this.submitClose) {
                 this.handleInteraction('confirm');
@@ -461,45 +377,20 @@ let UiDialog = (() => {
             this.handleInteraction('dismiss');
         }
         handleConfirm() {
-            if (!this.useForm) {
-                this.handleInteraction('confirm');
-            }
-        }
-        #handleSubmit(event) {
-            const form = event.target;
-            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');
         }
         render() {
-            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>
     `;
         }
         renderContent() {
             return [this.renderIcon(), this.renderTitle(), this.renderBody(), this.renderButtons()];
         }
-        #renderFormContent() {
-            return html `
-      <form id="${ifDefined(this.formId)}" method="dialog" @submit="${this.#handleSubmit}" part="form">
-        ${this.renderContent()}
-      </form>
-    `;
-        }
         renderIcon() {
             const classes = {
                 'icon': true,
@@ -524,12 +415,7 @@ let UiDialog = (() => {
     `;
         }
         renderBody() {
-            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> `;
         }
         renderButtons() {
             const classes = {
@@ -560,11 +446,11 @@ let UiDialog = (() => {
     `;
         }
         #renderConfirmButton() {
-            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
@@ -592,8 +478,8 @@ let UiDialog = (() => {
  * 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

package/build/src/md/dialog/internals/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { type CSSResultOrNative, html, nothing, type PropertyValues, type TemplateResult, adoptStyles } from 'lit'\nimport { property, query, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js'\nimport { type ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport type UiButton from '../../button/internals/button.js'\nimport type { TypedEvents } from '../../../core/types.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { SyntheticSubmitEvent } from '../../../events/SyntheticSubmitEvent.js'\nimport '../../button/ui-button.js'\nimport { bound } from '../../../decorators/bound.js'\n\nexport interface UiDialogClosingReason {\n  /**\n   * Whether the dialog was cancelled by either activating the `dismiss` button\n   * or by pressing escape.\n   */\n  cancelled: boolean\n  /**\n   * This is used in cases when the dialog has more complex purpose.\n   * This is the value expected from the dialog.\n   */\n  value?: unknown\n}\n\ninterface DialogEventMap {\n  closing: CustomEvent<UiDialogClosingReason>\n  close: CustomEvent<UiDialogClosingReason>\n}\n\nexport type RenderFunction = () => TemplateResult\n\n/**\n * Styled dialog using a native `<dialog>` element under the hood.\n * Note, since native dialog renders in the top layer it is not necessary\n * to place the dialog in the `<body>`.\n *\n * **Using Buttons**\n *\n * The dialog automatically recognizes buttons with values `confirm` and `dismiss`\n * to close the dialog and dispatch the `close` event. The event has additional\n * closing reason detail.\n *\n * ```javascript\n * <ui-button color=\"text\" value=\"dismiss\">Cancel</ui-button>\n * <ui-button color=\"text\" value=\"confirm\">Take action</ui-button>\n * ```\n *\n * ```javascript\n * <button value=\"dismiss\">Cancel</button>\n * <button value=\"confirm\">Take action</button>\n * ```\n *\n * The detail object of the `close` event has the following properties:\n * - cancelled - Whether the dialog was cancelled by either activating the `dismiss` button or by pressing escape.\n *\n * The `close` event is only dispatched when the user interact with the dialog. Imperative control of the\n * dialog won't trigger the close button.\n *\n * ** Full example**\n *\n * ```javascript\n * <ui-dialog modal>\n *  <ui-icon slot=\"icon\" icon=\"delete\"></ui-icon>\n *\n *  <span slot=\"title\">Delete photos?</span>\n *  <p>This action will permanently remove the selected pictures from your account.</p>\n *\n *  <ui-button color=\"text\" slot=\"button\" value=\"dismiss\" type=\"text\">Cancel</ui-button>\n *  <ui-button color=\"text\" slot=\"button\" value=\"confirm\" type=\"text\">Confirm</ui-button>\n * </ui-dialog>\n * ```\n *\n * @slot - The slot for the content of the dialog.\n * @slot icon - The slot to place the dialog icon\n * @slot title - The slot to place the dialog title. Do not put elements here, just the text.\n * @slot button - The slot to place the dialog buttons. Use the `confirm` or `dismiss`\n *  buttons to automatically close the dialog.\n * @fires closing - A cancelable, non-bubbling event with the `UiDialogClosingReason` as the detail,\n *  dispatched before the dialog closes. If prevented, the dialog will not close.\n * @fires close - A non-bubbling, non-cancellable event with the `UiDialogClosingReason` as the detail.\n */\nexport default class UiDialog extends UiElement implements TypedEvents<DialogEventMap> {\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this)\n    setDisabled(this, value)\n    this.requestUpdate('disabled', old)\n  }\n\n  /**\n   * Opens the dialog as modal when toggling dialog's open state.\n   *\n   * Setting this value after the dialog was opened has no effect.\n   *\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor modal = false\n\n  /**\n   * Toggles visibility of the dialog.\n   * Note, the dialog is opened asynchronously after the update is performed.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor open = false\n\n  /**\n   * Imperative access to create a dismiss button.\n   * When set this will render a dismiss button at the end of the buttons line, before the `confirmLabel` button.\n   * @attribute\n   */\n  @property({ type: String }) accessor dismissLabel: string | undefined\n\n  /**\n   * Imperative access to create a confirm button.\n   * When set this will render a confirm button at the end of the buttons line, after the `dismissLabel` button.\n   * @attribute\n   */\n  @property({ type: String }) accessor confirmLabel: string | undefined\n\n  /**\n   * When true, styles the confirm button with error colors to indicate\n   * a destructive action (e.g., delete, remove, etc.).\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor destructive = false\n\n  /**\n   * Part of the imperative access to the element.\n   * When set, it wraps the content in a `<form>` element.\n   * When this is enabled the following will happen:\n   * - The `confirm` button will get `type=\"submit\"`\n   * - The form `method` attribute is set to `dialog`\n   * - The form `id` attribute is set to a random string. You can get it from the `formId` getter.\n   * - The dialog will dispatch the same `submit` event as the form.\n   * - When the `submit` event dispatched by the dialog gets cancelled, then:\n   *  - The original submit event also gets cancelled.\n   *  - The default confirm action is not invoked\n   *  - The dialog stays opened\n   * - When the submit event is not cancelled, then:\n   *  - The default confirm action is invoked.\n   *  - The dialog is closed.\n   *\n   * @deprecated Wrap the content in a `<form>` element instead.\n   */\n  @property({ type: Boolean }) accessor useForm: boolean | undefined\n\n  /**\n   * Only when `confirmLabel` is set.\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value}\n   * @attribute\n   */\n  @property({ type: String }) accessor confirmValue: string | undefined\n  /**\n   * When the dialog is wrapped in a form, set this to `true` to close the dialog\n   * when the form is submitted.\n   *\n   * Note that the dialog doesn't perform any validation of the form. It only closes\n   * when the form is submitted, regardless of the application logic. The `submit` event\n   * is dispatched by the dialog when the form is valid.\n   */\n  @property({ type: Boolean }) accessor submitClose: boolean | undefined\n\n  /**\n   * A reference to the underlying dialog element.\n   */\n  @query('dialog') accessor dialog!: HTMLDialogElement\n\n  @state() protected accessor hasIcon = false\n\n  @state() protected accessor hasTitle = false\n\n  @state() protected accessor hasButton = false\n\n  @queryAssignedElements({ flatten: true, slot: 'icon' }) protected accessor icons!: HTMLElement[]\n\n  @queryAssignedNodes({ flatten: true, slot: 'title' }) protected accessor titles!: HTMLElement[]\n\n  @queryAssignedElements({ flatten: true, slot: 'button' }) protected accessor buttons!: HTMLElement[]\n\n  /**\n   * To be set by a child class when closing the dialog.\n   * This is passed to the close event.\n   */\n  dialogValue?: unknown\n\n  #formId?: string\n\n  /**\n   * @deprecated Use `useForm` instead.\n   */\n  get formId(): string | undefined {\n    return this.#formId\n  }\n\n  /**\n   * @deprecated This will be removed in the future.\n   */\n  @state() accessor #inject: TemplateResult | RenderFunction | undefined\n\n  /**\n   * @deprecated This will be removed in the future.\n   */\n  #pendingStyles?: CSSResultOrNative[]\n\n  /**\n   * A reference to the parent form element.\n   * When a form is found, the dialog will hook into the form's submit event\n   * and close the dialog when the form is submitted.\n   * Since the `submit` event is dispatched when the form is valid,\n   * we can use this to close the dialog and not worry about the form validation.\n   */\n  #form: HTMLFormElement | null = null\n\n  constructor() {\n    super()\n\n    this.addEventListener('click', this.handleClick)\n    this.addEventListener('keydown', this.handleKeyDown)\n  }\n\n  /**\n   * Allows to inject a template into the internals of the element.\n   * This is helpful when working with imperative dialogs.\n   * @param content The content to inject into the body.\n   * @deprecated This will be removed in the future. To use forms, wrap the content in a `<form>` element.\n   */\n  inject(content?: TemplateResult | RenderFunction, styles?: CSSResultOrNative[]): void {\n    this.#inject = content\n    if (styles) {\n      if (this.shadowRoot) {\n        adoptStyles(this.shadowRoot, styles)\n      } else {\n        if (!this.#pendingStyles) {\n          this.#pendingStyles = []\n        }\n        this.#pendingStyles.push(...styles)\n      }\n    }\n    if (this.shadowRoot && styles) {\n      adoptStyles(this.shadowRoot, styles)\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.#form = this.closest('form')\n    if (this.#form) {\n      this.#form.addEventListener('submit', this.handleFormSubmit)\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    if (this.#form) {\n      this.#form.removeEventListener('submit', this.handleFormSubmit)\n      this.#form = null\n    }\n  }\n\n  protected override firstUpdated(): void {\n    const styles = this.#pendingStyles\n    if (styles) {\n      const root = this.shadowRoot as ShadowRoot\n      const all = [...root.adoptedStyleSheets, ...styles]\n      adoptStyles(this.shadowRoot as ShadowRoot, all)\n    }\n  }\n\n  override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('useForm') && this.useForm && !this.#formId) {\n      const r = (Math.random() + 1).toString(36).substring(7)\n      this.#formId = `form-${r}`\n    }\n  }\n\n  @bound\n  protected handleFormSubmit(): void {\n    if (this.submitClose) {\n      this.handleInteraction('confirm')\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e)\n    const path = e.composedPath()\n    const { buttons } = this\n    const button = path.find((i) => buttons.includes(i as HTMLElement)) as HTMLButtonElement | UiButton | undefined\n    if (!button) {\n      return\n    }\n    if (button.type === 'submit') {\n      // Adds support for forms.\n      // When a form's submit button is clicked we yield the flow control to the form.\n      // This way the form can handle the submit event.\n      return\n    }\n    const { value = '' } = button\n    this.handleInteraction(value as 'dismiss' | 'confirm')\n  }\n\n  override handleKeyDown(e: KeyboardEvent): void {\n    super.handleKeyDown(e)\n    if (e.defaultPrevented) {\n      return\n    }\n    if (e.key === 'Escape') {\n      this.handleInteraction('dismiss')\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('open')) {\n      this.#controlVisibility()\n    }\n    super.updated(changedProperties)\n  }\n\n  #controlVisibility(): void {\n    const { dialog, modal, open } = this\n    if (!dialog) {\n      return\n    }\n    if (open) {\n      if (modal) {\n        dialog.showModal()\n      } else {\n        dialog.show()\n      }\n    } else {\n      dialog.close()\n    }\n  }\n\n  #handleSlotChange(): void {\n    const { icons, titles, buttons } = this\n    this.hasIcon = !!icons && !!icons.length\n    this.hasTitle = !!titles && !!titles.length\n    this.hasButton = !!buttons && !!buttons.length\n  }\n\n  protected handleInteraction(value: 'dismiss' | 'confirm'): void {\n    if (!['dismiss', 'confirm'].includes(value)) {\n      return\n    }\n\n    const detail: UiDialogClosingReason = {\n      cancelled: value === 'dismiss',\n    }\n    if (this.dialogValue !== undefined) {\n      detail.value = this.dialogValue\n    }\n\n    // Dispatch cancelable closing event first\n    const closingEvent = new CustomEvent<UiDialogClosingReason>('closing', {\n      cancelable: true,\n      composed: false,\n      bubbles: false,\n      detail,\n    })\n    const canClose = this.dispatchEvent(closingEvent)\n\n    // Only proceed with closing if the event wasn't canceled\n    if (!canClose) {\n      return\n    }\n\n    this.open = false\n    this.dispatchEvent(\n      new CustomEvent<UiDialogClosingReason>('close', {\n        composed: true,\n        detail,\n      })\n    )\n  }\n\n  protected handleDialogClose(): void {\n    if (!this.open) {\n      return\n    }\n\n    const detail: UiDialogClosingReason = {\n      cancelled: true,\n    }\n    if (this.dialogValue !== undefined) {\n      detail.value = this.dialogValue\n    }\n\n    // Dispatch cancelable closing event first\n    const closingEvent = new CustomEvent<UiDialogClosingReason>('closing', {\n      cancelable: true,\n      composed: false,\n      bubbles: false,\n      detail,\n    })\n    const canClose = this.dispatchEvent(closingEvent)\n\n    // Only proceed with closing if the event wasn't canceled\n    if (!canClose) {\n      // If closing was prevented, reopen the dialog\n      this.dialog.showModal()\n      return\n    }\n\n    this.open = false\n    this.dispatchEvent(\n      new CustomEvent<UiDialogClosingReason>('close', {\n        composed: true,\n        detail,\n      })\n    )\n  }\n\n  protected handleDismiss(): void {\n    this.handleInteraction('dismiss')\n  }\n\n  protected handleConfirm(): void {\n    if (!this.useForm) {\n      this.handleInteraction('confirm')\n    }\n  }\n\n  #handleSubmit(event: SubmitEvent): void {\n    const form = event.target as HTMLFormElement\n    const copy = new SyntheticSubmitEvent(event.type, form, {\n      submitter: event.submitter,\n      cancelable: true,\n      bubbles: false,\n      composed: false,\n    })\n    const dispatched = this.dispatchEvent(copy)\n    if (dispatched) {\n      this.handleInteraction('confirm')\n    } else {\n      event.preventDefault()\n    }\n  }\n\n  override render(): TemplateResult {\n    const { useForm, modal } = this\n    const dialogClass = modal ? 'modal' : 'non-modal'\n    return html`\n      <dialog @close=\"${this.handleDialogClose}\" part=\"dialog\" class=\"${dialogClass}\">\n        <div class=\"container\">${useForm ? this.#renderFormContent() : this.renderContent()}</div>\n      </dialog>\n    `\n  }\n\n  protected renderContent(): TemplateResult[] | TemplateResult {\n    return [this.renderIcon(), this.renderTitle(), this.renderBody(), this.renderButtons()]\n  }\n\n  #renderFormContent(): TemplateResult {\n    return html`\n      <form id=\"${ifDefined(this.formId)}\" method=\"dialog\" @submit=\"${this.#handleSubmit}\" part=\"form\">\n        ${this.renderContent()}\n      </form>\n    `\n  }\n\n  protected renderIcon(): TemplateResult {\n    const classes: ClassInfo = {\n      'icon': true,\n      'with-icon': this.hasIcon,\n      'destructive': this.destructive,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"icon\">\n        <slot name=\"icon\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n      </div>\n    `\n  }\n\n  protected renderTitle(): TemplateResult {\n    const classes: ClassInfo = {\n      'title': true,\n      'with-title': this.hasTitle,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"title\">\n        <slot name=\"title\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n      </div>\n    `\n  }\n\n  protected renderBody(): TemplateResult {\n    let content = this.#inject\n    if (typeof content === 'function') {\n      content = content()\n    }\n    const injected = content || nothing\n    return html` <div class=\"content\" part=\"body\"><slot></slot>${injected}</div> `\n  }\n\n  protected renderButtons(): TemplateResult {\n    const classes: ClassInfo = {\n      'buttons': true,\n      'with-buttons': this.hasButton || !!this.confirmLabel || !!this.dismissLabel,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"button\">\n        <slot name=\"button\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n        ${this.#renderDismissButton()} ${this.#renderConfirmButton()}\n      </div>\n    `\n  }\n\n  #renderDismissButton(): TemplateResult | typeof nothing {\n    const { dismissLabel } = this\n    if (!dismissLabel) {\n      return nothing\n    }\n    return html`\n      <ui-button\n        color=\"text\"\n        value=\"dismiss\"\n        class=\"internal-button\"\n        @click=\"${this.handleDismiss}\"\n        part=\"negative-action\"\n        >${dismissLabel}</ui-button\n      >\n    `\n  }\n\n  #renderConfirmButton(): TemplateResult | typeof nothing {\n    const { confirmLabel, confirmValue = 'confirm', useForm, destructive } = this\n    if (!confirmLabel) {\n      return nothing\n    }\n    const type = useForm ? 'submit' : 'button'\n    const buttonClass = destructive ? 'internal-button destructive' : 'internal-button'\n    return html`\n      <ui-button\n        color=\"text\"\n        type=\"${type}\"\n        value=\"${confirmValue}\"\n        class=\"${buttonClass}\"\n        @click=\"${this.handleConfirm}\"\n        part=\"positive-action\"\n        >${confirmLabel}</ui-button\n      >\n    `\n  }\n}\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, type PropertyValues, type TemplateResult } from 'lit'\nimport { property, query, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js'\nimport { type ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport type UiButton from '../../button/internals/button.js'\nimport type { TypedEvents } from '../../../core/types.js'\nimport type { ButtonType } from '../../button/internals/button.js'\nimport '../../button/ui-button.js'\nimport { bound } from '../../../decorators/bound.js'\n\nexport interface UiDialogClosingReason {\n  /**\n   * Whether the dialog was cancelled by either activating the `dismiss` button\n   * or by pressing escape.\n   */\n  cancelled: boolean\n  /**\n   * This is used in cases when the dialog has more complex purpose.\n   * This is the value expected from the dialog.\n   */\n  value?: unknown\n}\n\ninterface DialogEventMap {\n  closing: CustomEvent<UiDialogClosingReason>\n  close: CustomEvent<UiDialogClosingReason>\n}\n\nexport type RenderFunction = () => TemplateResult\n\n/**\n * Styled dialog using a native `<dialog>` element under the hood.\n * Note, since native dialog renders in the top layer it is not necessary\n * to place the dialog in the `<body>`.\n *\n * **Using Buttons**\n *\n * The dialog automatically recognizes buttons with values `confirm` and `dismiss`\n * to close the dialog and dispatch the `close` event. The event has additional\n * closing reason detail.\n *\n * ```javascript\n * <ui-button slot=\"button\" color=\"text\" value=\"dismiss\">Cancel</ui-button>\n * <ui-button slot=\"button\" color=\"text\" value=\"confirm\">Take action</ui-button>\n * ```\n *\n * ```javascript\n * <button value=\"dismiss\">Cancel</button>\n * <button value=\"confirm\">Take action</button>\n * ```\n *\n * The detail object of the `close` event has the following properties:\n * - cancelled - Whether the dialog was cancelled by either activating the `dismiss` button or by pressing escape.\n *\n * The `close` event is only dispatched when the user interact with the dialog. Imperative control of the\n * dialog won't trigger the close button.\n *\n * ** Full example**\n *\n * ```javascript\n * <ui-dialog modal>\n *  <ui-icon slot=\"icon\" icon=\"delete\"></ui-icon>\n *\n *  <span slot=\"title\">Delete photos?</span>\n *  <p>This action will permanently remove the selected pictures from your account.</p>\n *\n *  <ui-button color=\"text\" slot=\"button\" value=\"dismiss\" type=\"text\">Cancel</ui-button>\n *  <ui-button color=\"text\" slot=\"button\" value=\"confirm\" type=\"text\">Confirm</ui-button>\n * </ui-dialog>\n * ```\n *\n * @slot - The slot for the content of the dialog.\n * @slot icon - The slot to place the dialog icon\n * @slot title - The slot to place the dialog title. Do not put elements here, just the text.\n * @slot button - The slot to place the dialog buttons. Use the `confirm` or `dismiss`\n *  buttons to automatically close the dialog.\n * @fires closing - A cancelable, non-bubbling event with the `UiDialogClosingReason` as the detail,\n *  dispatched before the dialog closes. If prevented, the dialog will not close.\n * @fires close - A non-bubbling, non-cancellable event with the `UiDialogClosingReason` as the detail.\n */\nexport default class UiDialog extends UiElement implements TypedEvents<DialogEventMap> {\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this)\n    setDisabled(this, value)\n    this.requestUpdate('disabled', old)\n  }\n\n  /**\n   * Opens the dialog as modal when toggling dialog's open state.\n   *\n   * Setting this value after the dialog was opened has no effect.\n   *\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor modal = false\n\n  /**\n   * Toggles visibility of the dialog.\n   * Note, the dialog is opened asynchronously after the update is performed.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor open = false\n\n  /**\n   * Imperative access to create a dismiss button.\n   * When set this will render a dismiss button at the end of the buttons line, before the `confirmLabel` button.\n   * @attribute\n   */\n  @property({ type: String }) accessor dismissLabel: string | undefined\n\n  /**\n   * Imperative access to create a confirm button.\n   * When set this will render a confirm button at the end of the buttons line, after the `dismissLabel` button.\n   * @attribute\n   */\n  @property({ type: String }) accessor confirmLabel: string | undefined\n\n  /**\n   * When true, styles the confirm button with error colors to indicate\n   * a destructive action (e.g., delete, remove, etc.).\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor destructive = false\n\n  /**\n   * Only when `confirmLabel` is set.\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value}\n   * @attribute\n   */\n  @property({ type: String }) accessor confirmValue: string | undefined\n\n  /**\n   * The type of the confirm button.\n   * This is used to set the button's `type` attribute.\n   * If not set, the default is `button`.\n   * If set to `submit`, the dialog will trigger the form submission on the parent form.\n   * @attribute\n   */\n  @property({ type: String }) accessor confirmType: ButtonType | undefined\n  /**\n   * When the dialog is wrapped in a form, set this to `true` to close the dialog\n   * when the form is submitted.\n   *\n   * Note that the dialog doesn't perform any validation of the form. It only closes\n   * when the form is submitted, regardless of the application logic. The `submit` event\n   * is dispatched by the dialog when the form is valid.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor submitClose: boolean | undefined\n\n  /**\n   * A reference to the underlying dialog element.\n   */\n  @query('dialog') accessor dialog!: HTMLDialogElement\n\n  @state() protected accessor hasIcon = false\n\n  @state() protected accessor hasTitle = false\n\n  @state() protected accessor hasButton = false\n\n  @queryAssignedElements({ flatten: true, slot: 'icon' }) protected accessor icons!: HTMLElement[]\n\n  @queryAssignedNodes({ flatten: true, slot: 'title' }) protected accessor titles!: HTMLElement[]\n\n  @queryAssignedElements({ flatten: true, slot: 'button' }) protected accessor buttons!: HTMLElement[]\n\n  /**\n   * To be set by a child class when closing the dialog.\n   * This is passed to the close event.\n   */\n  dialogValue?: unknown\n\n  /**\n   * A reference to the parent form element.\n   * When a form is found, the dialog will hook into the form's submit event\n   * and close the dialog when the form is submitted.\n   * Since the `submit` event is dispatched when the form is valid,\n   * we can use this to close the dialog and not worry about the form validation.\n   */\n  #form: HTMLFormElement | null = null\n\n  constructor() {\n    super()\n\n    this.addEventListener('click', this.handleClick)\n    this.addEventListener('keydown', this.handleKeyDown)\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.#form = this.closest('form')\n    if (this.#form) {\n      this.#form.addEventListener('submit', this.handleFormSubmit)\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    if (this.#form) {\n      this.#form.removeEventListener('submit', this.handleFormSubmit)\n      this.#form = null\n    }\n  }\n\n  @bound\n  protected handleFormSubmit(): void {\n    if (this.submitClose) {\n      this.handleInteraction('confirm')\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e)\n    const path = e.composedPath()\n    const { buttons } = this\n    const button = path.find((i) => buttons.includes(i as HTMLElement)) as HTMLButtonElement | UiButton | undefined\n    if (!button) {\n      return\n    }\n    if (button.type === 'submit') {\n      // Adds support for forms.\n      // When a form's submit button is clicked we yield the flow control to the form.\n      // This way the form can handle the submit event.\n      return\n    }\n    const { value = '' } = button\n    this.handleInteraction(value as 'dismiss' | 'confirm')\n  }\n\n  override handleKeyDown(e: KeyboardEvent): void {\n    super.handleKeyDown(e)\n    if (e.defaultPrevented) {\n      return\n    }\n    if (e.key === 'Escape') {\n      this.handleInteraction('dismiss')\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('open')) {\n      this.#controlVisibility()\n    }\n    super.updated(changedProperties)\n  }\n\n  #controlVisibility(): void {\n    const { dialog, modal, open } = this\n    if (!dialog) {\n      return\n    }\n    if (open) {\n      if (modal) {\n        dialog.showModal()\n      } else {\n        dialog.show()\n      }\n    } else {\n      dialog.close()\n    }\n  }\n\n  #handleSlotChange(): void {\n    const { icons, titles, buttons } = this\n    this.hasIcon = !!icons && !!icons.length\n    this.hasTitle = !!titles && !!titles.length\n    this.hasButton = !!buttons && !!buttons.length\n  }\n\n  protected handleInteraction(value: 'dismiss' | 'confirm'): void {\n    if (!['dismiss', 'confirm'].includes(value)) {\n      return\n    }\n\n    const detail: UiDialogClosingReason = {\n      cancelled: value === 'dismiss',\n    }\n    if (this.dialogValue !== undefined) {\n      detail.value = this.dialogValue\n    }\n\n    // Dispatch cancelable closing event first\n    const closingEvent = new CustomEvent<UiDialogClosingReason>('closing', {\n      cancelable: true,\n      composed: false,\n      bubbles: false,\n      detail,\n    })\n    const canClose = this.dispatchEvent(closingEvent)\n\n    // Only proceed with closing if the event wasn't canceled\n    if (!canClose) {\n      return\n    }\n\n    this.open = false\n    this.dispatchEvent(\n      new CustomEvent<UiDialogClosingReason>('close', {\n        composed: true,\n        detail,\n      })\n    )\n  }\n\n  protected handleDialogClose(): void {\n    if (!this.open) {\n      return\n    }\n\n    const detail: UiDialogClosingReason = {\n      cancelled: true,\n    }\n    if (this.dialogValue !== undefined) {\n      detail.value = this.dialogValue\n    }\n\n    // Dispatch cancelable closing event first\n    const closingEvent = new CustomEvent<UiDialogClosingReason>('closing', {\n      cancelable: true,\n      composed: false,\n      bubbles: false,\n      detail,\n    })\n    const canClose = this.dispatchEvent(closingEvent)\n\n    // Only proceed with closing if the event wasn't canceled\n    if (!canClose) {\n      // If closing was prevented, reopen the dialog\n      this.dialog.showModal()\n      return\n    }\n\n    this.open = false\n    this.dispatchEvent(\n      new CustomEvent<UiDialogClosingReason>('close', {\n        composed: true,\n        detail,\n      })\n    )\n  }\n\n  protected handleDismiss(): void {\n    this.handleInteraction('dismiss')\n  }\n\n  protected handleConfirm(): void {\n    this.handleInteraction('confirm')\n  }\n\n  override render(): TemplateResult {\n    const { modal } = this\n    const dialogClass = modal ? 'modal' : 'non-modal'\n    return html`\n      <dialog @close=\"${this.handleDialogClose}\" part=\"dialog\" class=\"${dialogClass}\">\n        <div class=\"container\">${this.renderContent()}</div>\n      </dialog>\n    `\n  }\n\n  protected renderContent(): TemplateResult[] | TemplateResult {\n    return [this.renderIcon(), this.renderTitle(), this.renderBody(), this.renderButtons()]\n  }\n\n  protected renderIcon(): TemplateResult {\n    const classes: ClassInfo = {\n      'icon': true,\n      'with-icon': this.hasIcon,\n      'destructive': this.destructive,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"icon\">\n        <slot name=\"icon\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n      </div>\n    `\n  }\n\n  protected renderTitle(): TemplateResult {\n    const classes: ClassInfo = {\n      'title': true,\n      'with-title': this.hasTitle,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"title\">\n        <slot name=\"title\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n      </div>\n    `\n  }\n\n  protected renderBody(): TemplateResult {\n    return html` <div class=\"content\" part=\"body\"><slot></slot></div> `\n  }\n\n  protected renderButtons(): TemplateResult {\n    const classes: ClassInfo = {\n      'buttons': true,\n      'with-buttons': this.hasButton || !!this.confirmLabel || !!this.dismissLabel,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"button\">\n        <slot name=\"button\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n        ${this.#renderDismissButton()} ${this.#renderConfirmButton()}\n      </div>\n    `\n  }\n\n  #renderDismissButton(): TemplateResult | typeof nothing {\n    const { dismissLabel } = this\n    if (!dismissLabel) {\n      return nothing\n    }\n    return html`\n      <ui-button\n        color=\"text\"\n        value=\"dismiss\"\n        class=\"internal-button\"\n        @click=\"${this.handleDismiss}\"\n        part=\"negative-action\"\n        >${dismissLabel}</ui-button\n      >\n    `\n  }\n\n  #renderConfirmButton(): TemplateResult | typeof nothing {\n    const { confirmLabel, confirmValue = 'confirm', destructive } = this\n    if (!confirmLabel) {\n      return nothing\n    }\n    const type = this.confirmType ?? 'button'\n    const buttonClass = destructive ? 'internal-button destructive' : 'internal-button'\n    return html`\n      <ui-button\n        color=\"text\"\n        type=\"${type}\"\n        value=\"${confirmValue}\"\n        class=\"${buttonClass}\"\n        @click=\"${this.handleConfirm}\"\n        part=\"positive-action\"\n        >${confirmLabel}</ui-button\n      >\n    `\n  }\n}\n"]}

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.19",
+  "version": "0.5.21",
   "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