npm - @umbraco-ui/uui - Versions diffs - 1.10.1 → 1.12.0 - Mend

@umbraco-ui/uui 1.10.1 → 1.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/custom-elements.json +330 -224
package/dist/uui.min.js +141 -86
package/dist/uui.min.js.map +1 -1
package/package.json +84 -84
package/vscode-html-custom-data.json +160 -110

package/custom-elements.json CHANGED Viewed

@@ -49,6 +49,12 @@
           "name": "",
           "description": "Insert the `<uui-avatar>` elements in the default slot"
         }
+      ],
+      "cssProperties": [
+        {
+          "name": "--uui-avatar-border-color",
+          "description": "Border color of the avatars"
+        }
       ]
     },
     {
@@ -443,7 +449,7 @@
         {
           "name": "type",
           "description": "Specifies the type of button",
-          "type": " \"submit\" | \"button\" | \"reset\" ",
+          "type": "\"submit\" | \"button\" | \"reset\"",
           "default": "\"\\\"button\\\"\""
         },
         {
@@ -472,7 +478,7 @@
         },
         {
           "name": "state",
-          "description": "Sets the state of the button. With waiting state a loader will show, the success state and fail states display icons. State is reset do default automatically after 3 seconds.",
+          "description": "Sets the state of the button. With waiting state a loader will show, the success and fail states display icons. State is automatically reset to the default after 3 seconds.",
           "type": "undefined |'waiting' | 'success' | 'failed'",
           "default": "\"undefined\""
         },
@@ -506,12 +512,6 @@
           "type": "string",
           "default": "\"''\""
         },
-        {
-          "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": "\"true\""
-        },
         {
           "name": "required",
           "description": "Apply validation rule for requiring a value of this form control.",
@@ -536,6 +536,12 @@
           "type": "string",
           "default": "\"This field is invalid\""
         },
+        {
+          "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": "\"true\""
+        },
         {
           "name": "label",
           "description": "label to be used for aria-label and potentially as visual label for some components",
@@ -553,7 +559,7 @@
           "name": "type",
           "attribute": "type",
           "description": "Specifies the type of button",
-          "type": " \"submit\" | \"button\" | \"reset\" ",
+          "type": "\"submit\" | \"button\" | \"reset\"",
           "default": "\"\\\"button\\\"\""
         },
         {
@@ -587,7 +593,7 @@
         {
           "name": "state",
           "attribute": "state",
-          "description": "Sets the state of the button. With waiting state a loader will show, the success state and fail states display icons. State is reset do default automatically after 3 seconds.",
+          "description": "Sets the state of the button. With waiting state a loader will show, the success and fail states display icons. State is automatically reset to the default after 3 seconds.",
           "type": "undefined |'waiting' | 'success' | 'failed'",
           "default": "\"undefined\""
         },
@@ -637,13 +643,6 @@
           "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": "\"true\""
-        },
         {
           "name": "required",
           "attribute": "required",
@@ -680,6 +679,13 @@
           "name": "validationMessage",
           "type": "string"
         },
+        {
+          "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": "\"true\""
+        },
         {
           "name": "label",
           "attribute": "label",
@@ -967,6 +973,12 @@
           "type": "string",
           "default": "\"''\""
         },
+        {
+          "name": "detail",
+          "description": "Node details",
+          "type": "string",
+          "default": "\"''\""
+        },
         {
           "name": "disabled",
           "description": "Set to true to prevent opening of this item.\nThis does not prevent selection, selection is controlled by property 'selectable'",
@@ -1022,6 +1034,13 @@
           "type": "string",
           "default": "\"''\""
         },
+        {
+          "name": "detail",
+          "attribute": "detail",
+          "description": "Node details",
+          "type": "string",
+          "default": "\"''\""
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
@@ -1125,6 +1144,12 @@
           "type": "string",
           "default": "\"''\""
         },
