@umbraco-ui/uui 1.0.2 → 1.2.0-rc.0

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"
         }
       ],
@@ -1299,11 +1299,651 @@
           "default": "\"This field is invalid\""
         },
         {
-          "name": "validity",
-          "type": "ValidityState"
+          "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": "active",
+          "attribute": "active",
+          "description": "Set this boolean to true for then the related composition is sorted.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "selected",
+          "description": "fires when the media card is selected"
+        },
+        {
+          "name": "unselected",
+          "description": "fires when the media card is unselected"
+        }
+      ],
+      "slots": [
+        {
+          "name": "label",
+          "description": "Default slot for the label."
+        },
+        {
+          "name": "",
+          "description": "Override the default label"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--uui-swatch-size",
+          "description": "The size of the swatch."
+        },
+        {
+          "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": "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": "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"
         }
       ]
@@ -1445,7 +2079,7 @@
         {
           "name": "value",
           "description": "Value of selected option.",
-          "type": " string ",
+          "type": " FormDataEntryValue | FormData ",
           "default": "\"\\\"\\\"\""
         },
         {
@@ -1471,7 +2105,7 @@
           "name": "value",
           "attribute": "value",
           "description": "Value of selected option.",
-          "type": " string ",
+          "type": " FormDataEntryValue | FormData ",
           "default": "\"\\\"\\\"\""
         },
         {
@@ -1497,7 +2131,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "description": "for uui-combobox-list-options"
         }
       ]
@@ -1669,7 +2303,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "description": "for uui-combobox-list-options"
         },
         {
@@ -3468,6 +4102,10 @@
         {
           "name": "trigger",
           "description": "The element that triggers the popover."
+        },
+        {
+          "name": "popover",
+          "description": "The content of the popover."
         }
       ]
     },
@@ -3723,6 +4361,251 @@
         }
       ]
     },
+    {
+      "name": "uui-range-slider",
+      "path": "./../uui-range-slider/lib/uui-range-slider.element.ts",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Disables the input.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "label",
+          "description": "Label to be used for aria-label and eventually as visual label. Adds \" low value\" and \" high value\" endings for the two values.",
+          "type": "string"
+        },
+        {
+          "name": "step",
+          "description": "This reflects the behavior of a native input step attribute.",
+          "type": "number",
+          "default": "\"1\""
+        },
+        {
+          "name": "hide-step-values",
+          "description": "Hides the numbers representing the value of each steps. Dots will still be visible",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "min",
+          "description": "Sets the minimum allowed value.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "max",
+          "description": "Sets the maximum allowed value.",
+          "type": "number",
+          "default": "\"100\""
+        },
+        {
+          "name": "value-low",
+          "description": "The lower picked value.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "value-high",
+          "description": "The higher picked value.",
+          "type": "number",
+          "default": "\"100\""
+        },
+        {
+          "name": "min-gap",
+          "description": "Minimum value gap between the the two picked values. Cannot be lower than the step value and cannot be higher than the maximum gap",
+          "type": "number",
+          "default": "\"1\""
+        },
+        {
+          "name": "max-gap",
+          "description": "Maximum value gap between the the two picked values. Cannot be lower than the minimum gap.",
+          "type": "number",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "name",
+          "description": "This is a name property of the component.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "value",
+          "description": "This is a value property of the uui-range-slider. Split the two values with comma, forexample 10,50 sets the values to 10 and 50.",
+          "type": "string",
+          "default": "\"0,100\""
+        },
+        {
+          "name": "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",
+          "description": "Apply validation rule for requiring a value of this form control.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "required-message",
+          "description": "Required validation message.",
+          "type": "string",
+          "default": "\"This field is required\""
+        },
+        {
+          "name": "error",
+          "description": "Apply custom error on this input.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "error-message",
+          "description": "Custom error message.",
+          "type": "string",
+          "default": "\"This field is invalid\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[\"UUIHorizontalPulseKeyframes\",null]"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the input.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Label to be used for aria-label and eventually as visual label. Adds \" low value\" and \" high value\" endings for the two values.",
+          "type": "string"
+        },
+        {
+          "name": "step",
+          "attribute": "step",
+          "description": "This reflects the behavior of a native input step attribute.",
+          "type": "number",
+          "default": "\"1\""
+        },
+        {
+          "name": "hideStepValues",
+          "attribute": "hide-step-values",
+          "description": "Hides the numbers representing the value of each steps. Dots will still be visible",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "min",
+          "attribute": "min",
+          "description": "Sets the minimum allowed value.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "max",
+          "attribute": "max",
+          "description": "Sets the maximum allowed value.",
+          "type": "number",
+          "default": "\"100\""
+        },
+        {
+          "name": "valueLow",
+          "attribute": "value-low",
+          "description": "The lower picked value.",
+          "type": "number",
+          "default": "\"0\""
+        },
+        {
+          "name": "valueHigh",
+          "attribute": "value-high",
+          "description": "The higher picked value.",
+          "type": "number",
+          "default": "\"100\""
+        },
+        {
+          "name": "minGap",
+          "attribute": "min-gap",
+          "description": "Minimum value gap between the the two picked values. Cannot be lower than the step value and cannot be higher than the maximum gap",
+          "type": "number",
+          "default": "\"1\""
+        },
+        {
+          "name": "maxGap",
+          "attribute": "max-gap",
+          "description": "Maximum value gap between the the two picked values. Cannot be lower than the minimum gap.",
+          "type": "number",
+          "default": "\"undefined\""
+        },
+        {
+          "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/",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "This is a name property of the component.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "This is a value property of the uui-range-slider. Split the two values with comma, forexample 10,50 sets the values to 10 and 50.",
+          "type": "string",
+          "default": "\"0,100\""
+        },
+        {
+          "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": "uui-ref-list",
       "path": "./../uui-ref-list/lib/uui-ref-list.element.ts",
@@ -5812,7 +6695,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "description": "for label"
         },
         {
@@ -5822,10 +6705,6 @@
         {
           "name": "extra",
           "description": "for extra"
-        },
-        {
-          "name": "",
-          "description": "Override the default label"
         }
       ],
       "cssProperties": [
@@ -5929,7 +6808,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "description": "for label"
         },
         {
@@ -5939,10 +6818,6 @@
         {
           "name": "extra",
           "description": "for extra"
-        },
-        {
-          "name": "",
-          "description": "Override the default label"
         }
       ],
       "cssProperties": [
@@ -6268,12 +7143,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",