npm - @api-client/ui - Versions diffs - 0.5.2 → 0.5.4 - Mend

@api-client/ui 0.5.2 → 0.5.4

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 (34) hide show

package/build/src/elements/highlight/MarkdownStyles.d.ts.map +1 -1
package/build/src/elements/highlight/MarkdownStyles.js +7 -11
package/build/src/elements/highlight/MarkdownStyles.js.map +1 -1
package/build/src/md/dialog/internals/ConfirmDialog.d.ts +39 -0
package/build/src/md/dialog/internals/ConfirmDialog.d.ts.map +1 -0
package/build/src/md/dialog/internals/ConfirmDialog.js +75 -0
package/build/src/md/dialog/internals/ConfirmDialog.js.map +1 -0
package/build/src/md/dialog/internals/Dialog.d.ts +6 -0
package/build/src/md/dialog/internals/Dialog.d.ts.map +1 -1
package/build/src/md/dialog/internals/Dialog.js +43 -5
package/build/src/md/dialog/internals/Dialog.js.map +1 -1
package/build/src/md/dialog/internals/Dialog.styles.d.ts.map +1 -1
package/build/src/md/dialog/internals/Dialog.styles.js +39 -1
package/build/src/md/dialog/internals/Dialog.styles.js.map +1 -1
package/build/src/md/dialog/ui-confirm-dialog.d.ts +48 -0
package/build/src/md/dialog/ui-confirm-dialog.d.ts.map +1 -0
package/build/src/md/dialog/ui-confirm-dialog.js +64 -0
package/build/src/md/dialog/ui-confirm-dialog.js.map +1 -0
package/demo/md/dialog/confirm-dialog.html +49 -0
package/demo/md/dialog/confirm-dialog.ts +121 -0
package/demo/md/dialog/dialog.ts +76 -1
package/demo/md/index.html +2 -0
package/eslint.config.js +6 -6
package/package.json +7 -2
package/scripts/release.js +66 -0
package/src/elements/highlight/MarkdownStyles.ts +7 -11
package/src/md/dialog/README.md +212 -0
package/src/md/dialog/internals/ConfirmDialog.ts +79 -0
package/src/md/dialog/internals/Dialog.styles.ts +39 -1
package/src/md/dialog/internals/Dialog.ts +17 -4
package/src/md/dialog/ui-confirm-dialog.ts +52 -0
package/test/README.md +2 -0
package/test/md/dialog/UiConfirmDialog.test.ts +131 -0
package/test/md/dialog/UiDialog.test.ts +42 -0

package/build/src/elements/highlight/MarkdownStyles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownStyles.d.ts","sourceRoot":"","sources":["../../../../src/elements/highlight/MarkdownStyles.ts"],"names":[],"mappings":";AAkDA,~~wBAyXC~~"}
1	+ {"version":3,"file":"MarkdownStyles.d.ts","sourceRoot":"","sources":["../../../../src/elements/highlight/MarkdownStyles.ts"],"names":[],"mappings":";AAkDA,wBAqXC"}

package/build/src/elements/highlight/MarkdownStyles.js CHANGED Viewed

