@esri/calcite-components 5.0.0-next.23 → 5.0.0-next.25

package/dist/docs/api.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-12-11T01:42:43",
+  "timestamp": "2025-12-11T16:51:50",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
     "version": "5.0.0-next.76",
@@ -36738,6 +36738,10 @@
               "name": "--calcite-notice-border-color",
               "description": "Specifies the component's border color when `appearance=\"outline-fill\"`."
             },
+            {
+              "name": "--calcite-notice-corner-radius",
+              "description": "Specifies the component's border radius."
+            },
             {
               "name": "--calcite-notice-close-background-color",
               "description": "Specifies the background color of the component's close button."

package/dist/docs/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-12-11T01:42:43",
+  "timestamp": "2025-12-11T16:51:50",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
     "version": "5.0.0-next.76",
@@ -31010,6 +31010,11 @@
           "annotation": "prop",
           "docs": "Specifies the component's border color when `appearance=\"outline-fill\"`."
         },
+        {
+          "name": "--calcite-notice-corner-radius",
+          "annotation": "prop",
+          "docs": "Specifies the component's border radius."
+        },
         {
           "name": "--calcite-notice-close-background-color",
           "annotation": "prop",

package/dist/docs/supported-browsers.json

@@ -1 +1 @@
-["chrome 143","chrome 142","edge 142","edge 141","firefox 145","firefox 144","firefox 140","ios_saf 26.0","ios_saf 18.5-18.6","ios_saf 18.4","ios_saf 18.3","ios_saf 18.2","ios_saf 18.1","ios_saf 18.0","safari 26.2","safari 26.1","safari 26.0","safari 18.5-18.6","safari 18.4","safari 18.3","safari 18.2","safari 18.1","safari 18.0"]
+["chrome 143","chrome 142","edge 143","edge 142","firefox 145","firefox 144","firefox 140","ios_saf 26.0","ios_saf 18.5-18.7","ios_saf 18.4","ios_saf 18.3","ios_saf 18.2","ios_saf 18.1","ios_saf 18.0","safari 26.2","safari 26.1","safari 26.0","safari 18.5-18.6","safari 18.4","safari 18.3","safari 18.2","safari 18.1","safari 18.0"]

package/dist/docs/vscode.css-custom-data.json

@@ -1862,6 +1862,10 @@
       "name": "--calcite-notice-border-color",
       "description": "Specifies the component's border color when `appearance=\"outline-fill\"`."
     },
