@esri/calcite-components 5.0.0-next.20 → 5.0.0-next.22

package/dist/components/calcite-time-picker/customElement.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.20 */
+v5.0.0-next.22 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
@@ -51,7 +51,7 @@ const ICONS = {
   chevronUp: "chevron-up",
   chevronDown: "chevron-down"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;border-width:1px;border-style:solid;font-weight:var(--calcite-font-weight-medium);border-color:var(--calcite-time-picker-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round));color:var(--calcite-time-picker-color, var(--calcite-color-text-1));background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1));overflow:hidden}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .button:hover,.time-picker .button:focus{outline:2px solid transparent;outline-offset:2px;z-index:var(--calcite-z-index-header);outline-offset:0;background-color:var(--calcite-time-picker-button-background-color-hover, var(--calcite-color-foreground-2))}.time-picker .button:active{background-color:var(--calcite-time-picker-button-background-color-press, var(--calcite-color-foreground-3))}.time-picker .button.top-left{border-start-start-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.top-right{border-start-end-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button calcite-icon{color:var(--calcite-time-picker-icon-color, var(--calcite-color-text-3))}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-time-picker-input-border-color-hover, var(--calcite-color-foreground-2));z-index:var(--calcite-z-index-header)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;outline-offset:0}.time-picker .input.inputFocus,.time-picker .input:hover.inputFocus{box-shadow:inset 0 0 0 2px var(--calcite-time-picker-input-border-color-press, var(--calcite-color-brand));z-index:var(--calcite-z-index-header)}.time-picker.scale-s{font-size:var(--calcite-font-size--1)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:var(--calcite-spacing-sm);padding-block:var(--calcite-spacing-xxs)}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-md)}.time-picker.scale-m{font-size:var(--calcite-font-size-0)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:var(--calcite-spacing-md);padding-block:var(--calcite-spacing-sm)}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-xl)}.time-picker.scale-l{font-size:var(--calcite-font-size-1)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:var(--calcite-spacing-lg);padding-block:var(--calcite-spacing-md)}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-xxl)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;border-width:1px;border-style:solid;font-weight:var(--calcite-font-weight-medium);border-color:var(--calcite-time-picker-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round));color:var(--calcite-time-picker-color, var(--calcite-color-text-1));background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1));overflow:hidden}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .button:hover,.time-picker .button:focus{outline:2px solid transparent;outline-offset:2px;z-index:var(--calcite-z-index-header);outline-offset:0;background-color:var(--calcite-time-picker-button-background-color-hover, var(--calcite-color-foreground-2))}.time-picker .button:active{background-color:var(--calcite-time-picker-button-background-color-press, var(--calcite-color-foreground-3))}.time-picker .button.top-left{border-start-start-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.top-right{border-start-end-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button calcite-icon{color:var(--calcite-time-picker-icon-color, var(--calcite-color-text-3))}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-time-picker-input-border-color-hover, var(--calcite-color-foreground-2));z-index:var(--calcite-z-index-header)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;outline-offset:0}.time-picker .input.inputFocus,.time-picker .input:hover.inputFocus{box-shadow:inset 0 0 0 2px var(--calcite-time-picker-input-border-color-press, var(--calcite-color-brand));z-index:var(--calcite-z-index-header)}.time-picker.scale-s{font-size:var(--calcite-font-size--1)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:var(--calcite-spacing-sm);padding-block:var(--calcite-spacing-xxs)}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-md)}.time-picker.scale-m{font-size:var(--calcite-font-size-0)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:var(--calcite-spacing-md);padding-block:var(--calcite-spacing-sm)}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-xl)}.time-picker.scale-l{font-size:var(--calcite-font-size-1)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:var(--calcite-spacing-lg);padding-block:var(--calcite-spacing-md)}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-xxl)}:host([hidden]){display:none}[hidden]{display:none}`;
 class TimePicker extends LitElement {
   constructor() {
     super();

package/dist/components/calcite-tooltip/customElement.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.20 */
+v5.0.0-next.22 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
@@ -264,7 +264,7 @@ class TooltipManager {
     return referenceEl instanceof Element ? getShadowRootNode(referenceEl) : null;
   }
 }
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:contents}.position-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0}@starting-style{.position-container{opacity:0;inset-block-start:0;left:0}}.position-container{max-inline-size:var(--calcite-tooltip-max-size-x, 20rem);max-block-size:20rem}.position-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.position-container:popover-open{display:block}.position-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.position-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.position-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.position-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.position-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-color-border-3)}.container{position:relative;overflow:hidden;padding:.75rem 1rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word;border-radius:var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round));color:var(--calcite-tooltip-text-color, var(--calcite-color-text-1));text-align:start}.position-container .calcite-floating-ui-anim{border-width:1px;border-style:solid;background-color:var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-tooltip-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round))}.calcite-floating-ui-arrow{fill:var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1))}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-tooltip-border-color, var(--calcite-color-border-3))}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:contents}.position-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0}@starting-style{.position-container{opacity:0;inset-block-start:0;left:0}}.position-container{max-inline-size:var(--calcite-tooltip-max-size-x, 20rem);max-block-size:20rem}.position-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.position-container:popover-open{display:block}.position-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.position-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.position-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.position-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.position-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-color-border-3)}.container{position:relative;overflow:hidden;padding:.75rem 1rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word;border-radius:var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round));color:var(--calcite-tooltip-text-color, var(--calcite-color-text-1));text-align:start}.position-container .calcite-floating-ui-anim{border-width:1px;border-style:solid;background-color:var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-tooltip-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round))}.calcite-floating-ui-arrow{fill:var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1))}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-tooltip-border-color, var(--calcite-color-border-3))}:host([hidden]){display:none}[hidden]{display:none}`;
 const manager = new TooltipManager();
 class Tooltip extends LitElement {
   constructor() {

package/dist/components/calcite-tree/customElement.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.20 */
+v5.0.0-next.22 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute } from "@arcgis/lumina";
@@ -24,7 +24,7 @@ function getTraversableItems(root) {
     }
   );
 }
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:block}:host(:focus){outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:block}:host(:focus){outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`;
 class Tree extends LitElement {
   constructor() {
     super();

package/dist/components/calcite-tree-item/customElement.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.20 */
+v5.0.0-next.22 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
@@ -36,7 +36,7 @@ const ICONS = {
   minusSquareF: "minus-square-f",
   square: "square"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-internal-tree-item-spacing-unit: .25rem;--calcite-internal-tree-item-padding-block: .25rem;--calcite-internal-tree-item-children-container-padding: 1.25rem;--calcite-internal-tree-item-line-left-position: .75rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-internal-tree-item-spacing-unit: .5rem;--calcite-internal-tree-item-padding-block: .5rem;--calcite-internal-tree-item-children-container-padding: 1.5rem;--calcite-internal-tree-item-line-left-position: 1rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-internal-tree-item-spacing-unit: .75rem;--calcite-internal-tree-item-padding-block: .625rem;--calcite-internal-tree-item-children-container-padding: 2.25rem;--calcite-internal-tree-item-line-left-position: 1.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{display:block;max-inline-size:100%;cursor:pointer}:host .children-container ::slotted(*){padding-inline-start:var(--calcite-internal-tree-item-children-container-padding)}.node-actions-container{display:flex}.node-actions-container .node-container,.node-actions-container .checkbox-container{gap:var(--calcite-internal-tree-item-spacing-unit)}.node-actions-container .node-container{padding-inline:var(--calcite-internal-tree-item-spacing-unit);padding-block:var(--calcite-internal-tree-item-padding-block)}.node-actions-container{color:var(--calcite-tree-text-color, var(--calcite-color-text-3))}:host([calcite-hydrated-hidden]){visibility:hidden!important;pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([lines]) .children-container:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-z-index);inline-size:1px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);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;block-size:100%;inset-inline-start:var(--calcite-internal-tree-item-line-left-position);content:"";background-color:var(--calcite-color-border-2)}:host(:not([lines])) .node-container:after{display:none}::slotted(*){min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none!important}::slotted(*):hover{text-decoration:none!important}::slotted(a){inline-size:100%;text-decoration-line:none}:host{outline:2px solid transparent;outline-offset:2px}:host .node-container{outline-color:transparent}:host:focus .node-container,:host:active .node-container{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:focus:not([disabled])) .node-container{outline:2px solid transparent;outline-offset:2px;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:focus:not([disabled])) .checkbox{outline:2px solid transparent;outline-offset:2px}.actions-end{display:flex;flex-direction:row;align-items:center;align-self:stretch}.checkbox-container{display:flex;align-items:center}.checkbox{line-height:0;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-border-input))}.checkbox-label{pointer-events:none;display:flex;align-items:center}.children-container{position:relative;block-size:0px;transform-origin:top;overflow:hidden;opacity:0;transform:scaleY(0);transition:var(--calcite-animation-timing) cubic-bezier(.215,.44,.42,.88),opacity var(--calcite-animation-timing) cubic-bezier(.215,.44,.42,.88),all var(--calcite-animation-timing) ease-in-out}.item--expanded>.children-container{overflow:visible;opacity:1;transform:none;block-size:auto}.node-container{position:relative;display:flex;min-inline-size:0px;flex-grow:1;align-items:center}.node-container .checkmark,.node-container .bullet-point{opacity:0;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;color:var(--calcite-color-border-1)}.node-container:hover .checkmark,.node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark,:host([selected]) .node-container:hover .bullet-point,:host(:focus:not([disabled])) .node-container .checkmark,:host(:focus:not([disabled])) .node-container .bullet-point{opacity:1}:host([selected]) .node-container,:host([selected]) .node-container:hover{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-tree-text-color-selected, var(--calcite-color-text-1))}:host([selected]) .node-container .bullet-point,:host([selected]) .node-container .checkmark,:host([selected]) .node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark{opacity:1;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children]) .node-container .bullet-point,:host([has-children]) .node-container .checkmark{display:none}.chevron{position:relative;align-self:center;color:var(--calcite-color-text-3);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;transform:rotate(0)}.calcite--rtl .chevron{transform:rotate(180deg)}.item--expanded .node-container>.chevron{transform:rotate(90deg)}:host([selected]) .checkmark,:host([selected]) .bullet-point{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([selected]) .checkbox{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children][indeterminate]) .checkbox{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-internal-tree-item-spacing-unit: .25rem;--calcite-internal-tree-item-padding-block: .25rem;--calcite-internal-tree-item-children-container-padding: 1.25rem;--calcite-internal-tree-item-line-left-position: .75rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host(:is([scale=s],[scale=m])){--calcite-internal-tree-item-action-spacing: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-tree-item-spacing-unit: .5rem;--calcite-internal-tree-item-padding-block: .5rem;--calcite-internal-tree-item-children-container-padding: 1.5rem;--calcite-internal-tree-item-line-left-position: 1rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-internal-tree-item-action-spacing: var(--calcite-spacing-xs);--calcite-internal-tree-item-spacing-unit: .75rem;--calcite-internal-tree-item-padding-block: .625rem;--calcite-internal-tree-item-children-container-padding: 2.25rem;--calcite-internal-tree-item-line-left-position: 1.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{display:block;max-inline-size:100%;cursor:pointer}:host .children-container ::slotted(*){padding-inline-start:var(--calcite-internal-tree-item-children-container-padding)}.node-actions-container{display:flex}.node-actions-container .node-container,.node-actions-container .checkbox-container{gap:var(--calcite-internal-tree-item-spacing-unit)}.node-actions-container .node-container{padding-inline:var(--calcite-internal-tree-item-spacing-unit);padding-block:var(--calcite-internal-tree-item-padding-block)}.node-actions-container{color:var(--calcite-tree-text-color, var(--calcite-color-text-3))}:host([calcite-hydrated-hidden]){visibility:hidden!important;pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([lines]) .children-container:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-z-index);inline-size:1px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);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;block-size:100%;inset-inline-start:var(--calcite-internal-tree-item-line-left-position);content:"";background-color:var(--calcite-color-border-2)}:host(:not([lines])) .node-container:after{display:none}::slotted(*){min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none!important}::slotted(*):hover{text-decoration:none!important}::slotted(a){inline-size:100%;text-decoration-line:none}:host{outline:2px solid transparent;outline-offset:2px}:host .node-container{outline-color:transparent}:host:focus .node-container,:host:active .node-container{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:focus:not([disabled])) .node-container{outline:2px solid transparent;outline-offset:2px;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:focus:not([disabled])) .checkbox{outline:2px solid transparent;outline-offset:2px}.actions-end{display:flex;flex-direction:row;align-items:center;align-self:stretch;gap:var(--calcite-internal-tree-item-action-spacing)}.checkbox-container{display:flex;align-items:center}.checkbox{line-height:0;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-border-input))}.checkbox-label{pointer-events:none;display:flex;align-items:center}.children-container{position:relative;block-size:0px;transform-origin:top;overflow:hidden;opacity:0;transform:scaleY(0);transition:var(--calcite-animation-timing) cubic-bezier(.215,.44,.42,.88),opacity var(--calcite-animation-timing) cubic-bezier(.215,.44,.42,.88),all var(--calcite-animation-timing) ease-in-out}.item--expanded>.children-container{overflow:visible;opacity:1;transform:none;block-size:auto}.node-container{position:relative;display:flex;min-inline-size:0px;flex-grow:1;align-items:center}.node-container .checkmark,.node-container .bullet-point{opacity:0;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;color:var(--calcite-color-border-1)}.node-container:hover .checkmark,.node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark,:host([selected]) .node-container:hover .bullet-point,:host(:focus:not([disabled])) .node-container .checkmark,:host(:focus:not([disabled])) .node-container .bullet-point{opacity:1}:host([selected]) .node-container,:host([selected]) .node-container:hover{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-tree-text-color-selected, var(--calcite-color-text-1))}:host([selected]) .node-container .bullet-point,:host([selected]) .node-container .checkmark,:host([selected]) .node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark{opacity:1;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children]) .node-container .bullet-point,:host([has-children]) .node-container .checkmark{display:none}.chevron{position:relative;align-self:center;color:var(--calcite-color-text-3);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;transform:rotate(0)}.calcite--rtl .chevron{transform:rotate(180deg)}.item--expanded .node-container>.chevron{transform:rotate(90deg)}:host([selected]) .checkmark,:host([selected]) .bullet-point{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([selected]) .checkbox{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children][indeterminate]) .checkbox{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([hidden]){display:none}[hidden]{display:none}`;
 class TreeItem extends LitElement {
   constructor() {
     super();

package/dist/components/resources.d.ts

@@ -5,3 +5,9 @@ export declare const KindIcons: {
     readonly success: "checkCircle";
     readonly warning: "exclamationMarkTriangle";
 };
+export declare const KindIconsFilled: {
+    readonly danger: "exclamationMarkTriangleF";
+    readonly info: "informationF";
+    readonly success: "checkCircleF";
+    readonly warning: "exclamationMarkTriangleF";
+};

package/dist/custom-theme/notice.d.ts

@@ -1,5 +1,6 @@
 export declare const noticeTokens: {
     calciteNoticeBackgroundColor: string;
+    calciteNoticeBorderColor: string;
     calciteNoticeCloseBackgroundColorFocus: string;
     calciteNoticeCloseBackgroundColorPress: string;
     calciteNoticeCloseTextColorHover: string;

package/dist/docs/api.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-12-08T23:43:19",
+  "timestamp": "2025-12-10T23:39:51",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
     "version": "5.0.0-next.76",
@@ -896,7 +896,6 @@
                 ]
               },
               "default": "\"transparent\"",
-              "deprecated": "in v5.0.0, removal target v6.0.0 - No longer necessary.",
               "attribute": "appearance",
               "reflects": true
             },
@@ -1303,8 +1302,7 @@
                 ]
               },
               "default": "\"transparent\"",
