@spectrum-web-components/alert-dialog 1.7.0 → 1.8.0
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.
- package/README.md +90 -43
- package/package.json +7 -7
- package/sp-alert-dialog.d.ts +11 -0
- package/sp-alert-dialog.dev.js.map +1 -1
- package/sp-alert-dialog.js.map +1 -1
- package/src/AlertDialog.d.ts +14 -0
- package/src/AlertDialog.dev.js +3 -0
- package/src/AlertDialog.dev.js.map +2 -2
- package/src/AlertDialog.js +1 -1
- package/src/AlertDialog.js.map +2 -2
- package/src/alert-dialog-overrides.css.dev.js.map +1 -1
- package/src/alert-dialog-overrides.css.js.map +1 -1
- package/src/alert-dialog.css.dev.js.map +1 -1
- package/src/alert-dialog.css.js.map +1 -1
- package/src/index.d.ts +11 -0
- package/src/index.dev.js.map +1 -1
- package/src/index.js.map +1 -1
- package/src/spectrum-alert-dialog.css.dev.js.map +1 -1
- package/src/spectrum-alert-dialog.css.js.map +1 -1
package/README.md
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
[](https://www.npmjs.com/package/@spectrum-web-components/alert-dialog)
|
|
8
8
|
[](https://bundlephobia.com/result?p=@spectrum-web-components/alert-dialog)
|
|
9
|
+
[](https://stackblitz.com/edit/vitejs-vite-1dvcjyvh)
|
|
9
10
|
|
|
10
11
|
```bash
|
|
11
12
|
yarn add @spectrum-web-components/alert-dialog
|
|
@@ -27,9 +28,9 @@ import { AlertDialog } from '@spectrum-web-components/alert-dialog';
|
|
|
27
28
|
|
|
28
29
|
The alert dialog consists of several key parts:
|
|
29
30
|
|
|
30
|
-
-
|
|
31
|
-
-
|
|
32
|
-
-
|
|
31
|
+
- **Title:** All alert dialogs must have a title, using `slot="heading"`, that uses a few words to convey the outcome of what will happen if a user continues with an action
|
|
32
|
+
- **Content:** Alert dialogs can include a description using the default slot. A description briefly communicates any additional information or context that a user needs to know to continue with an action
|
|
33
|
+
- Action buttons, using `slot="button"`, that allow users to respond
|
|
33
34
|
|
|
34
35
|
```html
|
|
35
36
|
<sp-alert-dialog
|
|
@@ -63,12 +64,12 @@ The alert dialog consists of several key parts:
|
|
|
63
64
|
|
|
64
65
|
Use `slot="button"` to render your action button(s) that allow users to respond
|
|
65
66
|
|
|
66
|
-
-
|
|
67
|
-
-
|
|
68
|
-
-
|
|
69
|
-
-
|
|
70
|
-
-
|
|
71
|
-
-
|
|
67
|
+
- An alert dialog must have one primary action button (with `variant="primary"`) with the option to include a secondary action and/or a cancel action.
|
|
68
|
+
- Non-primary action buttons should be `variant="secondary"` and `treatment="outline"`.
|
|
69
|
+
- The three buttons should be rendered in the DOM in the following order:
|
|
70
|
+
- **Cancel action:** Offers an option to go back and cancel the action.
|
|
71
|
+
- **Secondary action:** Offers a secondary action. e.g. "Remind me later"
|
|
72
|
+
- **Primary action:** The first (right-most) button communicates what the button will do if selected, or to acknowledge and dismiss the dialog. Check [variants](#variants) for the correct primary button styling. See also the [Alert Dialog design options](https://spectrum.adobe.com/page/alert-dialog/#Options).
|
|
72
73
|
|
|
73
74
|
```html
|
|
74
75
|
<sp-alert-dialog
|
|
@@ -296,57 +297,103 @@ Destructive alert dialogs are for when a user needs to confirm an action that wi
|
|
|
296
297
|
|
|
297
298
|
#### Context
|
|
298
299
|
|
|
299
|
-
An alert dialog should be placed inside a modal
|
|
300
|
+
An alert dialog should be placed inside a modal [overlay](../overlay/) or a [dialog base](../dialog-base/):
|
|
301
|
+
|
|
302
|
+
<sp-tabs selected="modal" auto label="Alert dialogs in context">
|
|
303
|
+
<sp-tab value="modal">Modal overlay</sp-tab>
|
|
304
|
+
<sp-tab-panel value="modal">
|
|
300
305
|
|
|
301
306
|
```html
|
|
302
307
|
<sp-button id="trigger">open modal</sp-button>
|
|
303
|
-
<sp-overlay trigger="trigger@click" type="modal">
|
|
304
|
-
<sp-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
<h2 id="modal-heading" slot="heading">Important Notice</h2>
|
|
311
|
-
<p id="modal-message">This action requires your confirmation.</p>
|
|
312
|
-
<sp-button
|
|
313
|
-
slot="button"
|
|
314
|
-
variant="secondary"
|
|
315
|
-
treatment="outline"
|
|
316
|
-
onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
|
|
317
|
-
>
|
|
318
|
-
Cancel
|
|
319
|
-
</sp-button>
|
|
320
|
-
<sp-button
|
|
321
|
-
slot="button"
|
|
322
|
-
variant="accent"
|
|
323
|
-
treatment="fill"
|
|
324
|
-
onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
|
|
308
|
+
<sp-overlay trigger="trigger@click" type="modal" placement="bottom">
|
|
309
|
+
<sp-popover>
|
|
310
|
+
<sp-alert-dialog
|
|
311
|
+
role="alertdialog"
|
|
312
|
+
aria-labelledby="modal-heading"
|
|
313
|
+
aria-describedby="modal-message"
|
|
314
|
+
variant="confirmation"
|
|
325
315
|
>
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
316
|
+
<h2 id="modal-heading" slot="heading">Important Notice</h2>
|
|
317
|
+
<p id="modal-message">This action requires your confirmation.</p>
|
|
318
|
+
<sp-button
|
|
319
|
+
slot="button"
|
|
320
|
+
variant="secondary"
|
|
321
|
+
treatment="outline"
|
|
322
|
+
onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
|
|
323
|
+
>
|
|
324
|
+
Cancel
|
|
325
|
+
</sp-button>
|
|
326
|
+
<sp-button
|
|
327
|
+
slot="button"
|
|
328
|
+
variant="accent"
|
|
329
|
+
treatment="fill"
|
|
330
|
+
onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
|
|
331
|
+
>
|
|
332
|
+
Confirm
|
|
333
|
+
</sp-button>
|
|
334
|
+
</sp-alert-dialog>
|
|
335
|
+
</sp-popover>
|
|
329
336
|
</sp-overlay>
|
|
330
337
|
```
|
|
331
338
|
|
|
339
|
+
</sp-tab-panel>
|
|
340
|
+
<sp-tab value="dialog">Dialog base</sp-tab>
|
|
341
|
+
<sp-tab-panel value="dialog">
|
|
342
|
+
|
|
343
|
+
```html
|
|
344
|
+
<overlay-trigger type="modal">
|
|
345
|
+
<sp-dialog-base underlay slot="click-content">
|
|
346
|
+
<sp-alert-dialog
|
|
347
|
+
role="alertdialog"
|
|
348
|
+
aria-labelledby="modal-heading"
|
|
349
|
+
aria-describedby="modal-message"
|
|
350
|
+
variant="confirmation"
|
|
351
|
+
>
|
|
352
|
+
<h2 id="modal-heading" slot="heading">Important Notice</h2>
|
|
353
|
+
<p id="modal-message">This action requires your confirmation.</p>
|
|
354
|
+
<sp-button
|
|
355
|
+
slot="button"
|
|
356
|
+
variant="secondary"
|
|
357
|
+
treatment="outline"
|
|
358
|
+
onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
|
|
359
|
+
>
|
|
360
|
+
Cancel
|
|
361
|
+
</sp-button>
|
|
362
|
+
<sp-button
|
|
363
|
+
slot="button"
|
|
364
|
+
variant="accent"
|
|
365
|
+
treatment="fill"
|
|
366
|
+
onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
|
|
367
|
+
>
|
|
368
|
+
Confirm
|
|
369
|
+
</sp-button>
|
|
370
|
+
</sp-alert-dialog>
|
|
371
|
+
</sp-dialog-base>
|
|
372
|
+
<sp-button slot="trigger" variant="primary">Toggle Dialog</sp-button>
|
|
373
|
+
</overlay-trigger>
|
|
374
|
+
```
|
|
375
|
+
|
|
376
|
+
</sp-tab-panel>
|
|
377
|
+
</sp-tabs>
|
|
378
|
+
|
|
332
379
|
### Accessibility
|
|
333
380
|
|
|
334
381
|
#### `<sp-alert-banner>` Element
|
|
335
382
|
|
|
336
|
-
-
|
|
337
|
-
-
|
|
338
|
-
-
|
|
383
|
+
- Use `role="alertdialog"` on the alert dialog
|
|
384
|
+
- Make sure the alert dialog has an `aria-labelledby` attribute that references the title's `id`.
|
|
385
|
+
- Make sure the alert dialog has an `aria-describedby` attribute that references the content's `id`.
|
|
339
386
|
|
|
340
387
|
#### Title
|
|
341
388
|
|
|
342
|
-
-
|
|
343
|
-
-
|
|
344
|
-
-
|
|
389
|
+
- Consider the appropriate variant based on the message's importance and urgency
|
|
390
|
+
- Use concise, meaningful dialog title that clearly states the purpose
|
|
391
|
+
- Use semantic heading elements (`<h2>`) for the dialog title
|
|
345
392
|
|
|
346
393
|
#### Content
|
|
347
394
|
|
|
348
|
-
-
|
|
395
|
+
- Provide clear, concise content that explains the situation and required actions
|
|
349
396
|
|
|
350
397
|
####Buttons
|
|
351
398
|
|
|
352
|
-
-
|
|
399
|
+
- Ensure button labels clearly indicate the action they will perform
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/alert-dialog",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -65,12 +65,12 @@
|
|
|
65
65
|
],
|
|
66
66
|
"dependencies": {
|
|
67
67
|
"@lit-labs/observers": "^2.0.2",
|
|
68
|
-
"@spectrum-web-components/base": "1.
|
|
69
|
-
"@spectrum-web-components/button": "1.
|
|
70
|
-
"@spectrum-web-components/button-group": "1.
|
|
71
|
-
"@spectrum-web-components/divider": "1.
|
|
72
|
-
"@spectrum-web-components/icons-workflow": "1.
|
|
73
|
-
"@spectrum-web-components/shared": "1.
|
|
68
|
+
"@spectrum-web-components/base": "1.8.0",
|
|
69
|
+
"@spectrum-web-components/button": "1.8.0",
|
|
70
|
+
"@spectrum-web-components/button-group": "1.8.0",
|
|
71
|
+
"@spectrum-web-components/divider": "1.8.0",
|
|
72
|
+
"@spectrum-web-components/icons-workflow": "1.8.0",
|
|
73
|
+
"@spectrum-web-components/shared": "1.8.0"
|
|
74
74
|
},
|
|
75
75
|
"types": "./src/index.d.ts",
|
|
76
76
|
"customElements": "custom-elements.json",
|
package/sp-alert-dialog.d.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { AlertDialog } from './src/AlertDialog.js';
|
|
2
13
|
declare global {
|
|
3
14
|
interface HTMLElementTagNameMap {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-alert-dialog.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { AlertDialog } from './src/AlertDialog.dev.js'\n\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\ndefineElement('sp-alert-dialog', AlertDialog);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-alert-dialog': AlertDialog;\n }\n}\n"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,mBAAmB;AAE5B,SAAS,qBAAqB;AAC9B,cAAc,mBAAmB,WAAW;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/sp-alert-dialog.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["sp-alert-dialog.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { AlertDialog } from './src/AlertDialog.js';\n\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\ndefineElement('sp-alert-dialog', AlertDialog);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-alert-dialog': AlertDialog;\n }\n}\n"],
|
|
5
5
|
"mappings": "aAWA,OAAS,eAAAA,MAAmB,uBAE5B,OAAS,iBAAAC,MAAqB,sDAC9BA,EAAc,kBAAmBD,CAAW",
|
|
6
6
|
"names": ["AlertDialog", "defineElement"]
|
|
7
7
|
}
|
package/src/AlertDialog.d.ts
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
13
|
import '@spectrum-web-components/button/sp-button.js';
|
|
14
|
+
import '@spectrum-web-components/button-group/sp-button-group.js';
|
|
15
|
+
import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
|
|
16
|
+
import '@spectrum-web-components/divider/sp-divider.js';
|
|
3
17
|
export type AlertDialogVariants = 'confirmation' | 'information' | 'warning' | 'error' | 'destructive' | 'secondary' | '';
|
|
4
18
|
export declare const alertDialogVariants: AlertDialogVariants[];
|
|
5
19
|
declare const AlertDialog_base: typeof SpectrumElement;
|
package/src/AlertDialog.dev.js
CHANGED
|
@@ -18,6 +18,9 @@ import {
|
|
|
18
18
|
query
|
|
19
19
|
} from "@spectrum-web-components/base/src/decorators.js";
|
|
20
20
|
import "@spectrum-web-components/button/sp-button.js";
|
|
21
|
+
import "@spectrum-web-components/button-group/sp-button-group.js";
|
|
22
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
|
|
23
|
+
import "@spectrum-web-components/divider/sp-divider.js";
|
|
21
24
|
import { FocusVisiblePolyfillMixin } from "@spectrum-web-components/shared/src/focus-visible.js";
|
|
22
25
|
import { randomID } from "@spectrum-web-components/shared/src/random-id.js";
|
|
23
26
|
import { conditionAttributeWithId } from "@spectrum-web-components/base/src/condition-attribute-with-id.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["AlertDialog.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {\n CSSResultArray,\n html,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/button-group/sp-button-group.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/divider/sp-divider.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\nimport { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport alertStyles from './alert-dialog.css.js';\n\nexport type AlertDialogVariants =\n | 'confirmation'\n | 'information'\n | 'warning'\n | 'error'\n | 'destructive'\n | 'secondary'\n | '';\n\nexport const alertDialogVariants: AlertDialogVariants[] = [\n 'confirmation',\n 'information',\n 'warning',\n 'error',\n 'destructive',\n 'secondary',\n];\n\nfunction gatherAppliedIdsFromSlottedChildren(\n slot: HTMLSlotElement,\n idBase: string\n): string[] {\n const assignedElements = slot.assignedElements();\n const ids: string[] = [];\n assignedElements.forEach((el) => {\n if (el.id) {\n ids.push(el.id);\n } else {\n const id = idBase + `-${randomID()}`;\n el.id = id;\n ids.push(id);\n }\n });\n return ids;\n}\nexport class AlertDialog extends FocusVisiblePolyfillMixin(SpectrumElement) {\n public static override get styles(): CSSResultArray {\n return [alertStyles];\n }\n\n @query('.content')\n private contentElement!: HTMLDivElement;\n\n private resizeController = new ResizeController(this, {\n callback: () => {\n this.shouldManageTabOrderForScrolling();\n },\n });\n\n public _variant: AlertDialogVariants = '';\n\n @property({ type: String, reflect: true })\n public set variant(variant: AlertDialogVariants) {\n if (variant === this.variant) {\n return;\n }\n const oldValue = this.variant;\n if (alertDialogVariants.includes(variant)) {\n this.setAttribute('variant', variant);\n this._variant = variant;\n } else {\n this.removeAttribute('variant');\n this._variant = '';\n }\n this.requestUpdate('variant', oldValue);\n }\n\n public get variant(): AlertDialogVariants {\n return this._variant;\n }\n\n protected renderIcon(): TemplateResult {\n switch (this.variant) {\n case 'warning':\n case 'error':\n return html`\n <sp-icon-alert class=\"icon\"></sp-icon-alert>\n `;\n\n default:\n return html``;\n }\n }\n\n protected renderHeading(): TemplateResult {\n return html`\n <slot name=\"heading\" @slotchange=${this.onHeadingSlotchange}></slot>\n `;\n }\n\n protected renderContent(): TemplateResult {\n return html`\n <div class=\"content\">\n <slot @slotchange=${this.onContentSlotChange}></slot>\n </div>\n `;\n }\n\n static instanceCount = 0;\n private labelledbyId = `sp-dialog-label-${AlertDialog.instanceCount++}`;\n private conditionLabelledby?: () => void;\n private conditionDescribedby?: () => void;\n\n private onHeadingSlotchange({\n target,\n }: Event & { target: HTMLSlotElement }): void {\n if (this.conditionLabelledby) {\n this.conditionLabelledby();\n delete this.conditionLabelledby;\n }\n const ids = gatherAppliedIdsFromSlottedChildren(\n target,\n this.labelledbyId\n );\n if (ids.length) {\n this.conditionLabelledby = conditionAttributeWithId(\n this,\n 'aria-labelledby',\n ids\n );\n }\n }\n\n public shouldManageTabOrderForScrolling = (): void => {\n if (!this.contentElement) return;\n\n const { offsetHeight, scrollHeight } = this.contentElement;\n if (offsetHeight < scrollHeight) {\n this.contentElement.tabIndex = 0;\n } else {\n this.contentElement.removeAttribute('tabindex');\n }\n };\n\n private describedbyId = `sp-dialog-description-${AlertDialog.instanceCount++}`;\n\n protected onContentSlotChange({\n target,\n }: Event & { target: HTMLSlotElement }): void {\n requestAnimationFrame(() => {\n // Can happen more than once. Take this.contentElement out\n // of the observer before adding it again.\n this.resizeController.unobserve(this.contentElement);\n this.resizeController.observe(this.contentElement);\n });\n if (this.conditionDescribedby) {\n this.conditionDescribedby();\n delete this.conditionDescribedby;\n }\n const ids = gatherAppliedIdsFromSlottedChildren(\n target,\n this.describedbyId\n );\n if (ids.length && ids.length < 4) {\n this.conditionDescribedby = conditionAttributeWithId(\n this,\n 'aria-describedby',\n ids\n );\n } else if (!ids.length) {\n const idProvided = !!this.id;\n if (!idProvided) this.id = this.describedbyId;\n const conditionDescribedby = conditionAttributeWithId(\n this,\n 'aria-describedby',\n this.id\n );\n this.conditionDescribedby = () => {\n conditionDescribedby();\n if (!idProvided) {\n this.removeAttribute('id');\n }\n };\n }\n }\n\n protected renderButtons(): TemplateResult {\n return html`\n <sp-button-group class=\"button-group\">\n <slot name=\"button\"></slot>\n </sp-button-group>\n `;\n }\n\n protected override render(): TemplateResult {\n return html`\n <div class=\"grid\">\n <div class=\"header\">\n ${this.renderHeading()} ${this.renderIcon()}\n </div>\n <sp-divider size=\"m\" class=\"divider\"></sp-divider>\n ${this.renderContent()} ${this.renderButtons()}\n </div>\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/AlertDialog.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var b=Object.defineProperty;var
|
|
1
|
+
"use strict";var b=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=(a,r,e,t)=>{for(var i=t>1?void 0:t?p(r,e):r,n=a.length-1,d;n>=0;n--)(d=a[n])&&(i=(t?d(r,e,i):d(i))||i);return t&&i&&b(r,e,i),i};import{html as s,SpectrumElement as u}from"@spectrum-web-components/base";import{property as m,query as g}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/button/sp-button.js";import"@spectrum-web-components/button-group/sp-button-group.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import"@spectrum-web-components/divider/sp-divider.js";import{FocusVisiblePolyfillMixin as v}from"@spectrum-web-components/shared/src/focus-visible.js";import{randomID as y}from"@spectrum-web-components/shared/src/random-id.js";import{conditionAttributeWithId as c}from"@spectrum-web-components/base/src/condition-attribute-with-id.js";import{ResizeController as f}from"@lit-labs/observers/resize-controller.js";import E from"./alert-dialog.css.js";export const alertDialogVariants=["confirmation","information","warning","error","destructive","secondary"];function h(a,r){const e=a.assignedElements(),t=[];return e.forEach(i=>{if(i.id)t.push(i.id);else{const n=r+`-${y()}`;i.id=n,t.push(n)}}),t}const o=class o extends v(u){constructor(){super(...arguments);this.resizeController=new f(this,{callback:()=>{this.shouldManageTabOrderForScrolling()}});this._variant="";this.labelledbyId=`sp-dialog-label-${o.instanceCount++}`;this.shouldManageTabOrderForScrolling=()=>{if(!this.contentElement)return;const{offsetHeight:e,scrollHeight:t}=this.contentElement;e<t?this.contentElement.tabIndex=0:this.contentElement.removeAttribute("tabindex")};this.describedbyId=`sp-dialog-description-${o.instanceCount++}`}static get styles(){return[E]}set variant(e){if(e===this.variant)return;const t=this.variant;alertDialogVariants.includes(e)?(this.setAttribute("variant",e),this._variant=e):(this.removeAttribute("variant"),this._variant=""),this.requestUpdate("variant",t)}get variant(){return this._variant}renderIcon(){switch(this.variant){case"warning":case"error":return s`
|
|
2
2
|
<sp-icon-alert class="icon"></sp-icon-alert>
|
|
3
3
|
`;default:return s``}}renderHeading(){return s`
|
|
4
4
|
<slot name="heading" @slotchange=${this.onHeadingSlotchange}></slot>
|
package/src/AlertDialog.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["AlertDialog.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {\n CSSResultArray,\n html,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/button-group/sp-button-group.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/divider/sp-divider.js';\nimport { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';\nimport { randomID } from '@spectrum-web-components/shared/src/random-id.js';\nimport { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';\nimport { ResizeController } from '@lit-labs/observers/resize-controller.js';\nimport alertStyles from './alert-dialog.css.js';\n\nexport type AlertDialogVariants =\n | 'confirmation'\n | 'information'\n | 'warning'\n | 'error'\n | 'destructive'\n | 'secondary'\n | '';\n\nexport const alertDialogVariants: AlertDialogVariants[] = [\n 'confirmation',\n 'information',\n 'warning',\n 'error',\n 'destructive',\n 'secondary',\n];\n\nfunction gatherAppliedIdsFromSlottedChildren(\n slot: HTMLSlotElement,\n idBase: string\n): string[] {\n const assignedElements = slot.assignedElements();\n const ids: string[] = [];\n assignedElements.forEach((el) => {\n if (el.id) {\n ids.push(el.id);\n } else {\n const id = idBase + `-${randomID()}`;\n el.id = id;\n ids.push(id);\n }\n });\n return ids;\n}\nexport class AlertDialog extends FocusVisiblePolyfillMixin(SpectrumElement) {\n public static override get styles(): CSSResultArray {\n return [alertStyles];\n }\n\n @query('.content')\n private contentElement!: HTMLDivElement;\n\n private resizeController = new ResizeController(this, {\n callback: () => {\n this.shouldManageTabOrderForScrolling();\n },\n });\n\n public _variant: AlertDialogVariants = '';\n\n @property({ type: String, reflect: true })\n public set variant(variant: AlertDialogVariants) {\n if (variant === this.variant) {\n return;\n }\n const oldValue = this.variant;\n if (alertDialogVariants.includes(variant)) {\n this.setAttribute('variant', variant);\n this._variant = variant;\n } else {\n this.removeAttribute('variant');\n this._variant = '';\n }\n this.requestUpdate('variant', oldValue);\n }\n\n public get variant(): AlertDialogVariants {\n return this._variant;\n }\n\n protected renderIcon(): TemplateResult {\n switch (this.variant) {\n case 'warning':\n case 'error':\n return html`\n <sp-icon-alert class=\"icon\"></sp-icon-alert>\n `;\n\n default:\n return html``;\n }\n }\n\n protected renderHeading(): TemplateResult {\n return html`\n <slot name=\"heading\" @slotchange=${this.onHeadingSlotchange}></slot>\n `;\n }\n\n protected renderContent(): TemplateResult {\n return html`\n <div class=\"content\">\n <slot @slotchange=${this.onContentSlotChange}></slot>\n </div>\n `;\n }\n\n static instanceCount = 0;\n private labelledbyId = `sp-dialog-label-${AlertDialog.instanceCount++}`;\n private conditionLabelledby?: () => void;\n private conditionDescribedby?: () => void;\n\n private onHeadingSlotchange({\n target,\n }: Event & { target: HTMLSlotElement }): void {\n if (this.conditionLabelledby) {\n this.conditionLabelledby();\n delete this.conditionLabelledby;\n }\n const ids = gatherAppliedIdsFromSlottedChildren(\n target,\n this.labelledbyId\n );\n if (ids.length) {\n this.conditionLabelledby = conditionAttributeWithId(\n this,\n 'aria-labelledby',\n ids\n );\n }\n }\n\n public shouldManageTabOrderForScrolling = (): void => {\n if (!this.contentElement) return;\n\n const { offsetHeight, scrollHeight } = this.contentElement;\n if (offsetHeight < scrollHeight) {\n this.contentElement.tabIndex = 0;\n } else {\n this.contentElement.removeAttribute('tabindex');\n }\n };\n\n private describedbyId = `sp-dialog-description-${AlertDialog.instanceCount++}`;\n\n protected onContentSlotChange({\n target,\n }: Event & { target: HTMLSlotElement }): void {\n requestAnimationFrame(() => {\n // Can happen more than once. Take this.contentElement out\n // of the observer before adding it again.\n this.resizeController.unobserve(this.contentElement);\n this.resizeController.observe(this.contentElement);\n });\n if (this.conditionDescribedby) {\n this.conditionDescribedby();\n delete this.conditionDescribedby;\n }\n const ids = gatherAppliedIdsFromSlottedChildren(\n target,\n this.describedbyId\n );\n if (ids.length && ids.length < 4) {\n this.conditionDescribedby = conditionAttributeWithId(\n this,\n 'aria-describedby',\n ids\n );\n } else if (!ids.length) {\n const idProvided = !!this.id;\n if (!idProvided) this.id = this.describedbyId;\n const conditionDescribedby = conditionAttributeWithId(\n this,\n 'aria-describedby',\n this.id\n );\n this.conditionDescribedby = () => {\n conditionDescribedby();\n if (!idProvided) {\n this.removeAttribute('id');\n }\n };\n }\n }\n\n protected renderButtons(): TemplateResult {\n return html`\n <sp-button-group class=\"button-group\">\n <slot name=\"button\"></slot>\n </sp-button-group>\n `;\n }\n\n protected override render(): TemplateResult {\n return html`\n <div class=\"grid\">\n <div class=\"header\">\n ${this.renderHeading()} ${this.renderIcon()}\n </div>\n <sp-divider size=\"m\" class=\"divider\"></sp-divider>\n ${this.renderContent()} ${this.renderButtons()}\n </div>\n `;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["html", "SpectrumElement", "property", "query", "FocusVisiblePolyfillMixin", "randomID", "conditionAttributeWithId", "ResizeController", "alertStyles", "gatherAppliedIdsFromSlottedChildren", "slot", "idBase", "assignedElements", "ids", "el", "id", "_AlertDialog", "offsetHeight", "scrollHeight", "variant", "oldValue", "target", "idProvided", "conditionDescribedby", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["alert-dialog-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n \n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["alert-dialog-overrides.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n \n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["alert-dialog.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-alert-dialog-min-width:var(--spectrum-alert-dialog-minimum-width);--spectrum-alert-dialog-max-width:var(--spectrum-alert-dialog-maximum-width);--spectrum-alert-dialog-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-alert-dialog-warning-icon-color:var(--spectrum-notice-visual-color);--spectrum-alert-dialog-error-icon-color:var(--spectrum-negative-visual-color);--spectrum-alert-dialog-title-font-family:var(--spectrum-sans-font-family-stack);--spectrum-alert-dialog-title-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-alert-dialog-title-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-alert-dialog-title-font-size:var(--spectrum-alert-dialog-title-size);--spectrum-alert-dialog-title-line-height:var(--spectrum-heading-line-height);--spectrum-alert-dialog-title-color:var(--spectrum-heading-color);--spectrum-alert-dialog-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-alert-dialog-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-alert-dialog-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-alert-dialog-body-font-size:var(--spectrum-alert-dialog-description-size);--spectrum-alert-dialog-body-line-height:var(--spectrum-line-height-100);--spectrum-alert-dialog-body-color:var(--spectrum-body-color);--spectrum-alert-dialog-title-to-divider:var(--spectrum-spacing-200);--spectrum-alert-dialog-divider-to-description:var(--spectrum-spacing-300);--spectrum-alert-dialog-title-to-icon:var(--spectrum-spacing-300);--mod-buttongroup-justify-content:flex-end;box-sizing:border-box;inline-size:fit-content;min-inline-size:var(--mod-alert-dialog-min-width,var(--spectrum-alert-dialog-min-width));max-inline-size:var(--mod-alert-dialog-max-width,var(--spectrum-alert-dialog-max-width));max-block-size:inherit;padding:var(--mod-alert-dialog-padding,var(--spectrum-alert-dialog-padding));outline:none;display:flex}.icon{inline-size:var(--mod-alert-dialog-icon-size,var(--spectrum-alert-dialog-icon-size));block-size:var(--mod-alert-dialog-icon-size,var(--spectrum-alert-dialog-icon-size));flex-shrink:0;margin-inline-start:var(--mod-alert-dialog-title-to-icon,var(--spectrum-alert-dialog-title-to-icon))}:host([variant=warning]){--mod-icon-color:var(--mod-alert-dialog-warning-icon-color,var(--spectrum-alert-dialog-warning-icon-color))}:host([variant=error]){--mod-icon-color:var(--mod-alert-dialog-error-icon-color,var(--spectrum-alert-dialog-error-icon-color))}.grid{display:grid}.header{justify-content:space-between;align-items:baseline;display:flex}::slotted([slot=heading]){font-family:var(--mod-alert-dialog-title-font-family,var(--spectrum-alert-dialog-title-font-family));font-weight:var(--mod-alert-dialog-title-font-weight,var(--spectrum-alert-dialog-title-font-weight));font-style:var(--mod-alert-dialog-title-font-style,var(--spectrum-alert-dialog-title-font-style));font-size:var(--mod-alert-dialog-title-font-size,var(--spectrum-alert-dialog-title-font-size));line-height:var(--mod-alert-dialog-title-line-height,var(--spectrum-alert-dialog-title-line-height));color:var(--mod-alert-dialog-title-color,var(--spectrum-alert-dialog-title-color));margin:0;margin-block-end:var(--mod-alert-dialog-title-to-divider,var(--spectrum-alert-dialog-title-to-divider))}.content{font-family:var(--mod-alert-dialog-body-font-family,var(--spectrum-alert-dialog-body-font-family));font-weight:var(--mod-alert-dialog-body-font-weight,var(--spectrum-alert-dialog-body-font-weight));font-style:var(--mod-alert-dialog-body-font-style,var(--spectrum-alert-dialog-body-font-style));font-size:var(--mod-alert-dialog-body-font-size,var(--spectrum-alert-dialog-body-font-size));line-height:var(--mod-alert-dialog-body-line-height,var(--spectrum-alert-dialog-body-line-height));color:var(--mod-alert-dialog-body-color,var(--spectrum-alert-dialog-body-color));-webkit-overflow-scrolling:touch;margin:0;margin-block-start:var(--mod-alert-dialog-divider-to-description,var(--spectrum-alert-dialog-divider-to-description));margin-block-end:var(--mod-alert-dialog-description-to-buttons,var(--spectrum-alert-dialog-description-to-buttons));overflow-y:auto}@media (forced-colors:active){:host{border:solid}}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["alert-dialog.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-alert-dialog-min-width:var(--spectrum-alert-dialog-minimum-width);--spectrum-alert-dialog-max-width:var(--spectrum-alert-dialog-maximum-width);--spectrum-alert-dialog-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-alert-dialog-warning-icon-color:var(--spectrum-notice-visual-color);--spectrum-alert-dialog-error-icon-color:var(--spectrum-negative-visual-color);--spectrum-alert-dialog-title-font-family:var(--spectrum-sans-font-family-stack);--spectrum-alert-dialog-title-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-alert-dialog-title-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-alert-dialog-title-font-size:var(--spectrum-alert-dialog-title-size);--spectrum-alert-dialog-title-line-height:var(--spectrum-heading-line-height);--spectrum-alert-dialog-title-color:var(--spectrum-heading-color);--spectrum-alert-dialog-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-alert-dialog-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-alert-dialog-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-alert-dialog-body-font-size:var(--spectrum-alert-dialog-description-size);--spectrum-alert-dialog-body-line-height:var(--spectrum-line-height-100);--spectrum-alert-dialog-body-color:var(--spectrum-body-color);--spectrum-alert-dialog-title-to-divider:var(--spectrum-spacing-200);--spectrum-alert-dialog-divider-to-description:var(--spectrum-spacing-300);--spectrum-alert-dialog-title-to-icon:var(--spectrum-spacing-300);--mod-buttongroup-justify-content:flex-end;box-sizing:border-box;inline-size:fit-content;min-inline-size:var(--mod-alert-dialog-min-width,var(--spectrum-alert-dialog-min-width));max-inline-size:var(--mod-alert-dialog-max-width,var(--spectrum-alert-dialog-max-width));max-block-size:inherit;padding:var(--mod-alert-dialog-padding,var(--spectrum-alert-dialog-padding));outline:none;display:flex}.icon{inline-size:var(--mod-alert-dialog-icon-size,var(--spectrum-alert-dialog-icon-size));block-size:var(--mod-alert-dialog-icon-size,var(--spectrum-alert-dialog-icon-size));flex-shrink:0;margin-inline-start:var(--mod-alert-dialog-title-to-icon,var(--spectrum-alert-dialog-title-to-icon))}:host([variant=warning]){--mod-icon-color:var(--mod-alert-dialog-warning-icon-color,var(--spectrum-alert-dialog-warning-icon-color))}:host([variant=error]){--mod-icon-color:var(--mod-alert-dialog-error-icon-color,var(--spectrum-alert-dialog-error-icon-color))}.grid{display:grid}.header{justify-content:space-between;align-items:baseline;display:flex}::slotted([slot=heading]){font-family:var(--mod-alert-dialog-title-font-family,var(--spectrum-alert-dialog-title-font-family));font-weight:var(--mod-alert-dialog-title-font-weight,var(--spectrum-alert-dialog-title-font-weight));font-style:var(--mod-alert-dialog-title-font-style,var(--spectrum-alert-dialog-title-font-style));font-size:var(--mod-alert-dialog-title-font-size,var(--spectrum-alert-dialog-title-font-size));line-height:var(--mod-alert-dialog-title-line-height,var(--spectrum-alert-dialog-title-line-height));color:var(--mod-alert-dialog-title-color,var(--spectrum-alert-dialog-title-color));margin:0;margin-block-end:var(--mod-alert-dialog-title-to-divider,var(--spectrum-alert-dialog-title-to-divider))}.content{font-family:var(--mod-alert-dialog-body-font-family,var(--spectrum-alert-dialog-body-font-family));font-weight:var(--mod-alert-dialog-body-font-weight,var(--spectrum-alert-dialog-body-font-weight));font-style:var(--mod-alert-dialog-body-font-style,var(--spectrum-alert-dialog-body-font-style));font-size:var(--mod-alert-dialog-body-font-size,var(--spectrum-alert-dialog-body-font-size));line-height:var(--mod-alert-dialog-body-line-height,var(--spectrum-alert-dialog-body-line-height));color:var(--mod-alert-dialog-body-color,var(--spectrum-alert-dialog-body-color));-webkit-overflow-scrolling:touch;margin:0;margin-block-start:var(--mod-alert-dialog-divider-to-description,var(--spectrum-alert-dialog-divider-to-description));margin-block-end:var(--mod-alert-dialog-description-to-buttons,var(--spectrum-alert-dialog-description-to-buttons));overflow-y:auto}@media (forced-colors:active){:host{border:solid}}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/src/index.d.ts
CHANGED
|
@@ -1 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*
|
|
7
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
+
* governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
1
12
|
export * from './AlertDialog.js';
|
package/src/index.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport * from './AlertDialog.dev.js'\n"],
|
|
5
5
|
"mappings": ";AAWA,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport * from './AlertDialog.js';\n"],
|
|
5
5
|
"mappings": "aAWA,WAAc",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-alert-dialog.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-alert-dialog-min-width:var(--spectrum-alert-dialog-minimum-width);--spectrum-alert-dialog-max-width:var(--spectrum-alert-dialog-maximum-width);--spectrum-alert-dialog-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-alert-dialog-warning-icon-color:var(--spectrum-notice-visual-color);--spectrum-alert-dialog-error-icon-color:var(--spectrum-negative-visual-color);--spectrum-alert-dialog-title-font-family:var(--spectrum-sans-font-family-stack);--spectrum-alert-dialog-title-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-alert-dialog-title-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-alert-dialog-title-font-size:var(--spectrum-alert-dialog-title-size);--spectrum-alert-dialog-title-line-height:var(--spectrum-heading-line-height);--spectrum-alert-dialog-title-color:var(--spectrum-heading-color);--spectrum-alert-dialog-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-alert-dialog-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-alert-dialog-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-alert-dialog-body-font-size:var(--spectrum-alert-dialog-description-size);--spectrum-alert-dialog-body-line-height:var(--spectrum-line-height-100);--spectrum-alert-dialog-body-color:var(--spectrum-body-color);--spectrum-alert-dialog-title-to-divider:var(--spectrum-spacing-200);--spectrum-alert-dialog-divider-to-description:var(--spectrum-spacing-300);--spectrum-alert-dialog-title-to-icon:var(--spectrum-spacing-300);--mod-buttongroup-justify-content:flex-end;box-sizing:border-box;inline-size:fit-content;min-inline-size:var(--mod-alert-dialog-min-width,var(--spectrum-alert-dialog-min-width));max-inline-size:var(--mod-alert-dialog-max-width,var(--spectrum-alert-dialog-max-width));max-block-size:inherit;padding:var(--mod-alert-dialog-padding,var(--spectrum-alert-dialog-padding));outline:none;display:flex}.icon{inline-size:var(--mod-alert-dialog-icon-size,var(--spectrum-alert-dialog-icon-size));block-size:var(--mod-alert-dialog-icon-size,var(--spectrum-alert-dialog-icon-size));flex-shrink:0;margin-inline-start:var(--mod-alert-dialog-title-to-icon,var(--spectrum-alert-dialog-title-to-icon))}:host([variant=warning]){--mod-icon-color:var(--mod-alert-dialog-warning-icon-color,var(--spectrum-alert-dialog-warning-icon-color))}:host([variant=error]){--mod-icon-color:var(--mod-alert-dialog-error-icon-color,var(--spectrum-alert-dialog-error-icon-color))}.grid{display:grid}.header{justify-content:space-between;align-items:baseline;display:flex}::slotted([slot=heading]){font-family:var(--mod-alert-dialog-title-font-family,var(--spectrum-alert-dialog-title-font-family));font-weight:var(--mod-alert-dialog-title-font-weight,var(--spectrum-alert-dialog-title-font-weight));font-style:var(--mod-alert-dialog-title-font-style,var(--spectrum-alert-dialog-title-font-style));font-size:var(--mod-alert-dialog-title-font-size,var(--spectrum-alert-dialog-title-font-size));line-height:var(--mod-alert-dialog-title-line-height,var(--spectrum-alert-dialog-title-line-height));color:var(--mod-alert-dialog-title-color,var(--spectrum-alert-dialog-title-color));margin:0;margin-block-end:var(--mod-alert-dialog-title-to-divider,var(--spectrum-alert-dialog-title-to-divider))}.content{font-family:var(--mod-alert-dialog-body-font-family,var(--spectrum-alert-dialog-body-font-family));font-weight:var(--mod-alert-dialog-body-font-weight,var(--spectrum-alert-dialog-body-font-weight));font-style:var(--mod-alert-dialog-body-font-style,var(--spectrum-alert-dialog-body-font-style));font-size:var(--mod-alert-dialog-body-font-size,var(--spectrum-alert-dialog-body-font-size));line-height:var(--mod-alert-dialog-body-line-height,var(--spectrum-alert-dialog-body-line-height));color:var(--mod-alert-dialog-body-color,var(--spectrum-alert-dialog-body-color));-webkit-overflow-scrolling:touch;margin:0;margin-block-start:var(--mod-alert-dialog-divider-to-description,var(--spectrum-alert-dialog-divider-to-description));margin-block-end:var(--mod-alert-dialog-description-to-buttons,var(--spectrum-alert-dialog-description-to-buttons));overflow-y:auto}@media (forced-colors:active){:host{border:solid}}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAGf,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-alert-dialog.css.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
4
|
+
"sourcesContent": ["/**\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n :host{--spectrum-alert-dialog-min-width:var(--spectrum-alert-dialog-minimum-width);--spectrum-alert-dialog-max-width:var(--spectrum-alert-dialog-maximum-width);--spectrum-alert-dialog-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-alert-dialog-warning-icon-color:var(--spectrum-notice-visual-color);--spectrum-alert-dialog-error-icon-color:var(--spectrum-negative-visual-color);--spectrum-alert-dialog-title-font-family:var(--spectrum-sans-font-family-stack);--spectrum-alert-dialog-title-font-weight:var(--spectrum-heading-sans-serif-font-weight);--spectrum-alert-dialog-title-font-style:var(--spectrum-heading-sans-serif-font-style);--spectrum-alert-dialog-title-font-size:var(--spectrum-alert-dialog-title-size);--spectrum-alert-dialog-title-line-height:var(--spectrum-heading-line-height);--spectrum-alert-dialog-title-color:var(--spectrum-heading-color);--spectrum-alert-dialog-body-font-family:var(--spectrum-sans-font-family-stack);--spectrum-alert-dialog-body-font-weight:var(--spectrum-body-sans-serif-font-weight);--spectrum-alert-dialog-body-font-style:var(--spectrum-body-sans-serif-font-style);--spectrum-alert-dialog-body-font-size:var(--spectrum-alert-dialog-description-size);--spectrum-alert-dialog-body-line-height:var(--spectrum-line-height-100);--spectrum-alert-dialog-body-color:var(--spectrum-body-color);--spectrum-alert-dialog-title-to-divider:var(--spectrum-spacing-200);--spectrum-alert-dialog-divider-to-description:var(--spectrum-spacing-300);--spectrum-alert-dialog-title-to-icon:var(--spectrum-spacing-300);--mod-buttongroup-justify-content:flex-end;box-sizing:border-box;inline-size:fit-content;min-inline-size:var(--mod-alert-dialog-min-width,var(--spectrum-alert-dialog-min-width));max-inline-size:var(--mod-alert-dialog-max-width,var(--spectrum-alert-dialog-max-width));max-block-size:inherit;padding:var(--mod-alert-dialog-padding,var(--spectrum-alert-dialog-padding));outline:none;display:flex}.icon{inline-size:var(--mod-alert-dialog-icon-size,var(--spectrum-alert-dialog-icon-size));block-size:var(--mod-alert-dialog-icon-size,var(--spectrum-alert-dialog-icon-size));flex-shrink:0;margin-inline-start:var(--mod-alert-dialog-title-to-icon,var(--spectrum-alert-dialog-title-to-icon))}:host([variant=warning]){--mod-icon-color:var(--mod-alert-dialog-warning-icon-color,var(--spectrum-alert-dialog-warning-icon-color))}:host([variant=error]){--mod-icon-color:var(--mod-alert-dialog-error-icon-color,var(--spectrum-alert-dialog-error-icon-color))}.grid{display:grid}.header{justify-content:space-between;align-items:baseline;display:flex}::slotted([slot=heading]){font-family:var(--mod-alert-dialog-title-font-family,var(--spectrum-alert-dialog-title-font-family));font-weight:var(--mod-alert-dialog-title-font-weight,var(--spectrum-alert-dialog-title-font-weight));font-style:var(--mod-alert-dialog-title-font-style,var(--spectrum-alert-dialog-title-font-style));font-size:var(--mod-alert-dialog-title-font-size,var(--spectrum-alert-dialog-title-font-size));line-height:var(--mod-alert-dialog-title-line-height,var(--spectrum-alert-dialog-title-line-height));color:var(--mod-alert-dialog-title-color,var(--spectrum-alert-dialog-title-color));margin:0;margin-block-end:var(--mod-alert-dialog-title-to-divider,var(--spectrum-alert-dialog-title-to-divider))}.content{font-family:var(--mod-alert-dialog-body-font-family,var(--spectrum-alert-dialog-body-font-family));font-weight:var(--mod-alert-dialog-body-font-weight,var(--spectrum-alert-dialog-body-font-weight));font-style:var(--mod-alert-dialog-body-font-style,var(--spectrum-alert-dialog-body-font-style));font-size:var(--mod-alert-dialog-body-font-size,var(--spectrum-alert-dialog-body-font-size));line-height:var(--mod-alert-dialog-body-line-height,var(--spectrum-alert-dialog-body-line-height));color:var(--mod-alert-dialog-body-color,var(--spectrum-alert-dialog-body-color));-webkit-overflow-scrolling:touch;margin:0;margin-block-start:var(--mod-alert-dialog-divider-to-description,var(--spectrum-alert-dialog-divider-to-description));margin-block-end:var(--mod-alert-dialog-description-to-buttons,var(--spectrum-alert-dialog-description-to-buttons));overflow-y:auto}@media (forced-colors:active){:host{border:solid}}\n`;\nexport default styles;"],
|
|
5
5
|
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA,EAGf,eAAeC",
|
|
6
6
|
"names": ["css", "styles"]
|
|
7
7
|
}
|