+    {
+      "name": "--calcite-notice-corner-radius",
+      "description": "Specifies the component's border radius."
+    },
     {
       "name": "--calcite-notice-close-background-color",
       "description": "Specifies the background color of the component's close button."

package/dist/docs/vscode.html-custom-data.json

@@ -5881,7 +5881,7 @@
     },
     {
       "name": "calcite-notice",
-      "description": "Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because\nnotices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.\nThey are optionally closable - useful for keeping track of whether or not a user has closed the notice. You can also choose not\nto display a notice on page load and set the \"active\" attribute as needed to contextually provide inline messaging to users.\n--\n\n### Events\n- **calciteNoticeBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteNoticeBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteNoticeClose** - Fires when the component is closed and animation is complete.\n- **calciteNoticeOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- **title** - A slot for adding the title.\n- **message** - A slot for adding the message.\n- **link** - A slot for adding a `calcite-action` to take, such as: \"undo\", \"try again\", \"link to page\", etc.\n- **actions-end** - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or less actions.\n\n### CSS Properties\n- **--calcite-notice-background-color** - Specifies the component's background color when `appearance=\"outline-fill\"`. \n- **--calcite-notice-border-color** - Specifies the component's border color when `appearance=\"outline-fill\"`. \n- **--calcite-notice-close-background-color** - Specifies the background color of the component's close button. \n- **--calcite-notice-close-background-color-focus** - Specifies the background color of the component's close button when focused or hovered. \n- **--calcite-notice-close-background-color-press** - Specifies the background color of the component's close button when active. \n- **--calcite-notice-close-icon-color-hover** - Specifies the background color of the component's close button when hovered. \n- **--calcite-notice-close-icon-color** - Specifies the text color of the component's close button. \n- **--calcite-notice-title-text-color** - Specifies the component's title text color. \n- **--calcite-notice-content-text-color** - Specifies the component's content text color. \n- **--calcite-notice-width** - [Deprecated] Specifies the component's width. ",
+      "description": "Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because\nnotices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.\nThey are optionally closable - useful for keeping track of whether or not a user has closed the notice. You can also choose not\nto display a notice on page load and set the \"active\" attribute as needed to contextually provide inline messaging to users.\n--\n\n### Events\n- **calciteNoticeBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteNoticeBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteNoticeClose** - Fires when the component is closed and animation is complete.\n- **calciteNoticeOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- **title** - A slot for adding the title.\n- **message** - A slot for adding the message.\n- **link** - A slot for adding a `calcite-action` to take, such as: \"undo\", \"try again\", \"link to page\", etc.\n- **actions-end** - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or less actions.\n\n### CSS Properties\n- **--calcite-notice-background-color** - Specifies the component's background color when `appearance=\"outline-fill\"`. \n- **--calcite-notice-border-color** - Specifies the component's border color when `appearance=\"outline-fill\"`. \n- **--calcite-notice-corner-radius** - Specifies the component's border radius. \n- **--calcite-notice-close-background-color** - Specifies the background color of the component's close button. \n- **--calcite-notice-close-background-color-focus** - Specifies the background color of the component's close button when focused or hovered. \n- **--calcite-notice-close-background-color-press** - Specifies the background color of the component's close button when active. \n- **--calcite-notice-close-icon-color-hover** - Specifies the background color of the component's close button when hovered. \n- **--calcite-notice-close-icon-color** - Specifies the text color of the component's close button. \n- **--calcite-notice-title-text-color** - Specifies the component's title text color. \n- **--calcite-notice-content-text-color** - Specifies the component's content text color. \n- **--calcite-notice-width** - [Deprecated] Specifies the component's width. ",
       "attributes": [
         {
           "name": "appearance",

package/dist/docs/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@esri/calcite-components",
-  "version": "5.0.0-next.23",
+  "version": "5.0.0-next.25",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -12211,7 +12211,7 @@
         },
         {
           "name": "calcite-notice",
-          "description": "Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because\nnotices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.\nThey are optionally closable - useful for keeping track of whether or not a user has closed the notice. You can also choose not\nto display a notice on page load and set the \"active\" attribute as needed to contextually provide inline messaging to users.\n--\n\n### Events\n- **calciteNoticeBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteNoticeBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteNoticeClose** - Fires when the component is closed and animation is complete.\n- **calciteNoticeOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- **title** - A slot for adding the title.\n- **message** - A slot for adding the message.\n- **link** - A slot for adding a `calcite-action` to take, such as: \"undo\", \"try again\", \"link to page\", etc.\n- **actions-end** - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or less actions.\n\n### CSS Properties\n- **--calcite-notice-background-color** - Specifies the component's background color when `appearance=\"outline-fill\"`. \n- **--calcite-notice-border-color** - Specifies the component's border color when `appearance=\"outline-fill\"`. \n- **--calcite-notice-close-background-color** - Specifies the background color of the component's close button. \n- **--calcite-notice-close-background-color-focus** - Specifies the background color of the component's close button when focused or hovered. \n- **--calcite-notice-close-background-color-press** - Specifies the background color of the component's close button when active. \n- **--calcite-notice-close-icon-color-hover** - Specifies the background color of the component's close button when hovered. \n- **--calcite-notice-close-icon-color** - Specifies the text color of the component's close button. \n- **--calcite-notice-title-text-color** - Specifies the component's title text color. \n- **--calcite-notice-content-text-color** - Specifies the component's content text color. \n- **--calcite-notice-width** - [Deprecated] Specifies the component's width. ",
+          "description": "Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because\nnotices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.\nThey are optionally closable - useful for keeping track of whether or not a user has closed the notice. You can also choose not\nto display a notice on page load and set the \"active\" attribute as needed to contextually provide inline messaging to users.\n--\n\n### Events\n- **calciteNoticeBeforeClose** - Fires when the component is requested to be closed and before the closing transition begins.\n- **calciteNoticeBeforeOpen** - Fires when the component is added to the DOM but not rendered, and before the opening transition begins.\n- **calciteNoticeClose** - Fires when the component is closed and animation is complete.\n- **calciteNoticeOpen** - Fires when the component is open and animation is complete.\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n- `setFocus(options?: FocusOptions): Promise<void>` - Sets focus on the component's first focusable element.\n\n### Slots\n- **title** - A slot for adding the title.\n- **message** - A slot for adding the message.\n- **link** - A slot for adding a `calcite-action` to take, such as: \"undo\", \"try again\", \"link to page\", etc.\n- **actions-end** - A slot for adding `calcite-action`s to the end of the component. It is recommended to use two or less actions.\n\n### CSS Properties\n- **--calcite-notice-background-color** - Specifies the component's background color when `appearance=\"outline-fill\"`. \n- **--calcite-notice-border-color** - Specifies the component's border color when `appearance=\"outline-fill\"`. \n- **--calcite-notice-corner-radius** - Specifies the component's border radius. \n- **--calcite-notice-close-background-color** - Specifies the background color of the component's close button. \n- **--calcite-notice-close-background-color-focus** - Specifies the background color of the component's close button when focused or hovered. \n- **--calcite-notice-close-background-color-press** - Specifies the background color of the component's close button when active. \n- **--calcite-notice-close-icon-color-hover** - Specifies the background color of the component's close button when hovered. \n- **--calcite-notice-close-icon-color** - Specifies the text color of the component's close button. \n- **--calcite-notice-title-text-color** - Specifies the component's title text color. \n- **--calcite-notice-content-text-color** - Specifies the component's content text color. \n- **--calcite-notice-width** - [Deprecated] Specifies the component's width. ",
           "attributes": [
             {
               "name": "appearance",
@@ -20609,6 +20609,10 @@
           "name": "--calcite-notice-border-color",
           "description": "Specifies the component's border color when `appearance=\"outline-fill\"`."
         },
+        {
+          "name": "--calcite-notice-corner-radius",
+          "description": "Specifies the component's border radius."
+        },
         {
           "name": "--calcite-notice-close-background-color",
           "description": "Specifies the background color of the component's close button."

package/dist/index.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.23 */
+v5.0.0-next.25 */
 import { s as setAssetPath$1 } from "./chunks/runtime.js";
 import { g } from "./chunks/runtime.js";
 let assetPathChanged = false;

package/dist/loader.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.23 */
+v5.0.0-next.25 */
 import { r as runtime } from "./chunks/runtime.js";
 import { makeDefineCustomElements } from "@arcgis/lumina";
 const defineCustomElements = makeDefineCustomElements(runtime, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "5.0.0-next.23",
+  "version": "5.0.0-next.25",
   "description": "Web Components for Esri's Calcite Design System.",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "repository": {
@@ -110,5 +110,5 @@
     "dist/docs/vscode.html-custom-data.json"
   ],
   "web-types": "dist/docs/web-types.json",
-  "gitHead": "1b311a3bf84466f5ccde55ef4c38bd11fe85f1c9"
+  "gitHead": "7eb4a973d816c212c1579460683cb672980864d2"
 }

package/dist/cdn/U6Z2NTSP.js

@@ -1,4 +0,0 @@
-/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
-See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.23 */
-import{a as k,b as x}from"./PTBMFCPN.js";import{a as b}from"./BD4NDL77.js";import{a as v}from"./6XGPKCB4.js";import{a as m}from"./RB5UZTWN.js";import{a as u}from"./OW5JB5OQ.js";import"./4MTRBAAO.js";import{o as r,t as f}from"./7D6UKTNV.js";import"./E6BU7363.js";import{B as a,C as l,D as p,E as t,I as h,P as g,g as d,h as c,o}from"./CO2C5RAV.js";var n={title:"title",message:"message",link:"link",actionsEnd:"actions-end"},i={actionsEnd:"actions-end",close:"notice-close",container:"container",content:"notice-content",icon:"notice-icon"},y=d`:host([scale=s]){--calcite-notice-spacing-token-small: .5rem;--calcite-notice-spacing-token-large: .75rem}:host([scale=s]) .container slot[name=title]::slotted(*),:host([scale=s]) .container *::slotted([slot=title]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) .container slot[name=message]::slotted(*),:host([scale=s]) .container *::slotted([slot=message]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) ::slotted(calcite-link){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=m]){--calcite-notice-spacing-token-small: .75rem;--calcite-notice-spacing-token-large: 1rem}:host([scale=m]) .container slot[name=title]::slotted(*),:host([scale=m]) .container *::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) .container slot[name=message]::slotted(*),:host([scale=m]) .container *::slotted([slot=message]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) ::slotted(calcite-link){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=l]){--calcite-notice-spacing-token-small: 1rem;--calcite-notice-spacing-token-large: 1.25rem}:host([scale=l]) .container slot[name=title]::slotted(*),:host([scale=l]) .container *::slotted([slot=title]){font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) .container slot[name=message]::slotted(*),:host([scale=l]) .container *::slotted([slot=message]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) ::slotted(calcite-link){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .notice-close{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=l]) .actions-end{margin-inline-end:var(--calcite-spacing-sm);gap:var(--calcite-spacing-sm)}:host([width=auto]){--calcite-notice-width: auto}:host([width=half]){--calcite-notice-width: 50%}:host([width=full]){--calcite-notice-width: 100%}:host{margin-inline:auto;display:none;max-inline-size:100%;align-items:center;inline-size:var(--calcite-notice-width)}.container{pointer-events:none;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;opacity:0;overflow:hidden;max-block-size:0;transition-property:opacity,max-block-size;transition-duration:var(--calcite-animation-timing);text-align:start;border-radius:var(--calcite-corner-radius-sm)}:host{display:flex}:host([open]) .container{pointer-events:auto;max-block-size:100%;align-items:center;opacity:1;overflow:visible}:host([open][appearance=outline-fill]) .container{border:var(--calcite-border-width-sm) solid}.container slot[name=title]::slotted(*),.container *::slotted([slot=title]){margin:0;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-notice-title-text-color, var(--calcite-color-text-1))}.container slot[name=message]::slotted(*),.container *::slotted([slot=message]){margin:0;display:inline;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-notice-content-text-color, var(--calcite-color-text-2))}:host(:not([kind=neutral])[appearance=solid]) .container slot[name=title]::slotted(*),:host(:not([kind=neutral])[appearance=solid]) .container *::slotted([slot=title]){color:var(--calcite-notice-title-text-color, var(--calcite-color-text-inverse))}:host(:not([kind=neutral])[appearance=solid]) .container slot[name=message]::slotted(*),:host(:not([kind=neutral])[appearance=solid]) .container *::slotted([slot=message]){color:var(--calcite-notice-content-text-color, var(--calcite-color-text-inverse))}.notice-content{box-sizing:border-box;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto;display:flex;min-inline-size:0px;flex-direction:column;overflow-wrap:break-word;flex:1 1 0;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:0 var(--calcite-notice-spacing-token-large)}.notice-content:first-of-type:not(:only-child){padding-inline-start:var(--calcite-notice-spacing-token-large)}.notice-content:only-of-type{padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large)}.notice-icon{display:flex;align-items:center;box-sizing:border-box;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto;padding-inline:var(--calcite-notice-spacing-token-small)}.notice-close{box-sizing:border-box;display:flex;cursor:pointer;align-items:center;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;flex:0 0 auto;margin-inline-end:var(--calcite-spacing-xs);--calcite-action-text-color: var(--calcite-notice-close-icon-color, var(--calcite-color-text-3));--calcite-action-background-color: var(--calcite-action-background-color, transparent)}.notice-close:hover,.notice-close:focus{--calcite-action-background-color-hover: var( --calcite-notice-close-background-color-focus, var(--calcite-color-foreground-2) );--calcite-action-text-color-press: var(--calcite-notice-close-icon-color-hover, var(--calcite-color-text-1))}.notice-close:active{--calcite-action-background-color-press: var( --calcite-notice-close-background-color-press, var(--calcite-color-foreground-3) )}.actions-end{display:flex;align-items:center;flex:0 0 auto;margin-inline-end:var(--calcite-spacing-xs);gap:var(--calcite-spacing-xs)}:host([kind=brand][appearance=outline-fill]) .container{border-color:var(--calcite-notice-border-color, rgb(from var(--calcite-color-brand) r g b/var(--calcite-opacity-half)));background-color:var(--calcite-notice-background-color, color-mix(in srgb, var(--calcite-color-brand) 5%, var(--calcite-color-foreground-1)))}:host([kind=brand][appearance=outline-fill]) .notice-icon,:host([kind=brand][appearance=transparent]) .notice-icon{color:var(--calcite-color-brand)}:host([kind=info][appearance=outline-fill]) .container{border-color:var(--calcite-notice-border-color, rgb(from var(--calcite-color-status-info) r g b/var(--calcite-opacity-half)));background-color:var(--calcite-notice-background-color, color-mix(in srgb, var(--calcite-color-status-info) 5%, var(--calcite-color-foreground-1)))}:host([kind=info][appearance=outline-fill]) .notice-icon,:host([kind=info][appearance=transparent]) .notice-icon{color:var(--calcite-color-status-info)}:host([kind=danger][appearance=outline-fill]) .container{border-color:var(--calcite-notice-border-color, rgb(from var(--calcite-color-status-danger) r g b/var(--calcite-opacity-half)));background-color:var(--calcite-notice-background-color, color-mix(in srgb, var(--calcite-color-status-danger) 5%, var(--calcite-color-foreground-1)))}:host([kind=danger][appearance=outline-fill]) .notice-icon,:host([kind=danger][appearance=transparent]) .notice-icon{color:var(--calcite-color-status-danger)}:host([kind=success][appearance=outline-fill]) .container{border-color:var(--calcite-notice-border-color, rgb(from var(--calcite-color-status-success) r g b/var(--calcite-opacity-half)));background-color:var(--calcite-notice-background-color, color-mix(in srgb, var(--calcite-color-status-success) 5%, var(--calcite-color-foreground-1)))}:host([kind=success][appearance=outline-fill]) .notice-icon,:host([kind=success][appearance=transparent]) .notice-icon{color:var(--calcite-color-status-success)}:host([kind=warning][appearance=outline-fill]) .container{border-color:var(--calcite-notice-border-color, rgb(from var(--calcite-color-status-warning) r g b/var(--calcite-opacity-half)));background-color:var(--calcite-notice-background-color, color-mix(in srgb, var(--calcite-color-status-warning) 5%, var(--calcite-color-foreground-1)))}:host([kind=warning][appearance=outline-fill]) .notice-icon,:host([kind=warning][appearance=transparent]) .notice-icon{color:var(--calcite-color-status-warning)}:host([kind=neutral][appearance=outline-fill]) .container{border-color:var(--calcite-color-border-2);background-color:var(--calcite-notice-background-color, var(--calcite-color-foreground-1))}:host([kind=neutral]) .notice-icon{color:var(--calcite-color-text-3)}:host([appearance=transparent]) .container{background-color:transparent}:host([hidden]){display:none}[hidden]{display:none}`,s=class extends p{constructor(){super(...arguments),this.closeButtonRef=a(),this.transitionProp="opacity",this.transitionRef=a(),this.messages=v(),this.focusSetter=m()(this),this.hasActionEnd=!1,this.appearance="outline-fill",this.closable=!1,this.iconFlipRtl=!1,this.kind="brand",this.open=!1,this.scale="m",this.width="auto",this.calciteNoticeBeforeClose=o({cancelable:!1}),this.calciteNoticeBeforeOpen=o({cancelable:!1}),this.calciteNoticeClose=o({cancelable:!1}),this.calciteNoticeOpen=o({cancelable:!1})}static{this.properties={hasActionEnd:[16,{},{state:!0}],appearance:[3,{},{reflect:!0}],closable:[7,{},{reflect:!0,type:Boolean}],icon:[3,{converter:h,type:String},{reflect:!0}],iconFlipRtl:[7,{},{reflect:!0,type:Boolean}],kind:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],open:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],width:[3,{},{reflect:!0}]}}static{this.styles=y}async setFocus(e){return this.focusSetter(()=>this.el.querySelector("calcite-link")||this.closeButtonRef.value,e)}async load(){this.kindIcons={...x,brand:k.brand},this.requestedIcon=r(this.kindIcons,this.icon,this.kind)}willUpdate(e){e.has("open")&&(this.hasUpdated||this.open!==!1)&&b(this),(e.has("icon")||e.has("kind")&&(this.hasUpdated||this.kind!=="brand"))&&(this.requestedIcon=r(this.kindIcons,this.icon,this.kind))}onBeforeClose(){this.calciteNoticeBeforeClose.emit()}onBeforeOpen(){this.calciteNoticeBeforeOpen.emit()}onClose(){this.calciteNoticeClose.emit()}onOpen(){this.calciteNoticeOpen.emit()}close(){this.open=!1}handleActionsEndSlotChange(e){this.hasActionEnd=f(e)}render(){let e=c`<calcite-action class=${t(i.close)} icon=x @click=${this.close} .scale=${this.scale} .text=${this.messages.close} ${l(this.closeButtonRef)}></calcite-action>`;return c`<div class=${t(i.container)} ${l(this.transitionRef)}>${this.requestedIcon?c`<div class=${t(i.icon)}><calcite-icon .flipRtl=${this.iconFlipRtl} .icon=${this.requestedIcon} .scale=${u(this.scale)}></calcite-icon></div>`:null}<div class=${t(i.content)}><slot name=${n.title}></slot><slot name=${n.message}></slot><slot name=${n.link}></slot></div><div class=${t(i.actionsEnd)} .hidden=${!this.hasActionEnd}><slot name=${n.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot></div>${this.closable?e:null}</div>`}};g("calcite-notice",s);export{s as Notice};