-              "fieldName": "appearance",
-              "deprecated": "in v5.0.0, removal target v6.0.0 - No longer necessary."
+              "fieldName": "appearance"
             },
             {
               "name": "compact",
@@ -15053,7 +15051,12 @@
                   }
                 ]
               },
-              "attribute": "heading"
+              "attribute": "heading",
+              "docsTags": [
+                {
+                  "name": "required"
+                }
+              ]
             },
             {
               "kind": "field",
@@ -15141,22 +15144,6 @@
               },
               "attribute": "short-heading"
             },
-            {
-              "kind": "field",
-              "name": "textLabel",
-              "description": "The component's text.",
-              "type": {
-                "text": "string",
-                "values": [
-                  {
-                    "type": "string"
-                  }
-                ]
-              },
-              "deprecated": "in v2.12.0, removal target v5.0.0 - Use the `heading` property instead.",
-              "attribute": "text-label",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "value",
@@ -15169,12 +15156,7 @@
                   }
                 ]
               },
-              "attribute": "value",
-              "docsTags": [
-                {
-                  "name": "required"
-                }
-              ]
+              "attribute": "value"
             }
           ],
           "attributes": [
@@ -15329,20 +15311,6 @@
               },
               "fieldName": "shortHeading"
             },
-            {
-              "name": "text-label",
-              "description": "The component's text.",
-              "type": {
-                "text": "string",
-                "values": [
-                  {
-                    "type": "string"
-                  }
-                ]
-              },
-              "fieldName": "textLabel",
-              "deprecated": "in v2.12.0, removal target v5.0.0 - Use the `heading` property instead."
-            },
             {
               "name": "value",
               "description": "The component's value.",
@@ -26330,6 +26298,7 @@
           "customElement": true,
           "name": "InputMessage",
           "tagName": "calcite-input-message",
+          "deprecated": "in v5.0.0, removal target v6.0.0 - Use the `calcite-notice` component with `appearance=\"transparent\"` instead.",
           "superclass": {
             "name": "LitElement",
             "package": "@arcgis/lumina"
@@ -36282,6 +36251,27 @@
           "pascalCaseName": "CalciteNotice",
           "importPath": "components/calcite-notice",
           "members": [
+            {
+              "kind": "field",
+              "name": "appearance",
+              "description": "Specifies the appearance of the component.",
+              "type": {
+                "text": "\"outline-fill\" | \"transparent\"",
+                "values": [
+                  {
+                    "value": "outline-fill",
+                    "type": "string"
+                  },
+                  {
+                    "value": "transparent",
+                    "type": "string"
+                  }
+                ]
+              },
+              "default": "\"outline-fill\"",
+              "attribute": "appearance",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "closable",
@@ -36375,7 +36365,7 @@
               "name": "kind",
               "description": "Specifies the kind of the component, which will apply to top border and icon.",
               "type": {
-                "text": "\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
+                "text": "\"brand\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
                 "values": [
                   {
                     "value": "brand",
@@ -36389,6 +36379,10 @@
                     "value": "info",
                     "type": "string"
                   },
+                  {
+                    "value": "neutral",
+                    "type": "string"
+                  },
                   {
                     "value": "success",
                     "type": "string"
@@ -36527,6 +36521,25 @@
             }
           ],
           "attributes": [
+            {
+              "name": "appearance",
+              "description": "Specifies the appearance of the component.",
+              "type": {
+                "text": "\"outline-fill\" | \"transparent\"",
+                "values": [
+                  {
+                    "value": "outline-fill",
+                    "type": "string"
+                  },
+                  {
+                    "value": "transparent",
+                    "type": "string"
+                  }
+                ]
+              },
+              "default": "\"outline-fill\"",
+              "fieldName": "appearance"
+            },
             {
               "name": "closable",
               "description": "When `true`, a close button is added to the component.",
@@ -36572,7 +36585,7 @@
               "name": "kind",
               "description": "Specifies the kind of the component, which will apply to top border and icon.",
               "type": {
-                "text": "\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
+                "text": "\"brand\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
                 "values": [
                   {
                     "value": "brand",
@@ -36586,6 +36599,10 @@
                     "value": "info",
                     "type": "string"
                   },
+                  {
+                    "value": "neutral",
+                    "type": "string"
+                  },
                   {
                     "value": "success",
                     "type": "string"
@@ -36715,15 +36732,23 @@
           "cssProperties": [
             {
               "name": "--calcite-notice-background-color",
-              "description": "Specifies the component's background color."
+              "description": "Specifies the component's background color when `appearance=\"outline-fill\"`."
+            },
+            {
+              "name": "--calcite-notice-border-color",
+              "description": "Specifies the component's border color when `appearance=\"outline-fill\"`."
+            },
+            {
+              "name": "--calcite-notice-close-background-color",
+              "description": "Specifies the background color of the component's close button."
             },
             {
               "name": "--calcite-notice-close-background-color-focus",
-              "description": "Specifies the component's background color when focused."
+              "description": "Specifies the background color of the component's close button when focused or hovered."
             },
             {
               "name": "--calcite-notice-close-background-color-press",
-              "description": "Specifies the component's background color when active."
+              "description": "Specifies the background color of the component's close button when active."
             },
             {
               "name": "--calcite-notice-close-icon-color-hover",

package/dist/docs/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-12-08T23:43:19",
+  "timestamp": "2025-12-10T23:39:51",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
     "version": "5.0.0-next.76",
@@ -774,7 +774,6 @@
           "docs": "Specifies the appearance of the component.",
           "docsTags": [],
           "default": "\"transparent\"",
-          "deprecation": "in v5.0.0, removal target v6.0.0 - No longer necessary.",
           "values": [
             {
               "value": "solid",
@@ -12614,14 +12613,18 @@
           "attr": "heading",
           "reflectToAttr": false,
           "docs": "The component's text.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "required"
+            }
+          ],
           "values": [
             {
               "type": "string"
             }
           ],
-          "optional": true,
-          "required": false
+          "optional": false,
+          "required": true
         },
         {
           "name": "icon",
@@ -12748,28 +12751,6 @@
           "optional": true,
           "required": false
         },
-        {
-          "name": "textLabel",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": true,
-          "attr": "text-label",
-          "reflectToAttr": true,
-          "docs": "The component's text.",
-          "docsTags": [],
-          "deprecation": "in v2.12.0, removal target v5.0.0 - Use the `heading` property instead.",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": true,
-          "required": false
-        },
         {
           "name": "value",
           "type": "any",
@@ -12782,18 +12763,14 @@
           "attr": "value",
           "reflectToAttr": false,
           "docs": "The component's value.",
-          "docsTags": [
-            {
-              "name": "required"
-            }
-          ],
+          "docsTags": [],
           "values": [
             {
               "type": "any"
             }
           ],
-          "optional": false,
-          "required": true
+          "optional": true,
+          "required": false
         }
       ],
       "methods": [
@@ -22301,6 +22278,7 @@
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {},
+      "deprecation": "in v5.0.0, removal target v6.0.0 - Use the `calcite-notice` component with `appearance=\"transparent\"` instead.",
       "props": [
         {
           "name": "icon",
@@ -30635,6 +30613,33 @@
       "dependencies": [],
       "dependencyGraph": {},
       "props": [
+        {
+          "name": "appearance",
+          "type": "\"outline-fill\" | \"transparent\"",
+          "complexType": {
+            "original": "\"outline-fill\" | \"transparent\"",
+            "resolved": "\"outline-fill\" | \"transparent\"",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "appearance",
+          "reflectToAttr": true,
+          "docs": "Specifies the appearance of the component.",
+          "docsTags": [],
+          "default": "\"outline-fill\"",
+          "values": [
+            {
+              "value": "outline-fill",
+              "type": "string"
+            },
+            {
+              "value": "transparent",
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "closable",
           "type": "boolean",
@@ -30711,10 +30716,10 @@
         },
         {
           "name": "kind",
-          "type": "\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
+          "type": "\"brand\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
           "complexType": {
-            "original": "\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
-            "resolved": "\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
+            "original": "\"brand\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+            "resolved": "\"brand\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
             "references": {}
           },
           "mutable": true,
@@ -30736,6 +30741,10 @@
               "value": "info",
               "type": "string"
             },
+            {
+              "value": "neutral",
+              "type": "string"
+            },
             {
               "value": "success",
               "type": "string"
@@ -30994,17 +31003,27 @@
         {
           "name": "--calcite-notice-background-color",
           "annotation": "prop",
-          "docs": "Specifies the component's background color."
+          "docs": "Specifies the component's background color when `appearance=\"outline-fill\"`."
+        },
+        {
+          "name": "--calcite-notice-border-color",
+          "annotation": "prop",
+          "docs": "Specifies the component's border color when `appearance=\"outline-fill\"`."
+        },
+        {
+          "name": "--calcite-notice-close-background-color",
+          "annotation": "prop",
+          "docs": "Specifies the background color of the component's close button."
         },
         {
           "name": "--calcite-notice-close-background-color-focus",
           "annotation": "prop",
-          "docs": "Specifies the component's background color when focused."
+          "docs": "Specifies the background color of the component's close button when focused or hovered."
         },
         {
           "name": "--calcite-notice-close-background-color-press",
           "annotation": "prop",
-          "docs": "Specifies the component's background color when active."
+          "docs": "Specifies the background color of the component's close button when active."
         },
         {
           "name": "--calcite-notice-close-icon-color-hover",

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

@@ -1856,15 +1856,23 @@
     },
     {
       "name": "--calcite-notice-background-color",
-      "description": "Specifies the component's background color."
+      "description": "Specifies the component's background color when `appearance=\"outline-fill\"`."
+    },
+    {
+      "name": "--calcite-notice-border-color",
+      "description": "Specifies the component's border color when `appearance=\"outline-fill\"`."
+    },
+    {
+      "name": "--calcite-notice-close-background-color",
+      "description": "Specifies the background color of the component's close button."
     },
     {
       "name": "--calcite-notice-close-background-color-focus",
-      "description": "Specifies the component's background color when focused."
+      "description": "Specifies the background color of the component's close button when focused or hovered."
     },
     {
       "name": "--calcite-notice-close-background-color-press",
-      "description": "Specifies the component's background color when active."
+      "description": "Specifies the background color of the component's close button when active."
     },
     {
       "name": "--calcite-notice-close-icon-color-hover",

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

@@ -175,7 +175,7 @@
         },
         {
           "name": "appearance",
-          "description": "**Deprecated**: in v5.0.0, removal target v6.0.0 - No longer necessary.. Specifies the appearance of the component.",
+          "description": "Specifies the appearance of the component.",
           "values": [
             {
               "name": "solid"
@@ -2590,11 +2590,6 @@
           "description": "The component's short heading.\n\nWhen provided, the short heading will be displayed in the component's selection.\n\nIt is recommended to use 5 characters or fewer.",
           "values": []
         },
-        {
-          "name": "text-label",
-          "description": "**Deprecated**: in v2.12.0, removal target v5.0.0 - Use the `heading` property instead.. The component's text.",
-          "values": []
-        },
         {
           "name": "value",
           "description": "The component's value.",
@@ -4277,7 +4272,7 @@
     },
     {
       "name": "calcite-input-message",
-      "description": "### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding text.\n\n### CSS Properties\n- **--calcite-input-message-spacing-value** - [Deprecated] Use `--calcite-input-message-spacing`. Specifies the margin spacing at the top of the component. \n- **--calcite-input-message-spacing** - Specifies the margin spacing at the top of the component. \n- **--calcite-input-message-icon-color** - Specifies the component's icon color. ",
+      "description": "**Deprecated**: in v5.0.0, removal target v6.0.0 - Use the `calcite-notice` component with `appearance=\"transparent\"` instead..\n--\n\n### Methods\n- `componentOnReady(): Promise<void>` - Create a promise that resolves once component is fully loaded.\n\n### Slots\n- _default_ - A slot for adding text.\n\n### CSS Properties\n- **--calcite-input-message-spacing-value** - [Deprecated] Use `--calcite-input-message-spacing`. Specifies the margin spacing at the top of the component. \n- **--calcite-input-message-spacing** - Specifies the margin spacing at the top of the component. \n- **--calcite-input-message-icon-color** - Specifies the component's icon color. ",
       "attributes": [
         {
           "name": "icon",
@@ -5886,8 +5881,20 @@
     },
     {
       "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. \n- **--calcite-notice-close-background-color-focus** - Specifies the component's background color when focused. \n- **--calcite-notice-close-background-color-press** - Specifies the component's background color 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-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",
+          "description": "Specifies the appearance of the component.",
+          "values": [
+            {
+              "name": "outline-fill"
+            },
+            {
+              "name": "transparent"
+            }
+          ]
+        },
         {
           "name": "closable",
           "description": "When `true`, a close button is added to the component.",
@@ -5916,6 +5923,9 @@
             {
               "name": "info"
             },
+            {
+              "name": "neutral"
+            },
             {
               "name": "success"
             },