+        {
+          "name": "detail",
+          "description": "Media detail",
+          "type": "string",
+          "default": "\"''\""
+        },
         {
           "name": "file-ext",
           "description": "Media file extension, without \".\"",
@@ -1186,6 +1211,13 @@
           "type": "string",
           "default": "\"''\""
         },
+        {
+          "name": "detail",
+          "attribute": "detail",
+          "description": "Media detail",
+          "type": "string",
+          "default": "\"''\""
+        },
         {
           "name": "fileExt",
           "attribute": "file-ext",
@@ -1439,6 +1471,7 @@
     {
       "name": "uui-card",
       "path": "./../uui-card/lib/uui-card.element.ts",
+      "description": "Card is a Component that provides the basics for a Card component. This can be extended in code to match a certain need.",
       "attributes": [
         {
           "name": "disabled",
@@ -1645,12 +1678,6 @@
           "type": "string",
           "default": "\"''\""
         },
-        {
-          "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": "\"true\""
-        },
         {
           "name": "required",
           "description": "Apply validation rule for requiring a value of this form control.",
@@ -1675,6 +1702,12 @@
           "type": "string",
           "default": "\"This field is invalid\""
         },
+        {
+          "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": "\"true\""
+        },
         {
           "name": "label",
           "description": "Label to be used for aria-label and potentially as visual label for some components",
@@ -1742,13 +1775,6 @@
           "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": "\"true\""
-        },
         {
           "name": "required",
           "attribute": "required",
@@ -1785,6 +1811,13 @@
           "name": "validationMessage",
           "type": "string"
         },
+        {
+          "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": "\"true\""
+        },
         {
           "name": "label",
           "attribute": "label",
@@ -1809,6 +1842,18 @@
       "name": "uui-color-area",
       "path": "./../uui-color-area/lib/uui-color-area.element.ts",
       "attributes": [
+        {
+          "name": "disabled",
+          "description": "Sets the color area to disabled.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "readonly",
+          "description": "Sets the color area to readonly mode.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "hue",
           "description": "The current hue.",
@@ -1843,15 +1888,23 @@
           "name": "value",
           "description": "The current value.",
           "type": "string"
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the color area.",
-          "type": "boolean",
-          "default": "false"
         }
       ],
       "properties": [
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Sets the color area to disabled.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Sets the color area to readonly mode.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "hue",
           "attribute": "hue",
@@ -1893,13 +1946,6 @@
           "description": "The current value.",
           "type": "string"
         },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Disables the color area.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "styles",
           "type": "CSSResult[]",
@@ -1955,7 +2001,7 @@
         },
         {
           "name": "disabled",
-          "description": "Disables the color picker.",
+          "description": "Sets the color picker to disabled.",
           "type": "boolean",
           "default": "\"false\""
         },
@@ -1965,6 +2011,12 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "readonly",
+          "description": "Sets the color picker to readonly mode.",
+          "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.",
@@ -2023,7 +2075,7 @@
         {
           "name": "disabled",
           "attribute": "disabled",
-          "description": "Disables the color picker.",
+          "description": "Sets the color picker to disabled.",
           "type": "boolean",
           "default": "\"false\""
         },
@@ -2034,6 +2086,13 @@
           "type": "boolean",
           "default": "\"false\""
         },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Sets the color picker to readonly mode.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "uppercase",
           "attribute": "uppercase",
@@ -2118,9 +2177,15 @@
           "type": "number",
           "default": "\"0\""
         },
+        {
+          "name": "readonly",
+          "description": "Sets the color slider to readonly mode.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "disabled",
-          "description": "Disables the color slider.",
+          "description": "Sets the color slider to disabled.",
           "type": "boolean",
           "default": "\"false\""
         },
@@ -2180,10 +2245,17 @@
           "type": "number",
           "default": "\"0\""
         },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Sets the color slider to readonly mode.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "disabled",
           "attribute": "disabled",
-          "description": "Disables the color slider.",
+          "description": "Sets the color slider to disabled.",
           "type": "boolean",
           "default": "\"false\""
         },
