@api-client/ui 0.5.20 → 0.5.22

package/.github/instructions/lit-best-practices.instructions.md

@@ -74,6 +74,7 @@ You are an expert developer in web components using the Lit library and Material
   npm test -- --files=".tmp/test/**/[test file name].test.js"
   ```
 - Prefer the Assert API over the Expect API for assertions. The Assert API is more performant and provides better error messages.
+- When updating an element's property, await for the update to complete using `await element.updateComplete` before making assertions. This ensures that the component has fully rendered before checking its state.
 
 ## Component Demoing
 

package/build/src/md/button/ui-button-group.d.ts

@@ -8,4 +8,5 @@ declare global {
         'ui-button-group': UiButtonGroupElement;
     }
 }
+export type { MdGroupType } from './internals/group.js';
 //# sourceMappingURL=ui-button-group.d.ts.map

package/build/src/md/button/ui-button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-button-group.d.ts","sourceRoot":"","sources":["../../../../src/md/button/ui-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,sBAAsB,CAAA;AAG1C,qBACa,oBAAqB,SAAQ,OAAO;IAC/C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,oBAAoB,CAAA;KACxC;CACF"}
+{"version":3,"file":"ui-button-group.d.ts","sourceRoot":"","sources":["../../../../src/md/button/ui-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,sBAAsB,CAAA;AAG1C,qBACa,oBAAqB,SAAQ,OAAO;IAC/C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,oBAAoB,CAAA;KACxC;CACF;AAED,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA"}

package/build/src/md/button/ui-button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-button-group.js","sourceRoot":"","sources":["../../../../src/md/button/ui-button-group.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,sBAAsB,CAAA;AAC1C,OAAO,MAAM,MAAM,6BAA6B,CAAA;IAGnC,oBAAoB;4BADhC,aAAa,CAAC,iBAAiB,CAAC;;;;sBACS,OAAO;oCAAf,SAAQ,WAAO;;;;YAAjD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAoB;;;;;SAApB,oBAAoB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/group.js'\nimport styles from './internals/group.styles.js'\n\n@customElement('ui-button-group')\nexport class UiButtonGroupElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-button-group': UiButtonGroupElement\n  }\n}\n"]}
+{"version":3,"file":"ui-button-group.js","sourceRoot":"","sources":["../../../../src/md/button/ui-button-group.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,sBAAsB,CAAA;AAC1C,OAAO,MAAM,MAAM,6BAA6B,CAAA;IAGnC,oBAAoB;4BADhC,aAAa,CAAC,iBAAiB,CAAC;;;;sBACS,OAAO;oCAAf,SAAQ,WAAO;;;;YAAjD,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAoB;;;;;SAApB,oBAAoB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/group.js'\nimport styles from './internals/group.styles.js'\n\n@customElement('ui-button-group')\nexport class UiButtonGroupElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-button-group': UiButtonGroupElement\n  }\n}\n\nexport type { MdGroupType } from './internals/group.js'\n"]}

package/build/src/md/button/ui-button.d.ts

@@ -11,4 +11,6 @@ declare global {
         'ui-button': UiButtonElement;
     }
 }
+export type { MdButtonColor } from './internals/button.js';
+export type { ButtonType, MdButtonShape, MdButtonSize } from './internals/base.js';
 //# sourceMappingURL=ui-button.d.ts.map

package/build/src/md/button/ui-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-button.d.ts","sourceRoot":"","sources":["../../../../src/md/button/ui-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,uBAAuB,CAAA;AAG3C;;GAEG;AACH,qBACa,eAAgB,SAAQ,OAAO;IAC1C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,eAAe,CAAA;KAC7B;CACF"}
+{"version":3,"file":"ui-button.d.ts","sourceRoot":"","sources":["../../../../src/md/button/ui-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,uBAAuB,CAAA;AAG3C;;GAEG;AACH,qBACa,eAAgB,SAAQ,OAAO;IAC1C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,eAAe,CAAA;KAC7B;CACF;AAED,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAC1D,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA"}

package/build/src/md/button/ui-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-button.js","sourceRoot":"","sources":["../../../../src/md/button/ui-button.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,uBAAuB,CAAA;AAC3C,OAAO,MAAM,MAAM,8BAA8B,CAAA;AAEjD;;GAEG;IAEU,eAAe;4BAD3B,aAAa,CAAC,WAAW,CAAC;;;;sBACU,OAAO;+BAAf,SAAQ,WAAO;;;;YAA5C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAe;;;;;SAAf,eAAe","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/button.js'\nimport styles from './internals/button.styles.js'\n\n/**\n * @attribute {string} form\n */\n@customElement('ui-button')\nexport class UiButtonElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-button': UiButtonElement\n  }\n}\n"]}
+{"version":3,"file":"ui-button.js","sourceRoot":"","sources":["../../../../src/md/button/ui-button.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,uBAAuB,CAAA;AAC3C,OAAO,MAAM,MAAM,8BAA8B,CAAA;AAEjD;;GAEG;IAEU,eAAe;4BAD3B,aAAa,CAAC,WAAW,CAAC;;;;sBACU,OAAO;+BAAf,SAAQ,WAAO;;;;YAA5C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAe;;;;;SAAf,eAAe","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/button.js'\nimport styles from './internals/button.styles.js'\n\n/**\n * @attribute {string} form\n */\n@customElement('ui-button')\nexport class UiButtonElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-button': UiButtonElement\n  }\n}\n\nexport type { MdButtonColor } from './internals/button.js'\nexport type { ButtonType, MdButtonShape, MdButtonSize } from './internals/base.js'\n"]}

package/build/src/md/chip/ui-chip.d.ts

@@ -8,4 +8,5 @@ declare global {
         'ui-chip': UiChipElement;
     }
 }
+export { ChipType } from './internals/Chip.js';
 //# sourceMappingURL=ui-chip.d.ts.map

package/build/src/md/chip/ui-chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui-chip.d.ts","sourceRoot":"","sources":["../../../../src/md/chip/ui-chip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,qBAAqB,CAAA;AAGzC,qBACa,aAAc,SAAQ,OAAO;IACxC,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAA;KACzB;CACF"}
+{"version":3,"file":"ui-chip.d.ts","sourceRoot":"","sources":["../../../../src/md/chip/ui-chip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,qBAAqB,CAAA;AAGzC,qBACa,aAAc,SAAQ,OAAO;IACxC,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAA;KACzB;CACF;AAED,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA"}

package/build/src/md/chip/ui-chip.js

@@ -24,4 +24,5 @@ let UiChipElement = (() => {
     return UiChipElement = _classThis;
 })();
 export { UiChipElement };
+export { ChipType } from './internals/Chip.js';
 //# sourceMappingURL=ui-chip.js.map

package/build/src/md/chip/ui-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-chip.js","sourceRoot":"","sources":["../../../../src/md/chip/ui-chip.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,qBAAqB,CAAA;AACzC,OAAO,MAAM,MAAM,4BAA4B,CAAA;IAGlC,aAAa;4BADzB,aAAa,CAAC,SAAS,CAAC;;;;sBACU,OAAO;6BAAf,SAAQ,WAAO;;;;YAA1C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAa;;;;;SAAb,aAAa","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/Chip.js'\nimport styles from './internals/Chip.styles.js'\n\n@customElement('ui-chip')\nexport class UiChipElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-chip': UiChipElement\n  }\n}\n"]}
+{"version":3,"file":"ui-chip.js","sourceRoot":"","sources":["../../../../src/md/chip/ui-chip.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,qBAAqB,CAAA;AACzC,OAAO,MAAM,MAAM,4BAA4B,CAAA;IAGlC,aAAa;4BADzB,aAAa,CAAC,SAAS,CAAC;;;;sBACU,OAAO;6BAAf,SAAQ,WAAO;;;;YAA1C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAa;;;;;SAAb,aAAa;AAU1B,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/Chip.js'\nimport styles from './internals/Chip.styles.js'\n\n@customElement('ui-chip')\nexport class UiChipElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-chip': UiChipElement\n  }\n}\n\nexport { ChipType } from './internals/Chip.js'\n"]}

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

@@ -1,6 +1,7 @@
-import { type CSSResultOrNative, type PropertyValues, type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 import { UiElement } from '../../UiElement.js';
 import type { TypedEvents } from '../../../core/types.js';
+import type { ButtonType } from '../../button/internals/button.js';
 import '../../button/ui-button.js';
 export interface UiDialogClosingReason {
     /**
@@ -18,7 +19,6 @@ interface DialogEventMap {
     closing: CustomEvent<UiDialogClosingReason>;
     close: CustomEvent<UiDialogClosingReason>;
 }
-export type RenderFunction = () => TemplateResult;
 /**
  * Styled dialog using a native `<dialog>` element under the hood.
  * Note, since native dialog renders in the top layer it is not necessary
@@ -31,8 +31,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
@@ -109,25 +109,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
      * @attribute
      */
     accessor destructive: boolean;
-    /**
-     * 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.
-     */
-    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.
@@ -135,6 +116,14 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
      * @attribute
      */
     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
+     */
+    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.
@@ -142,6 +131,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
      */
     accessor submitClose: boolean | undefined;
     /**
@@ -159,22 +149,9 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
      * This is passed to the close event.
      */
     dialogValue?: unknown;
-    /**
-     * @deprecated Use `useForm` instead.
-     */
-    get formId(): string | undefined;
     constructor();
-    /**
-     * 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;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected firstUpdated(): void;
-    willUpdate(cp: PropertyValues<this>): void;
     protected handleFormSubmit(): void;
     handleClick(e: MouseEvent): void;
     handleKeyDown(e: KeyboardEvent): void;

package/build/src/md/dialog/internals/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"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"}

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