@umbraco-ui/uui 1.1.0 → 1.2.0-rc.1

package/custom-elements.json

@@ -218,7 +218,7 @@
           "description": "header area, use this for things that is not the headline but located in the header."
         },
         {
-          "name": "default",
+          "name": "",
           "description": "area for the content of the box"
         }
       ],
@@ -1257,53 +1257,693 @@
           "default": "\"''\""
         },
         {
-          "name": "value",
-          "attribute": "value",
-          "description": "intentional overwrite of FormControlMixins value getter and setter method.",
-          "type": "string",
-          "default": "\"''\""
+          "name": "value",
+          "attribute": "value",
+          "description": "intentional overwrite of FormControlMixins value getter and setter method.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "pristine",
+          "attribute": "pristine",
+          "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "required",
+          "attribute": "required",
+          "description": "Apply validation rule for requiring a value of this form control.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "requiredMessage",
+          "attribute": "required-message",
+          "description": "Required validation message.",
+          "type": "string",
+          "default": "\"This field is required\""
+        },
+        {
+          "name": "error",
+          "attribute": "error",
+          "description": "Apply custom error on this input.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "errorMessage",
+          "attribute": "error-message",
+          "description": "Custom error message.",
+          "type": "string",
+          "default": "\"This field is invalid\""
+        },
+        {
+          "name": "validity",
+          "type": "ValidityState"
+        },
+        {
+          "name": "validationMessage"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
+          "type": "string"
+        }
+      ],
+      "events": [
+        {
+          "name": "change",
+          "description": "fires when the element is begin checked by a user action"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Override the default label"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--uui-checkbox-size",
+          "description": "To set the size of the checkbox."
+        }
+      ]
+    },
+    {
+      "name": "uui-color-area",
+      "path": "./../uui-color-area/lib/uui-color-area.element.ts",
+      "attributes": [
+        {
+          "name": "hue",
+          "description": "The current hue.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "saturation",
+          "description": "The current saturation.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "lightness",
+          "description": "The current lightness.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "brightness",
+          "description": "The current brightness.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "alpha",
+          "description": "The current alpha.",
+          "type": "number",
+          "default": "\"100\""
+        },
+        {
+          "name": "value",
+          "description": "The current value.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the color area.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
+        {
+          "name": "hue",
+          "attribute": "hue",
+          "description": "The current hue.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "saturation",
+          "attribute": "saturation",
+          "description": "The current saturation.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "lightness",
+          "attribute": "lightness",
+          "description": "The current lightness.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "brightness",
+          "attribute": "brightness",
+          "description": "The current brightness.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "alpha",
+          "attribute": "alpha",
+          "description": "The current alpha.",
+          "type": "number",
+          "default": "\"100\""
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "The current value.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the color area.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--uui-color-area-grid-handle-size",
+          "description": "The size of the handle in the grid"
+        }
+      ]
+    },
+    {
+      "name": "uui-color-picker",
+      "path": "./../uui-color-picker/lib/uui-color-picker.element.ts",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The current color.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "format",
+          "description": "The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA\nrespectively. The color picker will always accept user input in any format (including CSS color names) and convert\nit to the desired format.",
+          "type": "UUIColorPickerFormat",
+          "default": "\"'hex'\""
+        },
+        {
+          "name": "name",
+          "description": "The input's name attribute.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "size",
+          "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
+          "type": "UUIColorPickerSize",
+          "default": "\"'medium'\""
+        },
+        {
+          "name": "no-format-toggle",
+          "description": "Removes the format toggle.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "inline",
+          "description": "Renders the color picker inline rather than inside a dropdown.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the color picker.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "opacity",
+          "description": "Whether to show the opacity slider.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "uppercase",
+          "description": "By default, the value will be set in lowercase. Set this to true to set it in uppercase instead.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "The current color.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "format",
+          "attribute": "format",
+          "description": "The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA\nrespectively. The color picker will always accept user input in any format (including CSS color names) and convert\nit to the desired format.",
+          "type": "UUIColorPickerFormat",
+          "default": "\"'hex'\""
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "The input's name attribute.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "size",
+          "attribute": "size",
+          "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
+          "type": "UUIColorPickerSize",
+          "default": "\"'medium'\""
+        },
+        {
+          "name": "noFormatToggle",
+          "attribute": "no-format-toggle",
+          "description": "Removes the format toggle.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "inline",
+          "attribute": "inline",
+          "description": "Renders the color picker inline rather than inside a dropdown.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the color picker.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "opacity",
+          "attribute": "opacity",
+          "description": "Whether to show the opacity slider.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "uppercase",
+          "attribute": "uppercase",
+          "description": "By default, the value will be set in lowercase. Set this to true to set it in uppercase instead.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "swatches",
+          "description": "An array of predefined color swatches to display. Can include any format the color picker can parse, including\nHEX(A), RGB(A), HSL(A), and CSS color names.",
+          "type": "string[]",
+          "default": "[\"#d0021b\",\"#f5a623\",\"#f8e71c\",\"#8b572a\",\"#7ed321\",\"#417505\",\"#bd10e0\",\"#9013fe\",\"#4a90e2\",\"#50e3c2\",\"#b8e986\",\"#000\",\"#444\",\"#888\",\"#ccc\",\"#fff\"]"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
+          "type": "string"
+        }
+      ],
+      "events": [
+        {
+          "name": "change",
+          "description": "Fired when the color changes"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Override the default label"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--uui-color-picker-width",
+          "description": "The width of the color picker"
+        }
+      ]
+    },
+    {
+      "name": "uui-color-slider",
+      "path": "./../uui-color-slider/lib/uui-color-slider.element.ts",
+      "attributes": [
+        {
+          "name": "type",
+          "description": "The type of the slider.",
+          "type": "UUIColorSliderType",
+          "default": "\"'hue'\""
+        },
+        {
+          "name": "color",
+          "description": "The color value.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "min",
+          "description": "This is a minimum value of the slider.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "max",
+          "description": "This is a maximum value of the slider.",
+          "type": "number",
+          "default": "\"100\""
+        },
+        {
+          "name": "precision",
+          "description": "The minimum increment value allowed by the slider.",
+          "type": "number",
+          "default": "1"
+        },
+        {
+          "name": "vertical",
+          "description": "Draws the slider in a vertical orientation.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "value",
+          "description": "The current value of the slider.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the color slider.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
+        {
+          "name": "type",
+          "attribute": "type",
+          "description": "The type of the slider.",
+          "type": "UUIColorSliderType",
+          "default": "\"'hue'\""
+        },
+        {
+          "name": "color",
+          "attribute": "color",
+          "description": "The color value.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "min",
+          "attribute": "min",
+          "description": "This is a minimum value of the slider.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "max",
+          "attribute": "max",
+          "description": "This is a maximum value of the slider.",
+          "type": "number",
+          "default": "\"100\""
+        },
+        {
+          "name": "precision",
+          "attribute": "precision",
+          "description": "The minimum increment value allowed by the slider.",
+          "type": "number",
+          "default": "1"
+        },
+        {
+          "name": "vertical",
+          "attribute": "vertical",
+          "description": "Draws the slider in a vertical orientation.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "The current value of the slider.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the color slider.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "ccsPropCurrentValue",
+          "type": "number"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
+          "type": "string"
+        }
+      ],
+      "events": [
+        {
+          "name": "change",
+          "description": "Fires when the value of the slider changes."
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Override the default label"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--uui-slider-height",
+          "description": "The height of the slider."
+        },
+        {
+          "name": "--uui-slider-handle-size",
+          "description": "The size of the slider handle."
+        },
+        {
+          "name": "--uui-slider-background-image",
+          "description": "The background image of the slider."
+        },
+        {
+          "name": "--uui-slider-background-size",
+          "description": "The background size of the slider."
+        },
+        {
+          "name": "--uui-slider-background-position",
+          "description": "The background position of the slider."
+        }
+      ]
+    },
+    {
+      "name": "uui-color-swatch",
+      "path": "./../uui-color-swatch/lib/uui-color-swatch.element.ts",
+      "description": "Color swatch, can have label and be selectable. Depends on colord library and exposes it's utility functions under color property.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "Value of the swatch. Should be a valid hex, hexa, rgb, rgba, hsl or hsla string. Should fulfill this [css spec](https://www.w3.org/TR/css-color-4/#color-type). If not provided element will look at its text content.",
+          "type": " string ",
+          "default": "\"\\\"\\\"\""
+        },
+        {
+          "name": "disabled",
+          "description": "Determines if the options is disabled. If true the option can't be selected",
+          "type": " boolean ",
+          "default": "\"false\""
+        },
+        {
+          "name": "show-label",
+          "description": "When true shows element label below the color checkbox",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
+          "type": "string"
+        },
+        {
+          "name": "selectable",
+          "description": "Enable the ability to select this element.",
+          "type": "boolean"
+        },
+        {
+          "name": "selected",
+          "description": "Attribute applied when the element is selected.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "active",
+          "description": "Set this boolean to true for then the related composition is sorted.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Value of the swatch. Should be a valid hex, hexa, rgb, rgba, hsl or hsla string. Should fulfill this [css spec](https://www.w3.org/TR/css-color-4/#color-type). If not provided element will look at its text content.",
+          "type": " string ",
+          "default": "\"\\\"\\\"\""
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Determines if the options is disabled. If true the option can't be selected",
+          "type": " boolean ",
+          "default": "\"false\""
+        },
+        {
+          "name": "showLabel",
+          "attribute": "show-label",
+          "description": "When true shows element label below the color checkbox",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "color",
+          "description": "Colord object instance based on the value provided to the element. If the value is not a valid color, it falls back to black (like Amy Winehouse). For more information about Colord, see [Colord](https://omgovich.github.io/colord/)",
+          "type": "(Colord | null)"
+        },
+        {
+          "name": "isLight",
+          "description": "Returns true if the color brightness is >= 0.5",
+          "type": "boolean"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
+          "type": "string"
+        },
+        {
+          "name": "selectable",
+          "attribute": "selectable",
+          "description": "Enable the ability to select this element.",
+          "type": "boolean"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "Attribute applied when the element is selected.",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "pristine",
-          "attribute": "pristine",
-          "description": "Determines wether the form control has been touched or interacted with, this determines wether the validation-status of this form control should be made visible.",
+          "name": "active",
+          "attribute": "active",
+          "description": "Set this boolean to true for then the related composition is sorted.",
           "type": "boolean",
-          "default": "\"false\""
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "selected",
+          "description": "fires when the media card is selected"
         },
         {
-          "name": "required",
-          "attribute": "required",
-          "description": "Apply validation rule for requiring a value of this form control.",
-          "type": "boolean",
-          "default": "\"false\""
+          "name": "unselected",
+          "description": "fires when the media card is unselected"
+        }
+      ],
+      "slots": [
+        {
+          "name": "label",
+          "description": "Default slot for the label."
         },
         {
-          "name": "requiredMessage",
-          "attribute": "required-message",
-          "description": "Required validation message.",
-          "type": "string",
-          "default": "\"This field is required\""
+          "name": "",
+          "description": "Override the default label"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--uui-swatch-size",
+          "description": "The size of the swatch."
         },
         {
-          "name": "error",
-          "attribute": "error",
-          "description": "Apply custom error on this input.",
-          "type": "boolean",
-          "default": "false"
+          "name": "--uui-swatch-border-width",
+          "description": "The width of the border."
+        }
+      ]
+    },
+    {
+      "name": "uui-color-swatches",
+      "path": "./../uui-color-swatches/lib/uui-color-swatches.element.ts",
+      "description": "Put uui-stacked-color-swatch elements inside this element to create a color swatch selector.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "Value of selected option.",
+          "type": " string ",
+          "default": "\"\\\"\\\"\""
         },
         {
-          "name": "errorMessage",
-          "attribute": "error-message",
-          "description": "Custom error message.",
-          "type": "string",
-          "default": "\"This field is invalid\""
+          "name": "label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
         },
         {
-          "name": "validity",
-          "type": "ValidityState"
+          "name": "value",
+          "attribute": "value",
+          "description": "Value of selected option.",
+          "type": " string ",
+          "default": "\"\\\"\\\"\""
         },
         {
-          "name": "validationMessage"
+          "name": "swatches",
+          "type": "UUIColorSwatchElement[]"
         },
         {
           "name": "label",
@@ -1315,19 +1955,13 @@
       "events": [
         {
           "name": "change",
-          "description": "fires when the element is begin checked by a user action"
+          "description": "Fires when a color swatch is selected."
         }
       ],
       "slots": [
         {
           "name": "",
-          "description": "Override the default label"
-        }
-      ],
-      "cssProperties": [
-        {
-          "name": "--uui-checkbox-size",
-          "description": "To set the size of the checkbox."
+          "description": "Default slot for content."
         }
       ]
     },