@@ -2235,7 +2307,7 @@
     {
       "name": "uui-color-swatch",
       "path": "./../uui-color-swatch/lib/uui-color-swatch.element.ts",
-      "description": "Color swatch, can have label and be selectable.",
+      "description": "Color swatch, can have label and be selectable, disabled or readonly.",
       "attributes": [
         {
           "name": "value",
@@ -2249,9 +2321,15 @@
         },
         {
           "name": "disabled",
-          "description": "Determines if the options is disabled. If true the option can't be selected",
+          "description": "Sets the swatch to disabled.",
           "type": "boolean",
-          "default": "false"
+          "default": "\"false\""
+        },
+        {
+          "name": "readonly",
+          "description": "Sets the swatch to readonly mode.",
+          "type": "boolean",
+          "default": "\"false\""
         },
         {
           "name": "show-label",
@@ -2298,9 +2376,16 @@
         {
           "name": "disabled",
           "attribute": "disabled",
-          "description": "Determines if the options is disabled. If true the option can't be selected",
+          "description": "Sets the swatch to disabled.",
           "type": "boolean",
-          "default": "false"
+          "default": "\"false\""
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Sets the swatch to readonly mode.",
+          "type": "boolean",
+          "default": "\"false\""
         },
         {
           "name": "showLabel",
@@ -2375,7 +2460,7 @@
     {
       "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.",
+      "description": "Put uui-color-swatch elements inside this element to create a color swatch selector.",
       "attributes": [
         {
           "name": "value",
@@ -2385,7 +2470,13 @@
         },
         {
           "name": "disabled",
-          "description": "Disables the color swatches.",
+          "description": "Sets the swatches to disabled.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "readonly",
+          "description": "Sets the swatches to readonly mode.",
           "type": "boolean",
           "default": "\"false\""
         },
@@ -2406,13 +2497,16 @@
         {
           "name": "disabled",
           "attribute": "disabled",
-          "description": "Disables the color swatches.",
+          "description": "Sets the swatches to disabled.",
           "type": "boolean",
           "default": "\"false\""
         },
         {
-          "name": "swatches",
-          "type": "UUIColorSwatchElement[]"
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Sets the swatches to readonly mode.",
+          "type": "boolean",
+          "default": "\"false\""
         },
         {
           "name": "styles",
@@ -2446,19 +2540,19 @@
         {
           "name": "value",
           "description": "Value of the option.",
-          "type": " string ",
+          "type": "string",
           "default": "\"\\\"\\\"\""
         },
         {
           "name": "display-value",
           "description": "A readable value.",
-          "type": " string ",
+          "type": "string",
           "default": "\"\\\"\\\"\""
         },
         {
           "name": "disabled",
           "description": "Determines if the options is disabled. If true the option can't be selected",
-          "type": " boolean ",
+          "type": "boolean",
           "default": "\"false\""
         },
         {
@@ -2485,21 +2579,21 @@
           "name": "value",
           "attribute": "value",
           "description": "Value of the option.",
-          "type": " string ",
+          "type": "string",
           "default": "\"\\\"\\\"\""
         },
         {
           "name": "displayValue",
           "attribute": "display-value",
           "description": "A readable value.",
-          "type": " string ",
+          "type": "string",
           "default": "\"\\\"\\\"\""
         },
         {
           "name": "disabled",
           "attribute": "disabled",
           "description": "Determines if the options is disabled. If true the option can't be selected",
-          "type": " boolean ",
+          "type": "boolean",
           "default": "\"false\""
         },
         {
@@ -2553,19 +2647,19 @@
         {
           "name": "value",
           "description": "Value of selected option.",
-          "type": " FormDataEntryValue | FormData ",
+          "type": "FormDataEntryValue | FormData",
           "default": "\"\\\"\\\"\""
         },
         {
           "name": "displayValue",
           "description": "A readable value to display to show the selected value.",
-          "type": " string ",
+          "type": "string",
           "default": "\"\\\"\\\"\""
         },
         {
           "name": "for",
           "description": "provide another element of which keyboard navigation",
-          "type": " HTMLElement ",
+          "type": "HTMLElement",
           "default": "\"this\""
         }
       ],
@@ -2574,21 +2668,21 @@
           "name": "value",
           "attribute": "value",
           "description": "Value of selected option.",
-          "type": " FormDataEntryValue | FormData ",
+          "type": "FormDataEntryValue | FormData",
           "default": "\"\\\"\\\"\""
         },
         {
           "name": "displayValue",
           "attribute": "displayValue",
           "description": "A readable value to display to show the selected value.",
-          "type": " string ",
+          "type": "string",
           "default": "\"\\\"\\\"\""
         },
         {
           "name": "for",
           "attribute": "for",
           "description": "provide another element of which keyboard navigation",
-          "type": " HTMLElement ",
+          "type": "HTMLElement",
           "default": "\"this\""
         },
         {
@@ -2617,19 +2711,19 @@
         {
           "name": "search",
           "description": "The search input.",
-          "type": " string ",
+          "type": "string",
           "default": "\"\\\"\\\"\""
         },
         {
           "name": "open",
           "description": "Specifies if the popover should be open.",
-          "type": " boolean ",
+          "type": "boolean",
           "default": "\"false\""
         },
         {
           "name": "closeLabel",
           "description": "Specifies the button label for the close button in mobile mode",
-          "type": " string ",
+          "type": "string",
           "default": "\"\\\"Close\\\"\""
         },
         {
@@ -2656,12 +2750,6 @@
           "type": "string",
           "default": "\"''\""
         },
-        {
-          "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": "\"true\""
-        },
         {
           "name": "required",
           "description": "Apply validation rule for requiring a value of this form control.",
@@ -2685,6 +2773,12 @@
           "description": "Custom error message.",
           "type": "string",
           "default": "\"This field is invalid\""
+        },
+        {
+          "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": "\"true\""
         }
       ],
       "properties": [
@@ -2692,21 +2786,21 @@
           "name": "search",
           "attribute": "search",
           "description": "The search input.",
-          "type": " string ",
+          "type": "string",
           "default": "\"\\\"\\\"\""
         },
         {
           "name": "open",
           "attribute": "open",
           "description": "Specifies if the popover should be open.",
-          "type": " boolean ",
+          "type": "boolean",
           "default": "\"false\""
         },
         {
           "name": "closeLabel",
           "attribute": "closeLabel",
           "description": "Specifies the button label for the close button in mobile mode",
-          "type": " string ",
+          "type": "string",
           "default": "\"\\\"Close\\\"\""
         },
         {
@@ -2748,13 +2842,6 @@
           "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": "\"true\""
-        },
         {
           "name": "required",
           "attribute": "required",
@@ -2790,6 +2877,13 @@
         {
           "name": "validationMessage",
           "type": "string"
+        },
+        {
+          "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": "\"true\""
         }
       ],
       "events": [
@@ -3184,12 +3278,6 @@
           "type": "string",
           "default": "\"''\""
         },
-        {
-          "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": "\"true\""
-        },
         {
           "name": "required",
           "description": "Apply validation rule for requiring a value of this form control.",
@@ -3213,6 +3301,12 @@
           "description": "Custom error message.",
           "type": "string",
           "default": "\"This field is invalid\""
+        },
+        {
+          "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": "\"true\""
         }
       ],
       "properties": [
@@ -3255,13 +3349,6 @@
           "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": "\"true\""
-        },
         {
           "name": "required",
           "attribute": "required",
@@ -3297,6 +3384,13 @@
         {
           "name": "validationMessage",
           "type": "string"
+        },
+        {
+          "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": "\"true\""
         }
       ]
     },
@@ -3416,12 +3510,6 @@
           "type": "string",
           "default": "\"''\""
         },
-        {
-          "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": "\"true\""
-        },
         {
           "name": "required",
           "description": "Apply validation rule for requiring a value of this form control.",
@@ -3446,6 +3534,12 @@
           "type": "string",
           "default": "\"This field is invalid\""
         },
+        {
+          "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": "\"true\""
+        },
         {
           "name": "label",
           "description": "Label to be used for aria-label and potentially as visual label for some components",
@@ -3595,13 +3689,6 @@
           "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": "\"true\""
-        },
         {
           "name": "required",
           "attribute": "required",
@@ -3638,6 +3725,13 @@
           "name": "validationMessage",
           "type": "string"
         },
+        {
+          "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": "\"true\""
+        },
         {
           "name": "label",
           "attribute": "label",
@@ -3822,12 +3916,6 @@
           "type": "string",
           "default": "\"''\""
         },
-        {
-          "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": "\"true\""
-        },
         {
           "name": "required",
           "description": "Apply validation rule for requiring a value of this form control.",
@@ -3852,6 +3940,12 @@
           "type": "string",
           "default": "\"This field is invalid\""
         },
+        {
+          "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": "\"true\""
+        },
         {
           "name": "label",
           "description": "Label to be used for aria-label and potentially as visual label for some components",
@@ -3994,13 +4088,6 @@
           "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": "\"true\""
-        },
         {
           "name": "required",
           "attribute": "required",
@@ -4037,6 +4124,13 @@
           "name": "validationMessage",
           "type": "string"
         },
+        {
+          "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": "\"true\""
+        },
         {
           "name": "label",
           "attribute": "label",
@@ -4222,12 +4316,6 @@
           "type": "string",
           "default": "\"''\""
         },
-        {
-          "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": "\"true\""
-        },
         {
           "name": "required",
           "description": "Apply validation rule for requiring a value of this form control.",
@@ -4252,6 +4340,12 @@
           "type": "string",
           "default": "\"This field is invalid\""
         },
+        {
+          "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": "\"true\""
+        },
         {
           "name": "label",
           "description": "Label to be used for aria-label and potentially as visual label for some components",
@@ -4394,13 +4488,6 @@
           "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": "\"true\""
-        },
         {
           "name": "required",
           "attribute": "required",
@@ -4437,6 +4524,13 @@
           "name": "validationMessage",
           "type": "string"
         },
+        {
+          "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": "\"true\""
+        },
         {
           "name": "label",
           "attribute": "label",
@@ -5044,12 +5138,12 @@
         {
           "name": "open",
           "type": "(event?: Event | undefined) => void",
-          "default": "\"(event?: Event) => {\\n    event?.preventDefault();\\n    event?.stopImmediatePropagation();\\n\\n    const openEvent = new CustomEvent('open', {\\n      cancelable: true,\\n    });\\n\\n    this.dispatchEvent(openEvent);\\n    if (openEvent.defaultPrevented) return;\\n\\n    this._openModal();\\n  }\""
+          "default": "\"(event?: Event) => {\\n    event?.preventDefault();\\n    event?.stopImmediatePropagation();\\n\\n    const openEvent = new CustomEvent(UUIModalOpenEvent, {\\n      cancelable: true,\\n    });\\n    // TODO: get rid of legacy 'open'-event sometime in the future. [NL]\\n    const legacyOpenEvent = new CustomEvent('open', {\\n      cancelable: true,\\n    });\\n\\n    this.dispatchEvent(openEvent);\\n    this.dispatchEvent(legacyOpenEvent);\\n    if (openEvent.defaultPrevented || legacyOpenEvent.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(UUIModalCloseEvent, {\\n      cancelable: true,\\n    });\\n    this.dispatchEvent(closeEvent);\\n\\n    if (closeEvent.defaultPrevented) return;\\n\\n    this._closeModal();\\n  }\""
+          "default": "\"(event?: Event) => {\\n    event?.preventDefault();\\n    event?.stopImmediatePropagation();\\n\\n    const closeEvent = new CustomEvent(UUIModalCloseEvent, {\\n      cancelable: true,\\n    });\\n    this.dispatchEvent(closeEvent);\\n\\n    if (closeEvent.defaultPrevented) return;\\n\\n    this.forceClose();\\n  }\""
         },
         {
           "name": "styles",
@@ -5058,6 +5152,9 @@
         }
       ],
       "events": [
+        {
+          "name": "uui:modal-open"
+        },
         {
           "name": "open"
         },
@@ -5066,6 +5163,9 @@
         },
         {
           "name": "close-end"
+        },
+        {
+          "name": "uui:modal-close-end"
         }
       ]
     },
@@ -5142,12 +5242,12 @@
         {
           "name": "open",
           "type": "(event?: Event | undefined) => void",
-          "default": "\"(event?: Event) => {\\n    event?.preventDefault();\\n    event?.stopImmediatePropagation();\\n\\n    const openEvent = new CustomEvent('open', {\\n      cancelable: true,\\n    });\\n\\n    this.dispatchEvent(openEvent);\\n    if (openEvent.defaultPrevented) return;\\n\\n    this._openModal();\\n  }\""
+          "default": "\"(event?: Event) => {\\n    event?.preventDefault();\\n    event?.stopImmediatePropagation();\\n\\n    const openEvent = new CustomEvent(UUIModalOpenEvent, {\\n      cancelable: true,\\n    });\\n    // TODO: get rid of legacy 'open'-event sometime in the future. [NL]\\n    const legacyOpenEvent = new CustomEvent('open', {\\n      cancelable: true,\\n    });\\n\\n    this.dispatchEvent(openEvent);\\n    this.dispatchEvent(legacyOpenEvent);\\n    if (openEvent.defaultPrevented || legacyOpenEvent.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(UUIModalCloseEvent, {\\n      cancelable: true,\\n    });\\n    this.dispatchEvent(closeEvent);\\n\\n    if (closeEvent.defaultPrevented) return;\\n\\n    this._closeModal();\\n  }\""
+          "default": "\"(event?: Event) => {\\n    event?.preventDefault();\\n    event?.stopImmediatePropagation();\\n\\n    const closeEvent = new CustomEvent(UUIModalCloseEvent, {\\n      cancelable: true,\\n    });\\n    this.dispatchEvent(closeEvent);\\n\\n    if (closeEvent.defaultPrevented) return;\\n\\n    this.forceClose();\\n  }\""
         },
         {
           "name": "styles",
@@ -5156,6 +5256,9 @@
         }
       ],
       "events": [
+        {
+          "name": "uui:modal-open"
+        },
         {
           "name": "open"
         },
@@ -5164,6 +5267,9 @@
         },
         {
           "name": "close-end"
+        },
+        {
+          "name": "uui:modal-close-end"
         }
       ]
     },
