@api-client/ui 0.4.4 → 0.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/build/src/md/dialog/internals/Dialog.d.ts.map +1 -1
  2. package/build/src/md/dialog/internals/Dialog.js +10 -4
  3. package/build/src/md/dialog/internals/Dialog.js.map +1 -1
  4. package/build/src/md/dialog/internals/Dialog.styles.d.ts.map +1 -1
  5. package/build/src/md/dialog/internals/Dialog.styles.js +6 -2
  6. package/build/src/md/dialog/internals/Dialog.styles.js.map +1 -1
  7. package/demo/md/dialog/dialog.ts +132 -1
  8. package/package.json +1 -1
  9. package/src/md/dialog/internals/Dialog.styles.ts +6 -2
  10. package/src/md/dialog/internals/Dialog.ts +10 -4
package/build/src/md/dialog/internals/Dialog.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"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"}
1
+ {"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 CHANGED
@@ -356,7 +356,7 @@ let UiDialog = (() => {
356
356
  render() {
357
357
  const { useForm } = this;
358
358
  return html `
359
- <dialog @close="${this.handleDialogClose}">
359
+ <dialog @close="${this.handleDialogClose}" part="dialog">
360
360
  <div class="container">${useForm ? this.#renderFormContent() : this.renderContent()}</div>
361
361
  </dialog>
362
362
  `;
@@ -366,7 +366,7 @@ let UiDialog = (() => {
366
366
  }
367
367
  #renderFormContent() {
368
368
  return html `
369
- <form id="${ifDefined(this.formId)}" method="dialog" @submit="${this.#handleSubmit}">
369
+ <form id="${ifDefined(this.formId)}" method="dialog" @submit="${this.#handleSubmit}" part="form">
370
370
  ${this.renderContent()}
371
371
  </form>
372
372
  `;
@@ -399,7 +399,7 @@ let UiDialog = (() => {
399
399
  content = content();
400
400
  }
401
401
  const injected = content || nothing;
402
- return html ` <div class="content"><slot></slot>${injected}</div> `;
402
+ return html ` <div class="content" part="body"><slot></slot>${injected}</div> `;
403
403
  }
404
404
  renderButtons() {
405
405
  const classes = {
@@ -419,7 +419,12 @@ let UiDialog = (() => {
419
419
  return nothing;
420
420
  }
421
421
  return html `
422
- <ui-button color="text" value="dismiss" class="internal-button" @click="${this.handleDismiss}"
422
+ <ui-button
423
+ color="text"
424
+ value="dismiss"
425
+ class="internal-button"
426
+ @click="${this.handleDismiss}"
427
+ part="negative-action"
423
428
  >${dismissLabel}</ui-button
424
429
  >
425
430
  `;
@@ -437,6 +442,7 @@ let UiDialog = (() => {
437
442
  value="${confirmValue}"
438
443
  class="internal-button"
439
444
  @click="${this.handleConfirm}"
445
+ part="positive-action"
440
446
  >${confirmLabel}</ui-button
441
447
  >
442
448
  `;
package/build/src/md/dialog/internals/Dialog.js.map CHANGED
@@ -1 +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'\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 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 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 * 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 @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 /**\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 get formId(): string | undefined {\n return this.#formId\n }\n\n @state() accessor #inject: TemplateResult | RenderFunction | undefined\n\n #pendingStyles?: CSSResultOrNative[]\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 */\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 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 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 e.preventDefault()\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.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 this.open = false\n const detail: UiDialogClosingReason = {\n cancelled: value === 'dismiss',\n }\n if (this.dialogValue !== undefined) {\n detail.value = this.dialogValue\n }\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 this.open = false\n this.handleInteraction('dismiss')\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 } = this\n return html`\n <dialog @close=\"${this.handleDialogClose}\">\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}\">\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 }\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\"><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 color=\"text\" value=\"dismiss\" class=\"internal-button\" @click=\"${this.handleDismiss}\"\n >${dismissLabel}</ui-button\n >\n `\n }\n\n #renderConfirmButton(): TemplateResult | typeof nothing {\n const { confirmLabel, confirmValue = 'confirm', useForm } = this\n if (!confirmLabel) {\n return nothing\n }\n const type = useForm ? 'submit' : 'button'\n return html`\n <ui-button\n color=\"text\"\n type=\"${type}\"\n value=\"${confirmValue}\"\n class=\"internal-button\"\n @click=\"${this.handleConfirm}\"\n >${confirmLabel}</ui-button\n >\n `\n }\n}\n"]}
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'\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 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 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 * 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 @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 /**\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 get formId(): string | undefined {\n return this.#formId\n }\n\n @state() accessor #inject: TemplateResult | RenderFunction | undefined\n\n #pendingStyles?: CSSResultOrNative[]\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 */\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 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 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 e.preventDefault()\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.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 this.open = false\n const detail: UiDialogClosingReason = {\n cancelled: value === 'dismiss',\n }\n if (this.dialogValue !== undefined) {\n detail.value = this.dialogValue\n }\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 this.open = false\n this.handleInteraction('dismiss')\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 } = this\n return html`\n <dialog @close=\"${this.handleDialogClose}\" part=\"dialog\">\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 }\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 } = this\n if (!confirmLabel) {\n return nothing\n }\n const type = useForm ? 'submit' : 'button'\n return html`\n <ui-button\n color=\"text\"\n type=\"${type}\"\n value=\"${confirmValue}\"\n class=\"internal-button\"\n @click=\"${this.handleConfirm}\"\n part=\"positive-action\"\n >${confirmLabel}</ui-button\n >\n `\n }\n}\n"]}
package/build/src/md/dialog/internals/Dialog.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":";AAEA,wBAsHC"}
1
+ {"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":";AAEA,wBA0HC"}
package/build/src/md/dialog/internals/Dialog.styles.js CHANGED
@@ -15,14 +15,16 @@ export default css `
15
15
  color: var(--md-sys-color-on-surface-variant);
16
16
  padding: 24px;
17
17
 
18
- max-width: var(--ui-dialog-max-width, revert);
19
- max-height: var(--ui-dialog-max-height, revert);
18
+ max-width: var(--ui-dialog-max-width, 90vw);
19
+ max-height: var(--ui-dialog-max-height, 90vh);
20
20
  width: var(--ui-dialog-width, revert);
21
21
  height: var(--ui-dialog-height, revert);
22
22
  }
23
23
 
24
24
  dialog:open {
25
25
  animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;
26
+ display: flex;
27
+ flex-direction: column;
26
28
  }
27
29
 
28
30
  dialog:open::backdrop {
@@ -32,6 +34,8 @@ export default css `
32
34
  .container {
33
35
  display: flex;
34
36
  flex-direction: column;
37
+ overflow: hidden;
38
+ flex: 1;
35
39
  }
36
40
 
37
41
  .icon {
package/build/src/md/dialog/internals/Dialog.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsHjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: contents;\n }\n\n dialog {\n overflow: hidden;\n /* Do not override the display value here. It will render the dialog even when hidden */\n\n border: none;\n border-radius: var(--md-sys-shape-corner-extra-large);\n background-color: var(--md-sys-color-surface-container-high);\n box-shadow: var(--md-sys-elevation-3);\n color: var(--md-sys-color-on-surface-variant);\n padding: 24px;\n\n max-width: var(--ui-dialog-max-width, revert);\n max-height: var(--ui-dialog-max-height, revert);\n width: var(--ui-dialog-width, revert);\n height: var(--ui-dialog-height, revert);\n }\n\n dialog:open {\n animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;\n }\n\n dialog:open::backdrop {\n animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;\n }\n\n .container {\n display: flex;\n flex-direction: column;\n }\n\n .icon {\n display: none;\n }\n\n .icon.with-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n }\n\n .icon ::slotted(*) {\n color: var(--md-sys-color-secondary);\n fill: var(--md-sys-color-secondary);\n width: 24px;\n height: 24px;\n }\n\n .title {\n display: none;\n color: var(--md-sys-color-on-surface);\n font-family: var(--md-sys-typescale-headline-small-font);\n font-weight: var(--md-sys-typescale-headline-small-weight);\n font-size: var(--md-sys-typescale-headline-small-size);\n letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n line-height: var(--md-sys-typescale-headline-small-height);\n margin: 0;\n padding: 0;\n text-align: center;\n }\n\n .title.with-title {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n }\n\n .content {\n overflow: auto;\n font-family: var(--md-sys-typescale-body-medium-font);\n font-weight: var(--md-sys-typescale-body-medium-weight);\n font-size: var(--md-sys-typescale-body-medium-size);\n letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n line-height: var(--md-sys-typescale-body-medium-height);\n }\n\n .buttons {\n display: none;\n display: flex;\n align-items: center;\n justify-content: end;\n }\n\n .buttons.with-buttons {\n margin-top: 24px;\n }\n\n .buttons ::slotted(:not(:last-child)) {\n margin-right: 12px;\n }\n\n .content ::slotted(*) {\n background-color: var(--md-sys-color-surface-container-high);\n }\n\n @keyframes show-dialog {\n from {\n transform: translateY(-110%) scaleY(0);\n }\n to {\n transform: translateY(0%) scaleY(1);\n }\n }\n\n @keyframes show-backdrop {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n`\n"]}
1
+ {"version":3,"file":"Dialog.styles.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: contents;\n }\n\n dialog {\n overflow: hidden;\n /* Do not override the display value here. It will render the dialog even when hidden */\n\n border: none;\n border-radius: var(--md-sys-shape-corner-extra-large);\n background-color: var(--md-sys-color-surface-container-high);\n box-shadow: var(--md-sys-elevation-3);\n color: var(--md-sys-color-on-surface-variant);\n padding: 24px;\n\n max-width: var(--ui-dialog-max-width, 90vw);\n max-height: var(--ui-dialog-max-height, 90vh);\n width: var(--ui-dialog-width, revert);\n height: var(--ui-dialog-height, revert);\n }\n\n dialog:open {\n animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;\n display: flex;\n flex-direction: column;\n }\n\n dialog:open::backdrop {\n animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;\n }\n\n .container {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n flex: 1;\n }\n\n .icon {\n display: none;\n }\n\n .icon.with-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n }\n\n .icon ::slotted(*) {\n color: var(--md-sys-color-secondary);\n fill: var(--md-sys-color-secondary);\n width: 24px;\n height: 24px;\n }\n\n .title {\n display: none;\n color: var(--md-sys-color-on-surface);\n font-family: var(--md-sys-typescale-headline-small-font);\n font-weight: var(--md-sys-typescale-headline-small-weight);\n font-size: var(--md-sys-typescale-headline-small-size);\n letter-spacing: var(--md-sys-typescale-headline-small-tracking);\n line-height: var(--md-sys-typescale-headline-small-height);\n margin: 0;\n padding: 0;\n text-align: center;\n }\n\n .title.with-title {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 16px;\n }\n\n .content {\n overflow: auto;\n font-family: var(--md-sys-typescale-body-medium-font);\n font-weight: var(--md-sys-typescale-body-medium-weight);\n font-size: var(--md-sys-typescale-body-medium-size);\n letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n line-height: var(--md-sys-typescale-body-medium-height);\n }\n\n .buttons {\n display: none;\n display: flex;\n align-items: center;\n justify-content: end;\n }\n\n .buttons.with-buttons {\n margin-top: 24px;\n }\n\n .buttons ::slotted(:not(:last-child)) {\n margin-right: 12px;\n }\n\n .content ::slotted(*) {\n background-color: var(--md-sys-color-surface-container-high);\n }\n\n @keyframes show-dialog {\n from {\n transform: translateY(-110%) scaleY(0);\n }\n to {\n transform: translateY(0%) scaleY(1);\n }\n }\n\n @keyframes show-backdrop {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n`\n"]}
package/demo/md/dialog/dialog.ts CHANGED
@@ -16,6 +16,8 @@ class ComponentDemoPage extends DemoPage {
16
16
 
17
17
  @reactive() accessor fullOpened = false
18
18
 
19
+ @reactive() accessor overflowOpened = false
20
+
19
21
  protected openSimple(): void {
20
22
  this.simpleOpened = true
21
23
  }
@@ -34,6 +36,15 @@ class ComponentDemoPage extends DemoPage {
34
36
  this.reportClosingReason(e.detail)
35
37
  }
36
38
 
39
+ protected openOverflow(): void {
40
+ this.overflowOpened = true
41
+ }
42
+
43
+ protected overflowClosed(e: CustomEvent<UiDialogClosingReason>): void {
44
+ this.overflowOpened = false
45
+ this.reportClosingReason(e.detail)
46
+ }
47
+
37
48
  imperativeDialog: UiDialog | null = null
38
49
 
39
50
  protected openImperative(): void {
@@ -70,7 +81,7 @@ class ComponentDemoPage extends DemoPage {
70
81
  contentTemplate(): TemplateResult {
71
82
  return html`
72
83
  <a href="../">Back</a>
73
- ${this.simpleDialog()} ${this.fullDialog()} ${this.renderImperativeDialog()}
84
+ ${this.simpleDialog()} ${this.fullDialog()} ${this.overflowDialog()} ${this.renderImperativeDialog()}
74
85
  `
75
86
  }
76
87
 
@@ -113,6 +124,126 @@ class ComponentDemoPage extends DemoPage {
113
124
  `
114
125
  }
115
126
 
127
+ overflowDialog(): TemplateResult {
128
+ return html`
129
+ <section class="demo-section">
130
+ <h2 class="title-large">Overflow dialog</h2>
131
+ <p>This dialog contains a lot of content that will overflow the container.</p>
132
+ <ui-button color="filled" @click="${this.openOverflow}">Open</ui-button>
133
+ <ui-dialog
134
+ ?open="${this.overflowOpened}"
135
+ @close="${this.overflowClosed}"
136
+ modal
137
+ style="--ui-dialog-max-width: 400px; --ui-dialog-max-height: 500px;"
138
+ >
139
+ <ui-icon slot="icon" icon="info"></ui-icon>
140
+ <span slot="title">Terms and Conditions</span>
141
+ <div style="overflow-y: auto; max-height: 300px;">
142
+ <h3>1. Introduction</h3>
143
+ <p>
144
+ Welcome to our application. These terms and conditions outline the rules and regulations for the use of
145
+ our software.
146
+ </p>
147
+
148
+ <h3>2. User Agreement</h3>
149
+ <p>
150
+ By accessing this application, we assume you accept these terms and conditions. Do not continue to use our
151
+ application if you do not agree to take all of the terms and conditions stated on this page.
152
+ </p>
153
+
154
+ <h3>3. Privacy Policy</h3>
155
+ <p>
156
+ Your privacy is important to us. Our Privacy Policy explains how we collect, use, and protect your
157
+ information when you use our service. By using our service, you agree to the collection and use of
158
+ information in accordance with our Privacy Policy.
159
+ </p>
160
+
161
+ <h3>4. Data Collection</h3>
162
+ <p>
163
+ We collect several different types of information for various purposes to provide and improve our service
164
+ to you. This includes:
165
+ </p>
166
+ <ul>
167
+ <li>
168
+ Personal Data: While using our service, we may ask you to provide us with certain personally
169
+ identifiable information.
170
+ </li>
171
+ <li>Usage Data: We may also collect information on how the service is accessed and used.</li>
172
+ <li>Tracking & Cookies Data: We use cookies and similar tracking technologies to track activity.</li>
173
+ </ul>
174
+
175
+ <h3>5. User Responsibilities</h3>
176
+ <p>
177
+ Users are responsible for maintaining the confidentiality of their account information and for all
178
+ activities that occur under their account. You agree to:
179
+ </p>
180
+ <ul>
181
+ <li>Provide accurate and complete information</li>
182
+ <li>Maintain the security of your password</li>
183
+ <li>Notify us immediately of any unauthorized use</li>
184
+ <li>Use the service in compliance with applicable laws</li>
185
+ </ul>
186
+
187
+ <h3>6. Prohibited Uses</h3>
188
+ <p>You may not use our service:</p>
189
+ <ul>
190
+ <li>For any unlawful purpose or to solicit others to perform acts</li>
191
+ <li>
192
+ To violate any international, federal, provincial, or state regulations, rules, laws, or local
193
+ ordinances
194
+ </li>
195
+ <li>
196
+ To infringe upon or violate our intellectual property rights or the intellectual property rights of
197
+ others
198
+ </li>
199
+ <li>To harass, abuse, insult, harm, defame, slander, disparage, intimidate, or discriminate</li>
200
+ <li>To submit false or misleading information</li>
201
+ </ul>
202
+
203
+ <h3>7. Intellectual Property</h3>
204
+ <p>
205
+ The service and its original content, features, and functionality are and will remain the exclusive
206
+ property of our company and its licensors. The service is protected by copyright, trademark, and other
207
+ laws.
208
+ </p>
209
+
210
+ <h3>8. Termination</h3>
211
+ <p>
212
+ We may terminate or suspend your account and bar access to the service immediately, without prior notice
213
+ or liability, under our sole discretion, for any reason whatsoever and without limitation.
214
+ </p>
215
+
216
+ <h3>9. Disclaimer</h3>
217
+ <p>
218
+ The information on this application is provided on an "as is" basis. To the fullest extent permitted by
219
+ law, this company excludes all representations, warranties, conditions and terms.
220
+ </p>
221
+
222
+ <h3>10. Limitation of Liability</h3>
223
+ <p>
224
+ In no event shall our company, nor its directors, employees, partners, agents, suppliers, or affiliates,
225
+ be liable for any indirect, incidental, special, consequential, or punitive damages.
226
+ </p>
227
+
228
+ <h3>11. Changes to Terms</h3>
229
+ <p>
230
+ We reserve the right, at our sole discretion, to modify or replace these terms at any time. If a revision
231
+ is material, we will provide at least 30 days notice prior to any new terms taking effect.
232
+ </p>
233
+
234
+ <h3>12. Contact Information</h3>
235
+ <p>
236
+ If you have any questions about these Terms and Conditions, please contact us at support@example.com or
237
+ through our contact form.
238
+ </p>
239
+ </div>
240
+ <ui-button color="text" slot="button" value="dismiss">Decline</ui-button>
241
+ <ui-button color="filled" slot="button" value="confirm">Accept</ui-button>
242
+ </ui-dialog>
243
+ </section>
244
+ `
245
+ }
246
+
116
247
  renderImperativeDialog(): TemplateResult {
117
248
  return html`
118
249
  <section class="demo-section">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@api-client/ui",
3
- "version": "0.4.4",
3
+ "version": "0.4.5",
4
4
  "description": "Internal UI component library for the API Client ecosystem.",
5
5
  "license": "UNLICENSED",
6
6
  "main": "build/src/index.js",
package/src/md/dialog/internals/Dialog.styles.ts CHANGED
@@ -16,14 +16,16 @@ export default css`
16
16
  color: var(--md-sys-color-on-surface-variant);
17
17
  padding: 24px;
18
18
 
19
- max-width: var(--ui-dialog-max-width, revert);
20
- max-height: var(--ui-dialog-max-height, revert);
19
+ max-width: var(--ui-dialog-max-width, 90vw);
20
+ max-height: var(--ui-dialog-max-height, 90vh);
21
21
  width: var(--ui-dialog-width, revert);
22
22
  height: var(--ui-dialog-height, revert);
23
23
  }
24
24
 
25
25
  dialog:open {
26
26
  animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-dialog;
27
+ display: flex;
28
+ flex-direction: column;
27
29
  }
28
30
 
29
31
  dialog:open::backdrop {
@@ -33,6 +35,8 @@ export default css`
33
35
  .container {
34
36
  display: flex;
35
37
  flex-direction: column;
38
+ overflow: hidden;
39
+ flex: 1;
36
40
  }
37
41
 
38
42
  .icon {
package/src/md/dialog/internals/Dialog.ts CHANGED
@@ -338,7 +338,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
338
338
  override render(): TemplateResult {
339
339
  const { useForm } = this
340
340
  return html`
341
- <dialog @close="${this.handleDialogClose}">
341
+ <dialog @close="${this.handleDialogClose}" part="dialog">
342
342
  <div class="container">${useForm ? this.#renderFormContent() : this.renderContent()}</div>
343
343
  </dialog>
344
344
  `
@@ -350,7 +350,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
350
350
 
351
351
  #renderFormContent(): TemplateResult {
352
352
  return html`
353
- <form id="${ifDefined(this.formId)}" method="dialog" @submit="${this.#handleSubmit}">
353
+ <form id="${ifDefined(this.formId)}" method="dialog" @submit="${this.#handleSubmit}" part="form">
354
354
  ${this.renderContent()}
355
355
  </form>
356
356
  `
@@ -386,7 +386,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
386
386
  content = content()
387
387
  }
388
388
  const injected = content || nothing
389
- return html` <div class="content"><slot></slot>${injected}</div> `
389
+ return html` <div class="content" part="body"><slot></slot>${injected}</div> `
390
390
  }
391
391
 
392
392
  protected renderButtons(): TemplateResult {
@@ -408,7 +408,12 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
408
408
  return nothing
409
409
  }
410
410
  return html`
411
- <ui-button color="text" value="dismiss" class="internal-button" @click="${this.handleDismiss}"
411
+ <ui-button
412
+ color="text"
413
+ value="dismiss"
414
+ class="internal-button"
415
+ @click="${this.handleDismiss}"
416
+ part="negative-action"
412
417
  >${dismissLabel}</ui-button
413
418
  >
414
419
  `
@@ -427,6 +432,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
427
432
  value="${confirmValue}"
428
433
  class="internal-button"
429
434
  @click="${this.handleConfirm}"
435
+ part="positive-action"
430
436
  >${confirmLabel}</ui-button
431
437
  >
432
438
  `