@umbraco-ui/uui 1.1.0 → 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"
         }
       ],
@@ -1331,6 +1331,640 @@
         }
       ]
     },
+    {
+      "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": "swatches",
+          "type": "UUIColorSwatchElement[]"
+        },
+        {
+          "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 a color swatch is selected."
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Default slot for content."
+        }
+      ]
+    },
     {
       "name": "uui-combobox-list-option",
       "path": "./../uui-combobox-list/lib/uui-combobox-list-option.element.ts",
@@ -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"
         }
       ]
@@ -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."
         }
       ]
     },
@@ -6057,7 +6695,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "description": "for label"
         },
         {
@@ -6067,10 +6705,6 @@
         {
           "name": "extra",
           "description": "for extra"
-        },
-        {
-          "name": "",
-          "description": "Override the default label"
         }
       ],
       "cssProperties": [
@@ -6174,7 +6808,7 @@
       ],
       "slots": [
         {
-          "name": "default",
+          "name": "",
           "description": "for label"
         },
         {
@@ -6184,10 +6818,6 @@
         {
           "name": "extra",
           "description": "for extra"
-        },
-        {
-          "name": "",
-          "description": "Override the default label"
         }
       ],
       "cssProperties": [
@@ -6513,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",