@@ -1433,7 +2067,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "description": "For option content"
         }
       ]
@@ -1497,7 +2131,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "description": "for uui-combobox-list-options"
         }
       ]
@@ -1524,6 +2158,12 @@
           "type": " string ",
           "default": "\"\\\"Close\\\"\""
         },
+        {
+          "name": "disabled",
+          "description": "Disables the uui-combobox.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "name",
           "description": "This is a name property of the component.",
@@ -1594,6 +2234,13 @@
           "type": " string ",
           "default": "\"\\\"Close\\\"\""
         },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the uui-combobox.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "formAssociated",
           "description": "This is a static class field indicating that the element is can be used inside a native form and participate in its events.\nIt may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.\nRead more about form controls here https://web.dev/more-capable-form-controls/",
@@ -1669,7 +2316,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "description": "for uui-combobox-list-options"
         },
         {
@@ -3338,6 +3985,185 @@
         }
       ]
     },
+    {
+      "name": "modal-example",
+      "path": "./../uui-modal/lib/modal-example.element.ts",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"css`\\n    .sidebar-buttons {\\n      margin-top: auto;\\n      display: flex;\\n      align-items: center;\\n      justify-content: end;\\n      padding: 16px;\\n      background: var(--uui-color-surface);\\n      box-shadow: var(--uui-shadow-depth-4);\\n    }\\n  `\""
+        }
+      ]
+    },
+    {
+      "name": "uui-modal-dialog",
+      "path": "./../uui-modal/lib/uui-modal-dialog.element.ts",
+      "attributes": [
+        {
+          "name": "is-open",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "is-closing",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "index",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "unique-index",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "transitionDuration",
+          "type": "number"
+        }
+      ],
+      "properties": [
+        {
+          "name": "isOpen",
+          "attribute": "is-open",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "isClosing",
+          "attribute": "is-closing",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "index",
+          "attribute": "index",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "uniqueIndex",
+          "attribute": "unique-index",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "transitionDuration",
+          "attribute": "transitionDuration",
+          "type": "number"
+        },
+        {
+          "name": "open",
+          "type": "(event?: Event | undefined) => void",
+          "default": "\"(event?: Event) => {\\n    event?.preventDefault();\\n    event?.stopImmediatePropagation();\\n\\n    const openEvent = new CustomEvent('open', {\\n      bubbles: true,\\n      cancelable: true,\\n    });\\n\\n    this.dispatchEvent(openEvent);\\n    if (openEvent.defaultPrevented) return;\\n\\n    this._openModal();\\n  }\""
+        },
+        {
+          "name": "close",
+          "type": "(event?: Event | undefined) => void",
+          "default": "\"(event?: Event) => {\\n    event?.preventDefault();\\n    event?.stopImmediatePropagation();\\n\\n    const closeEvent = new CustomEvent('close', {\\n      bubbles: true,\\n      cancelable: true,\\n    });\\n    this.dispatchEvent(closeEvent);\\n\\n    if (closeEvent.defaultPrevented) return;\\n\\n    this._closeModal();\\n  }\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null,null]"
+        }
+      ],
+      "events": [
+        {
+          "name": "open"
+        },
+        {
+          "name": "close"
+        }
+      ]
+    },
+    {
+      "name": "uui-modal-sidebar",
+      "path": "./../uui-modal/lib/uui-modal-sidebar.element.ts",
+      "attributes": [
+        {
+          "name": "is-open",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "is-closing",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "index",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "unique-index",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "transitionDuration",
+          "type": "number"
+        }
+      ],
+      "properties": [
+        {
+          "name": "isOpen",
+          "attribute": "is-open",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "isClosing",
+          "attribute": "is-closing",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "index",
+          "attribute": "index",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "uniqueIndex",
+          "attribute": "unique-index",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "transitionDuration",
+          "attribute": "transitionDuration",
+          "type": "number"
+        },
+        {
+          "name": "open",
+          "type": "(event?: Event | undefined) => void",
+          "default": "\"(event?: Event) => {\\n    event?.preventDefault();\\n    event?.stopImmediatePropagation();\\n\\n    const openEvent = new CustomEvent('open', {\\n      bubbles: true,\\n      cancelable: true,\\n    });\\n\\n    this.dispatchEvent(openEvent);\\n    if (openEvent.defaultPrevented) return;\\n\\n    this._openModal();\\n  }\""
+        },
+        {
+          "name": "close",
+          "type": "(event?: Event | undefined) => void",
+          "default": "\"(event?: Event) => {\\n    event?.preventDefault();\\n    event?.stopImmediatePropagation();\\n\\n    const closeEvent = new CustomEvent('close', {\\n      bubbles: true,\\n      cancelable: true,\\n    });\\n    this.dispatchEvent(closeEvent);\\n\\n    if (closeEvent.defaultPrevented) return;\\n\\n    this._closeModal();\\n  }\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null,null]"
+        }
+      ],
+      "events": [
+        {
+          "name": "open"
+        },
+        {
+          "name": "close"
+        }
+      ]
+    },
     {
       "name": "uui-pagination",
       "path": "./../uui-pagination/lib/uui-pagination.element.ts",
@@ -3468,6 +4294,16 @@
         {
           "name": "trigger",
           "description": "The element that triggers the popover."
+        },
+        {
+          "name": "popover",
+          "description": "The content of the popover."
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--uui-popover-z-index",
+          "description": "overwrite the z-index of the popover container."
         }
       ]
     },