@@ -5423,12 +5529,6 @@
           "type": "string",
           "default": "\"''\""
         },
-        {
-          "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": "\"true\""
-        },
         {
           "name": "required",
           "description": "Apply validation rule for requiring a value of this form control.",
@@ -5452,6 +5552,12 @@
           "description": "Custom error message.",
           "type": "string",
           "default": "\"This field is invalid\""
+        },
+        {
+          "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": "\"true\""
         }
       ],
       "properties": [
@@ -5494,13 +5600,6 @@
           "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": "\"true\""
-        },
         {
           "name": "required",
           "attribute": "required",
@@ -5536,6 +5635,13 @@
         {
           "name": "validationMessage",
           "type": "string"
+        },
+        {
+          "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": "\"true\""
         }
       ],
       "slots": [
@@ -5719,12 +5825,6 @@
           "type": "string",
           "default": "\"0,0\""
         },
-        {
-          "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": "\"true\""
-        },
         {
           "name": "required",
           "description": "Apply validation rule for requiring a value of this form control.",
@@ -5748,6 +5848,12 @@
           "description": "Custom error message.",
           "type": "string",
           "default": "\"This field is invalid\""
+        },
+        {
+          "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": "\"true\""
         }
       ],
       "properties": [
@@ -5839,13 +5945,6 @@
           "type": "string",
           "default": "\"0,0\""
         },