@@ -271,7 +271,7 @@ export default css `
   [slot='markdown-html'] code,
   [slot='markdown-html'] tt {
-    font-family: var(--markdown-styles-code-font-family, 'Roboto Mono, Consolas, Menlo, monospace');
+    font-family: var(--markdown-styles-code-font-family, Roboto Mono, Consolas, Menlo, monospace);
     padding: 0;
     padding-top: 0.2em;
     padding-bottom: 0.2em;
@@ -285,13 +285,13 @@ export default css `
   }
   /**
-* prism.js default theme for JavaScript, CSS and HTML
-* Based on dabblet (http://dabblet.com)
-* @author Lea Verou
-*/
+   * prism.js default theme for JavaScript, CSS and HTML
+   * Based on dabblet (http://dabblet.com)
+   * @author Lea Verou
+   */
   [slot='markdown-html'] code,
   [slot='markdown-html'] pre {
-    font-family: var(--markdown-styles-code-font-family, 'Roboto Mono, Consolas, Menlo, monospace');
+    font-family: var(--markdown-styles-code-font-family, Roboto Mono, Consolas, Menlo, monospace);
     color: var(--code-color, black);
     background-color: var(--code-background-color);
     text-shadow: var(--markdown-styles-code-text-shadow, 0 1px white);
@@ -313,11 +313,7 @@ export default css `
   [slot='markdown-html'] pre::-moz-selection,
   [slot='markdown-html'] pre ::-moz-selection,
   [slot='markdown-html'] code::-moz-selection,
-  [slot='markdown-html'] code ::-moz-selection {
-    text-shadow: none;
-    background: var(--markdown-styles-code-selection-background-color, #b3d4fc);
-  }
+  [slot='markdown-html'] code ::-moz-selection,
   [slot='markdown-html'] pre::selection,
   [slot='markdown-html'] pre ::selection,
   [slot='markdown-html'] code::selection,

package/build/src/elements/highlight/MarkdownStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkdownStyles.js","sourceRoot":"","sources":["../../../../src/elements/highlight/MarkdownStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;EAYE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyXjB,CAAA","sourcesContent":["/*\n@license\nCopyright 2016 The Advanced REST client authors <arc@mulesoft.com>\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not\nuse this file except in compliance with the License. You may obtain a copy of\nthe License at\nhttp://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\nWARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the\nLicense for the specific language governing permissions and limitations under\nthe License.\n/\n/*\n## Styles for markdown viewer\n\nIt should be included where the `marked-highlight` is used.\n\n## Usage example\n\n```javascript\nimport { LitElement, html, css } from 'lit';\nimport { MarkdownStyles } from '@api-client/ui';\n\nclass MarkdownImpl extends LitElement {\n static get styles() {\n return [\n css`\n :host {\n ...\n }\n `,\n MarkdownStyles,\n ]\n }\n\n render() {\n return html`\n <marked-highlight markdown=\"....\">\n <div class=\"markdown-html\"></div>\n </marked-highlight>`;\n }\n}\n```\n\nNote use of the `markdown-html` CSS rules. It is required by markdown element also all css rules\ndefined here are scoped to a container with this class name.\n/\nimport { css } from 'lit'\n\nexport default css`\n [slot='markdown-html'] {\n font-family: var(--md-sys-typescale-body-large-font);\n font-weight: var(--md-sys-typescale-body-large-weight);\n font-size: var(--md-sys-typescale-body-large-size);\n letter-spacing: var(--md-sys-typescale-body-large-tracking);\n line-height: var(--md-sys-typescale-body-large-height);\n }\n\n [slot='markdown-html'] h1,\n [slot='markdown-html'] h2,\n [slot='markdown-html'] h3,\n [slot='markdown-html'] h4,\n [slot='markdown-html'] h5,\n [slot='markdown-html'] h6 {\n color: inherit;\n }\n\n [slot='markdown-html'] h1 tt,\n [slot='markdown-html'] h1 code,\n [slot='markdown-html'] h2 tt,\n [slot='markdown-html'] h2 code,\n [slot='markdown-html'] h3 tt,\n [slot='markdown-html'] h3 code,\n [slot='markdown-html'] h4 tt,\n [slot='markdown-html'] h4 code,\n [slot='markdown-html'] h5 tt,\n [slot='markdown-html'] h5 code,\n [slot='markdown-html'] h6 tt,\n [slot='markdown-html'] h6 code {\n font-size: inherit;\n }\n\n [slot='markdown-html'] h1 {\n font-family: var(--md-sys-typescale-headline-large-font);\n font-weight: var(--md-sys-typescale-headline-large-weight);\n font-size: var(--md-sys-typescale-headline-large-size);\n letter-spacing: var(--md-sys-typescale-headline-large-tracking);\n line-height: var(--md-sys-typescale-headline-large-height);\n border-bottom: 1px solid var(--markdown-styles-title-border-bottom-color, #eee);\n padding-top: 1rem;\n padding-bottom: 0.5rem;\n }\n\n [slot='markdown-html'] h2 {\n font-family: var(--md-sys-typescale-headline-medium-font);\n font-weight: var(--md-sys-typescale-headline-medium-weight);\n font-size: var(--md-sys-typescale-headline-medium-size);\n letter-spacing: var(--md-sys-typescale-headline-medium-tracking);\n line-height: var(--md-sys-typescale-headline-medium-height);\n border-bottom: 1px solid var(--markdown-styles-title-border-bottom-color, #eee);\n }\n\n [slot='markdown-html'] h3 {\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 }\n\n [slot='markdown-html'] h4 {\n font-family: var(--md-sys-typescale-title-large-font);\n font-weight: var(--md-sys-typescale-title-large-weight);\n font-size: var(--md-sys-typescale-title-large-size);\n letter-spacing: var(--md-sys-typescale-title-large-tracking);\n line-height: var(--md-sys-typescale-title-large-height);\n }\n\n [slot='markdown-html'] h5 {\n font-family: var(--md-sys-typescale-title-medium-font);\n font-weight: var(--md-sys-typescale-title-medium-weight);\n font-size: var(--md-sys-typescale-title-medium-size);\n letter-spacing: var(--md-sys-typescale-title-medium-tracking);\n line-height: var(--md-sys-typescale-title-medium-height);\n }\n\n [slot='markdown-html'] h6 {\n font-family: var(--md-sys-typescale-title-small-font);\n font-weight: var(--md-sys-typescale-title-small-weight);\n font-size: var(--md-sys-typescale-title-small-size);\n letter-spacing: var(--md-sys-typescale-title-small-tracking);\n line-height: var(--md-sys-typescale-title-small-height);\n }\n\n [slot='markdown-html'] p,\n [slot='markdown-html'] blockquote,\n [slot='markdown-html'] ul,\n [slot='markdown-html'] ol,\n [slot='markdown-html'] dl,\n [slot='markdown-html'] table,\n [slot='markdown-html'] pre {\n font-family: var(--md-sys-typescale-body-large-font);\n font-weight: var(--md-sys-typescale-body-large-weight);\n font-size: var(--md-sys-typescale-body-large-size);\n letter-spacing: var(--md-sys-typescale-body-large-tracking);\n line-height: var(--md-sys-typescale-body-large-height);\n margin-top: 0;\n margin-bottom: 16px;\n }\n\n [slot='markdown-html'] a {\n color: var(--link-color);\n }\n\n [slot='markdown-html'] a:hover {\n color: var(--link-hover-color);\n }\n\n [slot='markdown-html'] > :last-child {\n margin-bottom: 0;\n }\n\n [slot='markdown-html'] hr {\n height: 4px;\n padding: 0;\n margin: 16px 0;\n background-color: var(--markdown-styles-hr-color, #e7e7e7);\n border: 0 none;\n }\n\n [slot='markdown-html'] ul,\n [slot='markdown-html'] ol {\n padding-left: 2em;\n }\n\n [slot='markdown-html'] ul.no-list,\n [slot='markdown-html'] ol.no-list {\n padding: 0;\n list-style-type: none;\n }\n\n [slot='markdown-html'] ul ul,\n [slot='markdown-html'] ul ol,\n [slot='markdown-html'] ol ol,\n [slot='markdown-html'] ol ul {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n [slot='markdown-html'] li > p {\n margin-top: 16px;\n }\n\n [slot='markdown-html'] dl {\n padding: 0;\n }\n\n [slot='markdown-html'] dl dt {\n padding: 0;\n margin-top: 16px;\n font-size: 1em;\n font-style: italic;\n font-weight: bold;\n }\n\n [slot='markdown-html'] dl dd {\n padding: 0 16px;\n margin-bottom: 16px;\n }\n\n [slot='markdown-html'] blockquote {\n padding: 0 15px;\n color: var(--markdown-styles-blockquote-color, #777);\n border-left: 4px solid var(--markdown-styles-blockquote-border-left-color, #ddd);\n }\n\n [slot='markdown-html'] blockquote > :first-child {\n margin-top: 0;\n }\n\n [slot='markdown-html'] blockquote > :last-child {\n margin-bottom: 0;\n }\n\n [slot='markdown-html'] table {\n font-family: var(--md-sys-typescale-body-large-font);\n font-weight: var(--md-sys-typescale-body-large-weight);\n font-size: var(--md-sys-typescale-body-large-size);\n letter-spacing: var(--md-sys-typescale-body-large-tracking);\n line-height: var(--md-sys-typescale-body-large-height);\n display: block;\n width: 100%;\n overflow: auto;\n word-break: normal;\n word-break: keep-all;\n border-collapse: collapse;\n }\n\n [slot='markdown-html'] table th {\n font-weight: bold;\n }\n\n [slot='markdown-html'] table th,\n [slot='markdown-html'] table td {\n padding: 6px 13px;\n border: 1px solid var(--markdown-styles-table-header-border-color, #ddd);\n }\n\n [slot='markdown-html'] table tr {\n background-color: var(--markdown-styles-table-row-background-color, #fff);\n border-top: 1px solid #ccc;\n }\n\n [slot='markdown-html'] table tr:nth-child(2n) {\n background-color: var(--markdown-styles-table-even-row-background-color, #f8f8f8);\n }\n\n [slot='markdown-html'] img {\n max-width: 100%;\n box-sizing: content-box;\n background-color: var(--markdown-styles-image-background-color, #fff);\n }\n\n [slot='markdown-html'] img[align='right'] {\n padding-left: 20px;\n }\n\n [slot='markdown-html'] img[align='left'] {\n padding-right: 20px;\n }\n\n [slot='markdown-html'] code,\n [slot='markdown-html'] tt {\n font-family: var(--markdown-styles-code-font-family, 'Roboto Mono, Consolas, Menlo, monospace');\n padding: 0;\n padding-top: 0.2em;\n padding-bottom: 0.2em;\n margin: 0;\n background-color: var(--markdown-styles-code-background-color, rgba(0, 0, 0, 0.04));\n border-radius: 2px;\n }\n\n [slot='markdown-html'] pre {\n word-wrap: normal;\n }\n\n /\n prism.js default theme for JavaScript, CSS and HTML\n* Based on dabblet (http://dabblet.com)\n* @author Lea Verou\n/\n [slot='markdown-html'] code,\n [slot='markdown-html'] pre {\n font-family: var(--markdown-styles-code-font-family, 'Roboto Mono, Consolas, Menlo, monospace');\n color: var(--code-color, black);\n background-color: var(--code-background-color);\n text-shadow: var(--markdown-styles-code-text-shadow, 0 1px white);\n text-align: left;\n word-break: break-all;\n white-space: pre-wrap;\n word-spacing: normal;\n line-height: 1.5;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n }\n\n [slot='markdown-html'] pre::-moz-selection,\n [slot='markdown-html'] pre ::-moz-selection,\n [slot='markdown-html'] code::-moz-selection,\n [slot='markdown-html'] code ::-moz-selection {\n text-shadow: none;\n background: var(--markdown-styles-code-selection-background-color, #b3d4fc);\n }\n\n [slot='markdown-html'] pre::selection,\n [slot='markdown-html'] pre ::selection,\n [slot='markdown-html'] code::selection,\n [slot='markdown-html'] code ::selection {\n text-shadow: none;\n background: var(--markdown-styles-code-selection-background-color, #b3d4fc);\n }\n\n @media print {\n [slot='markdown-html'] code,\n [slot='markdown-html'] pre {\n text-shadow: none;\n }\n }\n\n / Code blocks /\n [slot='markdown-html'] pre {\n padding: 1em;\n margin: 0.5em 0;\n overflow: auto;\n }\n\n [slot='markdown-html'] :not(pre) > code,\n [slot='markdown-html'] pre,\n pre[slot='markdown-html'] {\n background: var(--code-background-color, #f5f2f0);\n border: var(--inline-code-border, inherit);\n }\n\n / Inline code */\n [slot='markdown-html'] :not(pre) > code {\n padding: var(--inline-code-padding, 0.1em);\n border-radius: 0.3em;\n white-space: normal;\n }\n\n [slot='markdown-html'] .token.comment,\n [slot='markdown-html'] .token.prolog,\n [slot='markdown-html'] .token.doctype,\n [slot='markdown-html'] .token.cdata {\n color: var(--markdown-styles-code-cdata-color, slategray);\n }\n\n [slot='markdown-html'] .token.punctuation {\n color: var(--code-punctuation-value-color, #999);\n }\n\n [slot='markdown-html'] .namespace {\n opacity: 0.7;\n }\n\n [slot='markdown-html'] .token.property,\n [slot='markdown-html'] .token.tag,\n [slot='markdown-html'] .token.boolean,\n [slot='markdown-html'] .token.number,\n [slot='markdown-html'] .token.constant,\n [slot='markdown-html'] .token.symbol,\n [slot='markdown-html'] .token.deleted {\n color: var(--code-type-number-value-color, #905);\n }\n\n [slot='markdown-html'] .token.selector,\n [slot='markdown-html'] .token.attr-name,\n [slot='markdown-html'] .token.string,\n [slot='markdown-html'] .token.char,\n [slot='markdown-html'] .token.builtin,\n [slot='markdown-html'] .token.inserted {\n color: var(--code-type-text-value-color, #690);\n }\n\n [slot='markdown-html'] .token.operator,\n [slot='markdown-html'] .token.entity,\n [slot='markdown-html'] .token.url,\n [slot='markdown-html'] .language-css .token.string,\n [slot='markdown-html'] .style .token.string {\n color: var(--code-punctuation-value-color, #a67f59);\n background: hsla(0, 0%, 100%, 0.5);\n }\n\n [slot='markdown-html'] .token.atrule,\n [slot='markdown-html'] .token.attr-value,\n [slot='markdown-html'] .token.keyword {\n color: var(--markdown-styles-code-keyword-color, #07a);\n }\n\n [slot='markdown-html'] .token.function {\n color: var(--markdown-styles-code-function-color, #dd4a68);\n }\n\n [slot='markdown-html'] .token.regex,\n [slot='markdown-html'] .token.important,\n [slot='markdown-html'] .token.variable {\n color: var(--markdown-styles-variable-color, #e90);\n }\n\n [slot='markdown-html'] .token.important,\n [slot='markdown-html'] .token.bold {\n font-weight: bold;\n }\n [slot='markdown-html'] .token.italic {\n font-style: italic;\n }\n\n [slot='markdown-html'] .token.entity {\n cursor: help;\n }\n`\n"]}
1	+ {"version":3,"file":"MarkdownStyles.js","sourceRoot":"","sources":["../../../../src/elements/highlight/MarkdownStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;EAYE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqXjB,CAAA","sourcesContent":["/*\n@license\nCopyright 2016 The Advanced REST client authors <arc@mulesoft.com>\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not\nuse this file except in compliance with the License. You may obtain a copy of\nthe License at\nhttp://www.apache.org/licenses/LICENSE-2.0\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\nWARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the\nLicense for the specific language governing permissions and limitations under\nthe License.\n/\n/*\n## Styles for markdown viewer\n\nIt should be included where the `marked-highlight` is used.\n\n## Usage example\n\n```javascript\nimport { LitElement, html, css } from 'lit';\nimport { MarkdownStyles } from '@api-client/ui';\n\nclass MarkdownImpl extends LitElement {\n static get styles() {\n return [\n css`\n :host {\n ...\n }\n `,\n MarkdownStyles,\n ]\n }\n\n render() {\n return html`\n <marked-highlight markdown=\"....\">\n <div class=\"markdown-html\"></div>\n </marked-highlight>`;\n }\n}\n```\n\nNote use of the `markdown-html` CSS rules. It is required by markdown element also all css rules\ndefined here are scoped to a container with this class name.\n/\nimport { css } from 'lit'\n\nexport default css`\n [slot='markdown-html'] {\n font-family: var(--md-sys-typescale-body-large-font);\n font-weight: var(--md-sys-typescale-body-large-weight);\n font-size: var(--md-sys-typescale-body-large-size);\n letter-spacing: var(--md-sys-typescale-body-large-tracking);\n line-height: var(--md-sys-typescale-body-large-height);\n }\n\n [slot='markdown-html'] h1,\n [slot='markdown-html'] h2,\n [slot='markdown-html'] h3,\n [slot='markdown-html'] h4,\n [slot='markdown-html'] h5,\n [slot='markdown-html'] h6 {\n color: inherit;\n }\n\n [slot='markdown-html'] h1 tt,\n [slot='markdown-html'] h1 code,\n [slot='markdown-html'] h2 tt,\n [slot='markdown-html'] h2 code,\n [slot='markdown-html'] h3 tt,\n [slot='markdown-html'] h3 code,\n [slot='markdown-html'] h4 tt,\n [slot='markdown-html'] h4 code,\n [slot='markdown-html'] h5 tt,\n [slot='markdown-html'] h5 code,\n [slot='markdown-html'] h6 tt,\n [slot='markdown-html'] h6 code {\n font-size: inherit;\n }\n\n [slot='markdown-html'] h1 {\n font-family: var(--md-sys-typescale-headline-large-font);\n font-weight: var(--md-sys-typescale-headline-large-weight);\n font-size: var(--md-sys-typescale-headline-large-size);\n letter-spacing: var(--md-sys-typescale-headline-large-tracking);\n line-height: var(--md-sys-typescale-headline-large-height);\n border-bottom: 1px solid var(--markdown-styles-title-border-bottom-color, #eee);\n padding-top: 1rem;\n padding-bottom: 0.5rem;\n }\n\n [slot='markdown-html'] h2 {\n font-family: var(--md-sys-typescale-headline-medium-font);\n font-weight: var(--md-sys-typescale-headline-medium-weight);\n font-size: var(--md-sys-typescale-headline-medium-size);\n letter-spacing: var(--md-sys-typescale-headline-medium-tracking);\n line-height: var(--md-sys-typescale-headline-medium-height);\n border-bottom: 1px solid var(--markdown-styles-title-border-bottom-color, #eee);\n }\n\n [slot='markdown-html'] h3 {\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 }\n\n [slot='markdown-html'] h4 {\n font-family: var(--md-sys-typescale-title-large-font);\n font-weight: var(--md-sys-typescale-title-large-weight);\n font-size: var(--md-sys-typescale-title-large-size);\n letter-spacing: var(--md-sys-typescale-title-large-tracking);\n line-height: var(--md-sys-typescale-title-large-height);\n }\n\n [slot='markdown-html'] h5 {\n font-family: var(--md-sys-typescale-title-medium-font);\n font-weight: var(--md-sys-typescale-title-medium-weight);\n font-size: var(--md-sys-typescale-title-medium-size);\n letter-spacing: var(--md-sys-typescale-title-medium-tracking);\n line-height: var(--md-sys-typescale-title-medium-height);\n }\n\n [slot='markdown-html'] h6 {\n font-family: var(--md-sys-typescale-title-small-font);\n font-weight: var(--md-sys-typescale-title-small-weight);\n font-size: var(--md-sys-typescale-title-small-size);\n letter-spacing: var(--md-sys-typescale-title-small-tracking);\n line-height: var(--md-sys-typescale-title-small-height);\n }\n\n [slot='markdown-html'] p,\n [slot='markdown-html'] blockquote,\n [slot='markdown-html'] ul,\n [slot='markdown-html'] ol,\n [slot='markdown-html'] dl,\n [slot='markdown-html'] table,\n [slot='markdown-html'] pre {\n font-family: var(--md-sys-typescale-body-large-font);\n font-weight: var(--md-sys-typescale-body-large-weight);\n font-size: var(--md-sys-typescale-body-large-size);\n letter-spacing: var(--md-sys-typescale-body-large-tracking);\n line-height: var(--md-sys-typescale-body-large-height);\n margin-top: 0;\n margin-bottom: 16px;\n }\n\n [slot='markdown-html'] a {\n color: var(--link-color);\n }\n\n [slot='markdown-html'] a:hover {\n color: var(--link-hover-color);\n }\n\n [slot='markdown-html'] > :last-child {\n margin-bottom: 0;\n }\n\n [slot='markdown-html'] hr {\n height: 4px;\n padding: 0;\n margin: 16px 0;\n background-color: var(--markdown-styles-hr-color, #e7e7e7);\n border: 0 none;\n }\n\n [slot='markdown-html'] ul,\n [slot='markdown-html'] ol {\n padding-left: 2em;\n }\n\n [slot='markdown-html'] ul.no-list,\n [slot='markdown-html'] ol.no-list {\n padding: 0;\n list-style-type: none;\n }\n\n [slot='markdown-html'] ul ul,\n [slot='markdown-html'] ul ol,\n [slot='markdown-html'] ol ol,\n [slot='markdown-html'] ol ul {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n [slot='markdown-html'] li > p {\n margin-top: 16px;\n }\n\n [slot='markdown-html'] dl {\n padding: 0;\n }\n\n [slot='markdown-html'] dl dt {\n padding: 0;\n margin-top: 16px;\n font-size: 1em;\n font-style: italic;\n font-weight: bold;\n }\n\n [slot='markdown-html'] dl dd {\n padding: 0 16px;\n margin-bottom: 16px;\n }\n\n [slot='markdown-html'] blockquote {\n padding: 0 15px;\n color: var(--markdown-styles-blockquote-color, #777);\n border-left: 4px solid var(--markdown-styles-blockquote-border-left-color, #ddd);\n }\n\n [slot='markdown-html'] blockquote > :first-child {\n margin-top: 0;\n }\n\n [slot='markdown-html'] blockquote > :last-child {\n margin-bottom: 0;\n }\n\n [slot='markdown-html'] table {\n font-family: var(--md-sys-typescale-body-large-font);\n font-weight: var(--md-sys-typescale-body-large-weight);\n font-size: var(--md-sys-typescale-body-large-size);\n letter-spacing: var(--md-sys-typescale-body-large-tracking);\n line-height: var(--md-sys-typescale-body-large-height);\n display: block;\n width: 100%;\n overflow: auto;\n word-break: normal;\n word-break: keep-all;\n border-collapse: collapse;\n }\n\n [slot='markdown-html'] table th {\n font-weight: bold;\n }\n\n [slot='markdown-html'] table th,\n [slot='markdown-html'] table td {\n padding: 6px 13px;\n border: 1px solid var(--markdown-styles-table-header-border-color, #ddd);\n }\n\n [slot='markdown-html'] table tr {\n background-color: var(--markdown-styles-table-row-background-color, #fff);\n border-top: 1px solid #ccc;\n }\n\n [slot='markdown-html'] table tr:nth-child(2n) {\n background-color: var(--markdown-styles-table-even-row-background-color, #f8f8f8);\n }\n\n [slot='markdown-html'] img {\n max-width: 100%;\n box-sizing: content-box;\n background-color: var(--markdown-styles-image-background-color, #fff);\n }\n\n [slot='markdown-html'] img[align='right'] {\n padding-left: 20px;\n }\n\n [slot='markdown-html'] img[align='left'] {\n padding-right: 20px;\n }\n\n [slot='markdown-html'] code,\n [slot='markdown-html'] tt {\n font-family: var(--markdown-styles-code-font-family, Roboto Mono, Consolas, Menlo, monospace);\n padding: 0;\n padding-top: 0.2em;\n padding-bottom: 0.2em;\n margin: 0;\n background-color: var(--markdown-styles-code-background-color, rgba(0, 0, 0, 0.04));\n border-radius: 2px;\n }\n\n [slot='markdown-html'] pre {\n word-wrap: normal;\n }\n\n /\n prism.js default theme for JavaScript, CSS and HTML\n * Based on dabblet (http://dabblet.com)\n * @author Lea Verou\n /\n [slot='markdown-html'] code,\n [slot='markdown-html'] pre {\n font-family: var(--markdown-styles-code-font-family, Roboto Mono, Consolas, Menlo, monospace);\n color: var(--code-color, black);\n background-color: var(--code-background-color);\n text-shadow: var(--markdown-styles-code-text-shadow, 0 1px white);\n text-align: left;\n word-break: break-all;\n white-space: pre-wrap;\n word-spacing: normal;\n line-height: 1.5;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n }\n\n [slot='markdown-html'] pre::-moz-selection,\n [slot='markdown-html'] pre ::-moz-selection,\n [slot='markdown-html'] code::-moz-selection,\n [slot='markdown-html'] code ::-moz-selection,\n [slot='markdown-html'] pre::selection,\n [slot='markdown-html'] pre ::selection,\n [slot='markdown-html'] code::selection,\n [slot='markdown-html'] code ::selection {\n text-shadow: none;\n background: var(--markdown-styles-code-selection-background-color, #b3d4fc);\n }\n\n @media print {\n [slot='markdown-html'] code,\n [slot='markdown-html'] pre {\n text-shadow: none;\n }\n }\n\n / Code blocks /\n [slot='markdown-html'] pre {\n padding: 1em;\n margin: 0.5em 0;\n overflow: auto;\n }\n\n [slot='markdown-html'] :not(pre) > code,\n [slot='markdown-html'] pre,\n pre[slot='markdown-html'] {\n background: var(--code-background-color, #f5f2f0);\n border: var(--inline-code-border, inherit);\n }\n\n / Inline code */\n [slot='markdown-html'] :not(pre) > code {\n padding: var(--inline-code-padding, 0.1em);\n border-radius: 0.3em;\n white-space: normal;\n }\n\n [slot='markdown-html'] .token.comment,\n [slot='markdown-html'] .token.prolog,\n [slot='markdown-html'] .token.doctype,\n [slot='markdown-html'] .token.cdata {\n color: var(--markdown-styles-code-cdata-color, slategray);\n }\n\n [slot='markdown-html'] .token.punctuation {\n color: var(--code-punctuation-value-color, #999);\n }\n\n [slot='markdown-html'] .namespace {\n opacity: 0.7;\n }\n\n [slot='markdown-html'] .token.property,\n [slot='markdown-html'] .token.tag,\n [slot='markdown-html'] .token.boolean,\n [slot='markdown-html'] .token.number,\n [slot='markdown-html'] .token.constant,\n [slot='markdown-html'] .token.symbol,\n [slot='markdown-html'] .token.deleted {\n color: var(--code-type-number-value-color, #905);\n }\n\n [slot='markdown-html'] .token.selector,\n [slot='markdown-html'] .token.attr-name,\n [slot='markdown-html'] .token.string,\n [slot='markdown-html'] .token.char,\n [slot='markdown-html'] .token.builtin,\n [slot='markdown-html'] .token.inserted {\n color: var(--code-type-text-value-color, #690);\n }\n\n [slot='markdown-html'] .token.operator,\n [slot='markdown-html'] .token.entity,\n [slot='markdown-html'] .token.url,\n [slot='markdown-html'] .language-css .token.string,\n [slot='markdown-html'] .style .token.string {\n color: var(--code-punctuation-value-color, #a67f59);\n background: hsla(0, 0%, 100%, 0.5);\n }\n\n [slot='markdown-html'] .token.atrule,\n [slot='markdown-html'] .token.attr-value,\n [slot='markdown-html'] .token.keyword {\n color: var(--markdown-styles-code-keyword-color, #07a);\n }\n\n [slot='markdown-html'] .token.function {\n color: var(--markdown-styles-code-function-color, #dd4a68);\n }\n\n [slot='markdown-html'] .token.regex,\n [slot='markdown-html'] .token.important,\n [slot='markdown-html'] .token.variable {\n color: var(--markdown-styles-variable-color, #e90);\n }\n\n [slot='markdown-html'] .token.important,\n [slot='markdown-html'] .token.bold {\n font-weight: bold;\n }\n [slot='markdown-html'] .token.italic {\n font-style: italic;\n }\n\n [slot='markdown-html'] .token.entity {\n cursor: help;\n }\n`\n"]}

package/build/src/md/dialog/internals/ConfirmDialog.d.ts ADDED Viewed

@@ -0,0 +1,39 @@
+import { TemplateResult } from 'lit';
+import UiDialog from './Dialog.js';
+import '../../button/ui-button.js';
+/**
+ * A simple Material Design 3 styled confirm dialog for confirming user actions.
+ *
+ * This dialog provides a clean way to ask users to confirm or dismiss an action.
+ * It supports customizable button labels and content through slots.
+ *
+ * **Usage Example:**
+ * ```html
+ * <ui-confirm-dialog modal .open="${this.showConfirm}" @close="${this.handleConfirmClose}">
+ *   <span slot="title">Delete Item</span>
+ *   <p>Are you sure you want to delete this item? This action cannot be undone.</p>
+ * </ui-confirm-dialog>
+ * ```
+ *
+ * **Event Handling:**
+ * Listen for the `close` event to handle user interaction:
+ * ```javascript
+ * dialog.addEventListener('close', (e) => {
+ *   const { cancelled } = e.detail;
+ *   if (!cancelled) {
+ *     // User confirmed the action
+ *     performAction();
+ *   }
+ * });
+ * ```
+ *
+ * @slot title - The dialog title content
+ * @slot - The main body content of the dialog
+ * @fires close - Dispatched when the dialog is closed with closing reason details
+ */
+export default class ConfirmDialog extends UiDialog {
+    constructor();
+    protected renderContent(): TemplateResult[];
+    protected renderButtons(): TemplateResult;
+}
+//# sourceMappingURL=ConfirmDialog.d.ts.map

package/build/src/md/dialog/internals/ConfirmDialog.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/ConfirmDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAA;AAE1C,OAAO,QAAQ,MAAM,aAAa,CAAA;AAElC,OAAO,2BAA2B,CAAA;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,QAAQ;;cAS9B,aAAa,IAAI,cAAc,EAAE;cAIjC,aAAa,IAAI,cAAc;CA6BnD"}

package/build/src/md/dialog/internals/ConfirmDialog.js ADDED Viewed

@@ -0,0 +1,75 @@
+import { html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import UiDialog from './Dialog.js';
+import '../../button/ui-button.js';
+/**
+ * A simple Material Design 3 styled confirm dialog for confirming user actions.
+ *
+ * This dialog provides a clean way to ask users to confirm or dismiss an action.
+ * It supports customizable button labels and content through slots.
+ *
+ * **Usage Example:**
+ * ```html
+ * <ui-confirm-dialog modal .open="${this.showConfirm}" @close="${this.handleConfirmClose}">
+ *   <span slot="title">Delete Item</span>
+ *   <p>Are you sure you want to delete this item? This action cannot be undone.</p>
+ * </ui-confirm-dialog>
+ * ```
+ *
+ * **Event Handling:**
+ * Listen for the `close` event to handle user interaction:
+ * ```javascript
+ * dialog.addEventListener('close', (e) => {
+ *   const { cancelled } = e.detail;
+ *   if (!cancelled) {
+ *     // User confirmed the action
+ *     performAction();
+ *   }
+ * });
+ * ```
+ *
+ * @slot title - The dialog title content
+ * @slot - The main body content of the dialog
+ * @fires close - Dispatched when the dialog is closed with closing reason details
+ */
+export default class ConfirmDialog extends UiDialog {
+    constructor() {
+        super();
+        // Set modal by default for confirm dialogs
+        this.modal = true;
+        this.confirmLabel = 'Confirm';
+        this.dismissLabel = 'Cancel';
+    }
+    renderContent() {
+        return [this.renderTitle(), this.renderBody(), this.renderButtons()];
+    }
+    renderButtons() {
+        const classes = {
+            'buttons': true,
+            'with-buttons': true,
+        };
+        return html `
+      <div class="${classMap(classes)}" part="buttons">
+        <ui-button
+          color="text"
+          value="dismiss"
+          class="internal-button"
+          @click="${this.handleDismiss}"
+          part="dismiss-button"
+        >
+          ${this.dismissLabel}
+        </ui-button>
+        <ui-button
+          color="filled"
+          value="confirm"
+          class="internal-button ${this.destructive ? 'destructive' : ''}"
+          @click="${this.handleConfirm}"
+          part="confirm-button"
+        >
+          ${this.confirmLabel}
+        </ui-button>
+      </div>
+    `;
+    }
+}
+//# sourceMappingURL=ConfirmDialog.js.map

package/build/src/md/dialog/internals/ConfirmDialog.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/ConfirmDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,QAAQ,MAAM,aAAa,CAAA;AAElC,OAAO,2BAA2B,CAAA;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,QAAQ;IACjD;QACE,KAAK,EAAE,CAAA;QACP,2CAA2C;QAC3C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;QACjB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAA;QAC7B,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAA;IAC9B,CAAC;IAEkB,aAAa;QAC9B,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAA;IACtE,CAAC;IAEkB,aAAa;QAC9B,MAAM,OAAO,GAAc;YACzB,SAAS,EAAE,IAAI;YACf,cAAc,EAAE,IAAI;SACrB,CAAA;QAED,OAAO,IAAI,CAAA;oBACK,QAAQ,CAAC,OAAO,CAAC;;;;;oBAKjB,IAAI,CAAC,aAAa;;;YAG1B,IAAI,CAAC,YAAY;;;;;mCAKM,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;oBACpD,IAAI,CAAC,aAAa;;;YAG1B,IAAI,CAAC,YAAY;;;KAGxB,CAAA;IACH,CAAC;CACF","sourcesContent":["import { TemplateResult, html } from 'lit'\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport UiDialog from './Dialog.js'\n\nimport '../../button/ui-button.js'\n\n/**\n * A simple Material Design 3 styled confirm dialog for confirming user actions.\n *\n * This dialog provides a clean way to ask users to confirm or dismiss an action.\n * It supports customizable button labels and content through slots.\n *\n * **Usage Example:**\n * ```html\n * <ui-confirm-dialog modal .open=\"${this.showConfirm}\" @close=\"${this.handleConfirmClose}\">\n * <span slot=\"title\">Delete Item</span>\n * <p>Are you sure you want to delete this item? This action cannot be undone.</p>\n * </ui-confirm-dialog>\n * ```\n *\n * **Event Handling:**\n * Listen for the `close` event to handle user interaction:\n * ```javascript\n * dialog.addEventListener('close', (e) => {\n * const { cancelled } = e.detail;\n * if (!cancelled) {\n * // User confirmed the action\n * performAction();\n * }\n * });\n * ```\n *\n * @slot title - The dialog title content\n * @slot - The main body content of the dialog\n * @fires close - Dispatched when the dialog is closed with closing reason details\n */\nexport default class ConfirmDialog extends UiDialog {\n constructor() {\n super()\n // Set modal by default for confirm dialogs\n this.modal = true\n this.confirmLabel = 'Confirm'\n this.dismissLabel = 'Cancel'\n }\n\n protected override renderContent(): TemplateResult[] {\n return [this.renderTitle(), this.renderBody(), this.renderButtons()]\n }\n\n protected override renderButtons(): TemplateResult {\n const classes: ClassInfo = {\n 'buttons': true,\n 'with-buttons': true,\n }\n\n return html`\n <div class=\"${classMap(classes)}\" part=\"buttons\">\n <ui-button\n color=\"text\"\n value=\"dismiss\"\n class=\"internal-button\"\n @click=\"${this.handleDismiss}\"\n part=\"dismiss-button\"\n >\n ${this.dismissLabel}\n </ui-button>\n <ui-button\n color=\"filled\"\n value=\"confirm\"\n class=\"internal-button ${this.destructive ? 'destructive' : ''}\"\n @click=\"${this.handleConfirm}\"\n part=\"confirm-button\"\n >\n ${this.confirmLabel}\n </ui-button>\n </div>\n `\n }\n}\n"]}

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

@@ -100,6 +100,12 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
      * @attribute
      */
     accessor confirmLabel: string | undefined;
+    /**
+     * When true, styles the confirm button with error colors to indicate
+     * a destructive action (e.g., delete, remove, etc.).
+     * @attribute
+     */
+    accessor destructive: boolean;
     /**
      * Part of the imperative access to the element.
      * When set, it wraps the content in a `<form>` element.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAe,MAAM,KAAK,CAAA;AAGlH,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAG9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAGzD,OAAO,2BAA2B,CAAA;AAGlC,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,UAAU,cAAc;IACtB,KAAK,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAA;CAC1C;AAED,MAAM,MAAM,cAAc,GAAG,MAAM,cAAc,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,SAAU,YAAW,WAAW,CAAC,cAAc,CAAC;;IACpF,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAED;;;;;;OAMG;IAC0B,QAAQ,CAAC,KAAK,UAAQ;IAEnD;;;;OAIG;IAC0B,QAAQ,CAAC,IAAI,UAAQ;IAElD;;;;OAIG;IACyB,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAErE;;;;OAIG;IACyB,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAErE;;;;;;;;;;;;;;;;;OAiBG;IAC0B,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAA;IAElE;;;;;OAKG;IACyB,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IACrE;;;;;;;OAOG;IAC0B,QAAQ,CAAC,WAAW,EAAE,OAAO,GAAG,SAAS,CAAA;IAEtE;;OAEG;IACc,QAAQ,CAAC,MAAM,EAAG,iBAAiB,CAAA;IAE3C,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAElC,SAAS,CAAC,QAAQ,CAAC,QAAQ,UAAQ;IAEnC,SAAS,CAAC,QAAQ,CAAC,SAAS,UAAQ;IAEW,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAG,WAAW,EAAE,CAAA;IAE1C,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAG,WAAW,EAAE,CAAA;IAErC,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAG,WAAW,EAAE,CAAA;IAEpG;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAIrB;;OAEG;IACH,IAAI,MAAM,IAAI,MAAM,GAAG,SAAS,CAE/B;;IA4BD;;;;;OAKG;IACH,MAAM,CAAC,OAAO,CAAC,EAAE,cAAc,GAAG,cAAc,EAAE,MAAM,CAAC,EAAE,iBAAiB,EAAE,GAAG,IAAI;IAiB5E,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;cAQlB,YAAY,IAAI,IAAI;IAS9B,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQnD,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAMzB,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAkBhC,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;~~IAOrC~~,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA8B/D,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI;IAmB/D,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAQnC,SAAS,CAAC,aAAa,IAAI,IAAI;IAI/B,SAAS,CAAC,aAAa,IAAI,IAAI;IAsBtB,MAAM,IAAI,cAAc;~~IASjC~~,SAAS,CAAC,aAAa,IAAI,cAAc,EAAE,GAAG,cAAc;IAY5D,SAAS,CAAC,UAAU,IAAI,cAAc;~~IAYtC~~,SAAS,CAAC,WAAW,IAAI,cAAc;IAYvC,SAAS,CAAC,UAAU,IAAI,cAAc;IAStC,SAAS,CAAC,aAAa,IAAI,cAAc;~~CAgD1C~~"}
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 Viewed

@@ -24,6 +24,9 @@ let UiDialog = (() => {
     let _confirmLabel_decorators;
     let _confirmLabel_initializers = [];
     let _confirmLabel_extraInitializers = [];
+    let _destructive_decorators;
+    let _destructive_initializers = [];
+    let _destructive_extraInitializers = [];
     let _useForm_decorators;
     let _useForm_initializers = [];
     let _useForm_extraInitializers = [];
@@ -67,6 +70,7 @@ let UiDialog = (() => {
             _open_decorators = [property({ type: Boolean })];
             _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 })];
             _submitClose_decorators = [property({ type: Boolean })];
@@ -84,6 +88,7 @@ let UiDialog = (() => {
             __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
             __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, _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);
@@ -156,7 +161,34 @@ let UiDialog = (() => {
          */
         get confirmLabel() { return this.#confirmLabel_accessor_storage; }
         set confirmLabel(value) { this.#confirmLabel_accessor_storage = value; }
-        #useForm_accessor_storage = (__runInitializers(this, _confirmLabel_extraInitializers), __runInitializers(this, _useForm_initializers, void 0));
+        #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.
+         */
+        ));
+        /**
+         * When true, styles the confirm button with error colors to indicate
+         * a destructive action (e.g., delete, remove, etc.).
+         * @attribute
+         */
+        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.
@@ -331,6 +363,9 @@ let UiDialog = (() => {
         }
         handleKeyDown(e) {
             super.handleKeyDown(e);
+            if (e.defaultPrevented) {
+                return;
+            }
             if (e.key === 'Escape') {
                 this.handleInteraction('dismiss');
             }
@@ -412,9 +447,10 @@ let UiDialog = (() => {
             }
         }
         render() {
-            const { useForm } = this;
+            const { useForm, modal } = this;
+            const dialogClass = modal ? 'modal' : 'non-modal';
             return html `
-      <dialog @close="${this.handleDialogClose}" part="dialog">
+      <dialog @close="${this.handleDialogClose}" part="dialog" class="${dialogClass}">
         <div class="container">${useForm ? this.#renderFormContent() : this.renderContent()}</div>
       </dialog>
     `;
@@ -433,6 +469,7 @@ let UiDialog = (() => {
             const classes = {
                 'icon': true,
                 'with-icon': this.hasIcon,
+                'destructive': this.destructive,
             };
             return html `
       <div class="${classMap(classes)}" part="icon">
@@ -488,17 +525,18 @@ let UiDialog = (() => {
     `;
         }
         #renderConfirmButton() {
-            const { confirmLabel, confirmValue = 'confirm', useForm } = this;
+            const { confirmLabel, confirmValue = 'confirm', useForm, destructive } = this;
             if (!confirmLabel) {
                 return nothing;
             }
             const type = useForm ? 'submit' : 'button';
+            const buttonClass = destructive ? 'internal-button destructive' : 'internal-button';
             return html `
       <ui-button
         color="text"
         type="${type}"
         value="${confirmValue}"
-        class="internal-button"
+        class="${buttonClass}"
         @click="${this.handleConfirm}"
         part="positive-action"
         >${confirmLabel}</ui-button

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

	@@ -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'\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 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 @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.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"]}
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 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 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 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, 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"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":";AAEA,~~wBA0HC~~"}
1	+ {"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.styles.ts"],"names":[],"mappings":";AAEA,wBAgKC"}

package/build/src/md/dialog/internals/Dialog.styles.js CHANGED Viewed

@@ -27,6 +27,20 @@ export default css `
     flex-direction: column;
   }
+  /* Positioning for non-modal dialogs */
+  dialog.non-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin: 0;
+  }
+  dialog.non-modal:open {
+    /* Override the animation transform for non-modal dialogs to account for centering */
+    animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-non-modal-dialog;
+  }
   dialog:open::backdrop {
     animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-backdrop;
   }
@@ -34,7 +48,6 @@ export default css `
   .container {
     display: flex;
     flex-direction: column;
-    overflow: hidden;
     flex: 1;
   }
@@ -56,6 +69,11 @@ export default css `
     height: 24px;
   }
+  .icon.destructive ::slotted(*) {
+    color: var(--md-sys-color-error);
+    fill: var(--md-sys-color-error);
+  }
   .title {
     display: none;
     color: var(--md-sys-color-on-surface);
@@ -113,6 +131,15 @@ export default css `
     }
   }
+  @keyframes show-non-modal-dialog {
+    from {
+      transform: translate(-50%, -50%) translateY(-110%) scaleY(0);
+    }
+    to {
+      transform: translate(-50%, -50%) translateY(0%) scaleY(1);
+    }
+  }
   @keyframes show-backdrop {
     from {
       opacity: 0;
@@ -121,5 +148,16 @@ export default css `
       opacity: 1;
     }
   }
+  /* Destructive button styling for dangerous actions */
+  .internal-button.destructive {
+    --_background-color: var(--md-sys-color-error);
+    --_color: var(--md-sys-color-on-error);
+    /* Override ripple colors for better interaction feedback */
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-error);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-error);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-error);
+  }
 `;
 //# sourceMappingURL=Dialog.styles.js.map

package/build/src/md/dialog/internals/Dialog.styles.js.map CHANGED Viewed

	@@ -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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgKjB,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 / Positioning for non-modal dialogs /\n dialog.non-modal {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n margin: 0;\n }\n\n dialog.non-modal:open {\n / Override the animation transform for non-modal dialogs to account for centering /\n animation: 250ms cubic-bezier(0.2, 0, 0, 1) show-non-modal-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 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 .icon.destructive ::slotted() {\n color: var(--md-sys-color-error);\n fill: var(--md-sys-color-error);\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-non-modal-dialog {\n from {\n transform: translate(-50%, -50%) translateY(-110%) scaleY(0);\n }\n to {\n transform: translate(-50%, -50%) 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 /* Destructive button styling for dangerous actions /\n .internal-button.destructive {\n --_background-color: var(--md-sys-color-error);\n --_color: var(--md-sys-color-on-error);\n\n / Override ripple colors for better interaction feedback */\n --md-ripple-hover-state-layer-color: var(--md-sys-color-on-error);\n --md-ripple-focus-state-layer-color: var(--md-sys-color-on-error);\n --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-error);\n }\n`\n"]}