@@ -6057,7 +6893,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "description": "for label"
         },
         {
@@ -6067,10 +6903,6 @@
         {
           "name": "extra",
           "description": "for extra"
-        },
-        {
-          "name": "",
-          "description": "Override the default label"
         }
       ],
       "cssProperties": [
@@ -6174,7 +7006,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "description": "for label"
         },
         {
@@ -6184,10 +7016,6 @@
         {
           "name": "extra",
           "description": "for extra"
-        },
-        {
-          "name": "",
-          "description": "Override the default label"
         }
       ],
       "cssProperties": [
@@ -6513,12 +7341,29 @@
         {
           "name": "--uui-textarea-max-height",
           "description": "Sets the maximum height of the textarea"
+        },
+        {
+          "name": "--uui-textarea-background-color",
+          "description": "Sets the background color of the textarea",
+          "type": "color"
         }
       ]
     },
     {
       "name": "uui-toast-notification-container",
       "path": "./../uui-toast-notification-container/lib/uui-toast-notification-container.element.ts",
+      "attributes": [
+        {
+          "name": "bottom-up",
+          "description": "set the toast container to grow from bottom to top.",
+          "type": "boolean"
+        },
+        {
+          "name": "left-align",
+          "description": "set the toast container to align to the left.",
+          "type": "boolean"
+        }
+      ],
       "properties": [
         {
           "name": "styles",