-        {
-          "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": "\"true\""
-        },
         {
           "name": "required",
           "attribute": "required",
@@ -5881,6 +5980,13 @@
         {
           "name": "validationMessage",
           "type": "string"
+        },
+        {
+          "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": "\"true\""
         }
       ],
       "events": [
@@ -7498,12 +7604,6 @@
           "type": "string",
           "default": "\"''\""
         },
-        {
-          "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": "\"true\""
-        },
         {
           "name": "required",
           "description": "Apply validation rule for requiring a value of this form control.",
@@ -7527,6 +7627,12 @@
           "description": "Custom error message.",
           "type": "string",
           "default": "\"This field is invalid\""
+        },
+        {
+          "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": "\"true\""
         }
       ],
       "properties": [
@@ -7595,13 +7701,6 @@
           "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": "\"true\""
-        },
         {
           "name": "required",
           "attribute": "required",
@@ -7637,6 +7736,13 @@
         {
           "name": "validationMessage",
           "type": "string"
+        },
+        {
+          "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": "\"true\""
         }
       ],
       "events": [
@@ -7759,12 +7865,6 @@
           "type": "string",
           "default": "\"''\""
         },
-        {
-          "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": "\"true\""
-        },
         {
           "name": "required",
           "description": "Apply validation rule for requiring a value of this form control.",
@@ -7788,6 +7888,12 @@
           "description": "Custom error message.",
           "type": "string",
           "default": "\"This field is invalid\""
+        },
+        {
+          "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": "\"true\""
         }
       ],
       "properties": [
@@ -7871,13 +7977,6 @@
           "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": "\"true\""
-        },
         {
           "name": "required",
           "attribute": "required",
@@ -7913,6 +8012,13 @@
         {
           "name": "validationMessage",
           "type": "string"
+        },
+        {
+          "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": "\"true\""
         }
       ],
       "events": [
@@ -8036,7 +8142,7 @@
         {
           "name": "styles",
           "type": "CSSResult[]",
-          "default": "[null]"
+          "default": "[\"UUITextStyles\",null]"
         }
       ]
     },
@@ -8062,7 +8168,7 @@
         {
           "name": "styles",
           "type": "CSSResult[]",
-          "default": "[null]"
+          "default": "[\"UUITextStyles\",null]"
         }
       ]
     },
@@ -8899,12 +9005,6 @@
           "type": "string",
           "default": "\"''\""
         },
-        {
-          "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": "\"true\""
-        },
         {
           "name": "required",
           "description": "Apply validation rule for requiring a value of this form control.",
@@ -8928,6 +9028,12 @@
           "description": "Custom error message.",
           "type": "string",
           "default": "\"This field is invalid\""
+        },
+        {
+          "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": "\"true\""
         }
       ],
       "properties": [
@@ -9037,13 +9143,6 @@
           "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": "\"true\""
-        },
         {
           "name": "required",
           "attribute": "required",
@@ -9079,6 +9178,13 @@
         {
           "name": "validationMessage",
           "type": "string"
+        },
+        {
+          "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": "\"true\""
         }
       ],
       "events": [
@@ -9323,12 +9429,6 @@
           "type": "string",
           "default": "\"''\""
         },
-        {
-          "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": "\"true\""
-        },
         {
           "name": "required",
           "description": "Apply validation rule for requiring a value of this form control.",
@@ -9353,6 +9453,12 @@
           "type": "string",
           "default": "\"This field is invalid\""
         },
+        {
+          "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": "\"true\""
+        },
         {
           "name": "label",
           "description": "Label to be used for aria-label and potentially as visual label for some components",
@@ -9420,13 +9526,6 @@
           "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": "\"true\""
-        },
         {
           "name": "required",
           "attribute": "required",
@@ -9463,6 +9562,13 @@
           "name": "validationMessage",
           "type": "string"
         },
+        {
+          "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": "\"true\""
+        },
         {
           "name": "label",
           "attribute": "label",