npm - @esri/calcite-components - Versions diffs - 1.0.0-next.687 → 1.0.0-next.689 - Mend

@esri/calcite-components 1.0.0-next.687 → 1.0.0-next.689

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 (704) hide show

package/dist/extras/docs-json.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-12-15T23:00:13",
+  "timestamp": "2022-12-16T08:47:38",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -24,7 +24,7 @@
       "props": [
         {
           "name": "appearance",
-          "type": "\"default\" | \"minimal\" | \"solid\" | \"transparent\"",
+          "type": "\"minimal\" | \"solid\" | \"transparent\"",
           "mutable": false,
           "attr": "appearance",
           "reflectToAttr": true,
@@ -32,10 +32,6 @@
           "docsTags": [],
           "default": "\"solid\"",
           "values": [
-            {
-              "value": "default",
-              "type": "string"
-            },
             {
               "value": "minimal",
               "type": "string"
@@ -267,6 +263,31 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "iconFlipRtl",
+          "type": "\"both\" | \"end\" | \"start\"",
+          "mutable": false,
+          "attr": "icon-flip-rtl",
+          "reflectToAttr": true,
+          "docs": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
+          "docsTags": [],
+          "values": [
+            {
+              "value": "both",
+              "type": "string"
+            },
+            {
+              "value": "end",
+              "type": "string"
+            },
+            {
+              "value": "start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "iconStart",
           "type": "string",
@@ -330,7 +351,7 @@
         }
       ],
       "usage": {
-        "Clear-appearance": "Renders a `calcite-action` that has a clear background.\n\n```html\n<calcite-action appearance=\"transparent\" text=\"Layers\" icon=\"layers\"></calcite-action>\n```\n",
+        "Transparent-appearance": "Renders a `calcite-action` that is transparent.\n\n```html\n<calcite-action appearance=\"transparent\" text=\"Layers\" icon=\"layers\"></calcite-action>\n```\n",
         "With-text-displayed": "Renders a `calcite-action` that displays text alongside an icon.\n\n```html\n<calcite-action label=\"Performs my custom action\" text=\"Perform Action!\" text-enabled icon=\"save\"></calcite-action>\n```\n",
         "With-tooltip": "Renders a `calcite-action` that displays text alongside an icon. A `calcite-tooltip` will be displayed on hover or focus.\n\n```html\n<calcite-action label=\"Performs my custom action\" text=\"Perform Action!\" text-enabled icon=\"save\"\n  ><calcite-tooltip slot=\"tooltip\">Save me!</calcite-tooltip></calcite-action\n>\n```\n",
         "Without-text-displayed": "Renders a `calcite-action` that displays only an icon.\n\n```html\n<calcite-action label=\"Performs my custom action\" text=\"My Custom Action\" icon=\"plus\"></calcite-action>\n```\n"
@@ -450,6 +471,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "iconFlipRtl",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "icon-flip-rtl",
+          "reflectToAttr": true,
+          "docs": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "indicator",
           "type": "boolean",
@@ -1731,9 +1769,26 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "iconFlipRtl",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "icon-flip-rtl",
+          "reflectToAttr": true,
+          "docs": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "kind",
-          "type": "\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
+          "type": "\"brand\" | \"danger\" | \"info\" | \"inverse\" | \"neutral\" | \"success\" | \"warning\"",
           "mutable": false,
           "attr": "kind",
           "reflectToAttr": true,
@@ -1753,6 +1808,14 @@
               "value": "info",
               "type": "string"
             },
+            {
+              "value": "inverse",
+              "type": "string"
+            },
+            {
+              "value": "neutral",
+              "type": "string"
+            },
             {
               "value": "success",
               "type": "string"
@@ -2655,11 +2718,11 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-button icon-start=\"plus\" color=\"red\">Go!</calcite-button>\n```\n",
+        "Basic": "```html\n<calcite-button icon-start=\"plus\">Go!</calcite-button>\n```\n",
         "Focusing": "You can programmatically focus a `calcite-button` with the `setFocus()` method:\n\n```html\n<div onclick=\"document.querySelector('#my-button').setFocus()\">Focus!</div>\n```\n",
         "Internals": "Any additional attributes set on `<calcite-button>` are passed to the internal `<a>` or `<button>` tag. For example, the first button below sets `target=\"_blank` On the internal `<a>`. The second button sets `type=\"submit\"` on the internal `<button>`.\n\n- ```html\n  <calcite-button href=\"https://github.com/esri/calcite-components\" target=\"_blank\">\n    Calcite Components on GitHub\n  </calcite-button>\n\n  <calcite-button type=\"submit\">Submit</calcite-button>\n  ```\n",
-        "With-icons": "```html\n<calcite-button appearance=\"solid\" icon-start=\"arrow-left\">Back</calcite-button>\n<calcite-button icon-end=\"map\" color=\"red\">Map Options</calcite-button>\n<calcite-button icon-end=\"plus\" appearance=\"outline\" color=\"inverse\">Add to favorites</calcite-button>\n```\n",
-        "With-loader-disabled": "```html\n<calcite-button loading color=\"neutral\">Fetching data...</calcite-button>\n<calcite-button disabled>Can't touch this</calcite-button>\n```\n",
+        "With-icons": "```html\n<calcite-button appearance=\"solid\" icon-start=\"arrow-left\">Back</calcite-button>\n<calcite-button icon-end=\"map\" kind=\"danger\">Delete Map Options</calcite-button>\n<calcite-button icon-end=\"plus\" appearance=\"outline-fill\" kind=\"inverse\">Add to favorites</calcite-button>\n```\n",
+        "With-loader-disabled": "```html\n<calcite-button loading kind=\"neutral\">Fetching data...</calcite-button>\n<calcite-button disabled>Can't touch this</calcite-button>\n```\n",
         "Within-form": "```html\n<form name=\"sign-up\">\n  <calcite-label>\n    First name\n    <calcite-input name=\"first-name\" required value=\"Jane\"></calcite-input>\n  </calcite-label>\n  <calcite-button type=\"reset\">I should reset the form (type reset)</calcite-button>\n  <calcite-button type=\"button\">I should not submit the form (type button)</calcite-button>\n  <calcite-button>Submit</calcite-button>\n</form>\n```\n"
       },
       "props": [
@@ -2703,7 +2766,7 @@
         },
         {
           "name": "appearance",
-          "type": "\"clear\" | \"minimal\" | \"outline\" | \"solid\" | \"transparent\"",
+          "type": "\"outline\" | \"outline-fill\" | \"solid\" | \"transparent\"",
           "mutable": false,
           "attr": "appearance",
           "reflectToAttr": true,
@@ -2712,15 +2775,11 @@
           "default": "\"solid\"",
           "values": [
             {
-              "value": "clear",
-              "type": "string"
-            },
-            {
-              "value": "minimal",
+              "value": "outline",
               "type": "string"
             },
             {
-              "value": "outline",
+              "value": "outline-fill",
               "type": "string"
             },
             {
@@ -2735,36 +2794,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "color",
-          "type": "\"blue\" | \"inverse\" | \"neutral\" | \"red\"",
-          "mutable": false,
-          "attr": "color",
-          "reflectToAttr": true,
-          "docs": "Specifies the color of the component.",
-          "docsTags": [],
-          "default": "\"blue\"",
-          "values": [
-            {
-              "value": "blue",
-              "type": "string"
-            },
-            {
-              "value": "inverse",
-              "type": "string"
-            },
-            {
-              "value": "neutral",
-              "type": "string"
-            },
-            {
-              "value": "red",
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -2782,28 +2811,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "form",
-          "type": "string",
-          "mutable": false,
-          "attr": "form",
-          "reflectToAttr": false,
-          "docs": "The form ID to associate with the component.",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "– The property is no longer needed if the component is placed inside a form."
-            }
-          ],
-          "deprecation": "– The property is no longer needed if the component is placed inside a form.",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "href",
           "type": "string",
@@ -2877,6 +2884,36 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "kind",
+          "type": "\"brand\" | \"danger\" | \"inverse\" | \"neutral\"",
+          "mutable": false,
+          "attr": "kind",
+          "reflectToAttr": true,
+          "docs": "Specifies the kind of the component (will apply to border and background if applicable).",
+          "docsTags": [],
+          "default": "\"brand\"",
+          "values": [
+            {
+              "value": "brand",
+              "type": "string"
+            },
+            {
+              "value": "danger",
+              "type": "string"
+            },
+            {
+              "value": "inverse",
+              "type": "string"
+            },
+            {
+              "value": "neutral",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "label",
           "type": "string",
@@ -3550,12 +3587,12 @@
         }
       ],
       "usage": {
-        "Basic": "```html\n<calcite-chip value=\"Global\" closable icon=\"globe\" appearance=\"clear\" color=\"green\">Global</calcite-chip>\n```\n"
+        "Basic": "```html\n<calcite-chip value=\"Global\" closable icon=\"globe\" appearance=\"outline\" kind=\"brand\">Global</calcite-chip>\n```\n"
       },
       "props": [
         {
           "name": "appearance",
-          "type": "\"solid\" | \"transparent\"",
+          "type": "\"outline\" | \"outline-fill\" | \"solid\"",
           "mutable": false,
           "attr": "appearance",
           "reflectToAttr": true,
@@ -3564,11 +3601,15 @@
           "default": "\"solid\"",
           "values": [
             {
-              "value": "solid",
+              "value": "outline",
               "type": "string"
             },
             {
-              "value": "transparent",
+              "value": "outline-fill",
+              "type": "string"
+            },
+            {
+              "value": "solid",
               "type": "string"
             }
           ],
@@ -3610,33 +3651,15 @@
           "required": false
         },
         {
-          "name": "color",
-          "type": "\"blue\" | \"green\" | \"grey\" | \"red\" | \"yellow\"",
+          "name": "icon",
+          "type": "string",
           "mutable": false,
-          "attr": "color",
+          "attr": "icon",
           "reflectToAttr": true,
-          "docs": "Specifies the color for the component.",
+          "docs": "Specifies an icon to display.",
           "docsTags": [],
-          "default": "\"grey\"",
           "values": [
             {
-              "value": "blue",
-              "type": "string"
-            },
-            {
-              "value": "green",
-              "type": "string"
-            },
-            {
-              "value": "grey",
-              "type": "string"
-            },
-            {
-              "value": "red",
-              "type": "string"
-            },
-            {
-              "value": "yellow",
               "type": "string"
             }
           ],
@@ -3644,33 +3667,43 @@
           "required": false
         },
         {
-          "name": "icon",
-          "type": "string",
+          "name": "iconFlipRtl",
+          "type": "boolean",
           "mutable": false,
-          "attr": "icon",
+          "attr": "icon-flip-rtl",
           "reflectToAttr": true,
-          "docs": "Specifies an icon to display.",
+          "docs": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
           "docsTags": [],
+          "default": "false",
           "values": [
             {
-              "type": "string"
+              "type": "boolean"
             }
           ],
           "optional": false,
           "required": false
         },
         {
-          "name": "iconFlipRtl",
-          "type": "boolean",
+          "name": "kind",
+          "type": "\"brand\" | \"inverse\" | \"neutral\"",
           "mutable": false,
-          "attr": "icon-flip-rtl",
+          "attr": "kind",
           "reflectToAttr": true,
-          "docs": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
+          "docs": "Specifies the kind of the component (will apply to border and background if applicable).",
           "docsTags": [],
-          "default": "false",
+          "default": "\"neutral\"",
           "values": [
             {
-              "type": "boolean"
+              "value": "brand",
+              "type": "string"
+            },
+            {
+              "value": "inverse",
+              "type": "string"
+            },
+            {
+              "value": "neutral",
+              "type": "string"
             }
           ],
           "optional": false,
@@ -3825,18 +3858,14 @@
         },
         {
           "name": "appearance",
-          "type": "\"default\" | \"minimal\" | \"solid\"",
+          "type": "\"minimal\" | \"solid\"",
           "mutable": false,
           "attr": "appearance",
           "reflectToAttr": true,
-          "docs": "Specifies the appearance style of the component -\n\n`\"solid\"` (containing border) or `\"minimal\"` (no containing border).",
+          "docs": "Specifies the appearance style of the component -",
           "docsTags": [],
           "default": "\"solid\"",
           "values": [
-            {
-              "value": "default",
-              "type": "string"
-            },
             {
               "value": "minimal",
               "type": "string"
@@ -4867,6 +4896,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "placeholderIconFlipRtl",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "placeholder-icon-flip-rtl",
+          "reflectToAttr": true,
+          "docs": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "scale",
           "type": "\"l\" | \"m\" | \"s\"",
@@ -5212,6 +5258,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "iconFlipRtl",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "icon-flip-rtl",
+          "reflectToAttr": true,
+          "docs": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "selected",
           "type": "boolean",
@@ -7145,16 +7208,16 @@
       "props": [
         {
           "name": "appearance",
-          "type": "\"outline\" | \"solid\"",
+          "type": "\"outline-fill\" | \"solid\"",
           "mutable": false,
           "attr": "appearance",
           "reflectToAttr": true,
           "docs": "Specifies the appearance style of the component.",
           "docsTags": [],
-          "default": "\"outline\"",
+          "default": "\"solid\"",
           "values": [
             {
-              "value": "outline",
+              "value": "outline-fill",
               "type": "string"
             },
             {
@@ -7166,29 +7229,38 @@
           "required": false
         },
         {
-          "name": "color",
-          "type": "\"blue\" | \"inverse\" | \"neutral\" | \"red\"",
+          "name": "disabled",
+          "type": "boolean",
           "mutable": false,
-          "attr": "color",
+          "attr": "disabled",
           "reflectToAttr": true,
-          "docs": "Specifies the color of the component.",
+          "docs": "When `true`, interaction is prevented and the component is displayed with lower opacity.",
           "docsTags": [],
-          "default": "\"neutral\"",
+          "default": "false",
           "values": [
             {
-              "value": "blue",
-              "type": "string"
-            },
-            {
-              "value": "inverse",
-              "type": "string"
-            },
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "string",
+          "mutable": false,
+          "attr": "icon",
+          "reflectToAttr": true,
+          "docs": "Specifies an icon to display.",
+          "docsTags": [
             {
-              "value": "neutral",
-              "type": "string"
-            },
+              "name": "default",
+              "text": "\"plus\""
+            }
+          ],
+          "default": "ICONS.plus",
+          "values": [
             {
-              "value": "red",
               "type": "string"
             }
           ],
@@ -7196,12 +7268,12 @@
           "required": false
         },
         {
-          "name": "disabled",
+          "name": "iconFlipRtl",
           "type": "boolean",
           "mutable": false,
-          "attr": "disabled",
+          "attr": "icon-flip-rtl",
           "reflectToAttr": true,
-          "docs": "When `true`, interaction is prevented and the component is displayed with lower opacity.",
+          "docs": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -7213,21 +7285,29 @@
           "required": false
         },
         {
-          "name": "icon",
-          "type": "string",
+          "name": "kind",
+          "type": "\"brand\" | \"danger\" | \"inverse\" | \"neutral\"",
           "mutable": false,
-          "attr": "icon",
+          "attr": "kind",
           "reflectToAttr": true,
-          "docs": "Specifies an icon to display.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "\"plus\""
-            }
-          ],
-          "default": "ICONS.plus",
+          "docs": "Specifies the kind of the component (will apply to border and background).",
+          "docsTags": [],
+          "default": "\"brand\"",
           "values": [
             {
+              "value": "brand",
+              "type": "string"
+            },
+            {
+              "value": "danger",
+              "type": "string"
+            },
+            {
+              "value": "inverse",
+              "type": "string"
+            },
+            {
+              "value": "neutral",
               "type": "string"
             }
           ],
@@ -10364,6 +10444,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "iconFlipRtl",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "icon-flip-rtl",
+          "reflectToAttr": true,
+          "docs": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "scale",
           "type": "\"l\" | \"m\" | \"s\"",
@@ -13385,7 +13482,7 @@
         }
       ],
       "usage": {
-        "Basic": "Customize the modal by passing your content into multiple named slots: `header` (title-area of the modal), `content` (main body of the modal), and up to three modal actions: primary, secondary, and back. Notice below we use the `aria-labelledby` attribute, relating it to the title of the modal. In order to ensure good accessibility, it's recommended that you use either an `aria-label` or `aria-labelledby` attribute so screen readers can infer what the subject matter of your modal is.\n\n```html\n<calcite-modal aria-labelledby=\"modal-title\" open>\n  <h3 slot=\"header\" id=\"modal-title\">Title of the modal</h3>\n  <div slot=\"content\">The actual content of the modal</div>\n  <calcite-button slot=\"back\" color=\"neutral\" appearance=\"outline\" icon=\"chevron-left\" width=\"full\">\n    Back\n  </calcite-button>\n  <calcite-button slot=\"secondary\" width=\"full\" appearance=\"outline\"> Cancel </calcite-button>\n  <calcite-button slot=\"primary\" width=\"full\"> Save </calcite-button>\n</calcite-modal>\n```\n",
+        "Basic": "Customize the modal by passing your content into multiple named slots: `header` (title-area of the modal), `content` (main body of the modal), and up to three modal actions: primary, secondary, and back. Notice below we use the `aria-labelledby` attribute, relating it to the title of the modal. In order to ensure good accessibility, it's recommended that you use either an `aria-label` or `aria-labelledby` attribute so screen readers can infer what the subject matter of your modal is.\n\n```html\n<calcite-modal aria-labelledby=\"modal-title\" open>\n  <h3 slot=\"header\" id=\"modal-title\">Title of the modal</h3>\n  <div slot=\"content\">The actual content of the modal</div>\n  <calcite-button slot=\"back\" kind=\"neutral\" appearance=\"outline\" icon=\"chevron-left\" width=\"full\">\n    Back\n  </calcite-button>\n  <calcite-button slot=\"secondary\" width=\"full\" appearance=\"outline\"> Cancel </calcite-button>\n  <calcite-button slot=\"primary\" width=\"full\"> Save </calcite-button>\n</calcite-modal>\n```\n",
         "Open": "To open a modal, add the `active` prop. Once the opening animation is complete, the `calciteModalOpen` event will be fired.\n\nTo close the modal, simply remove the attribute. This will run your before close method (if provided, see below) and fire the `calciteModalClose` event after the animation and teardown is complete.\n\n```html\n<calcite-modal open></calcite-modal>\n```\n",
         "Reacting-before-close": "If you'd like to perform some actions prior to closing (ie. warning users they will lose their changes) you can pass a function to the `beforeClose` property. This method will be called prior to close and should return a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise):\n\n```js\nfunction beforeClose() {\n  return new Promise((resolve) => {\n    // do something async\n    resolve(); // this will trigger the close animation\n  });\n}\n\nconst modal = document.getElementById(\"my-modal\");\nmodal.beforeClose = beforeClose;\n```\n"
       },
@@ -13513,7 +13610,7 @@
         },
         {
           "name": "kind",
-          "type": "\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
+          "type": "\"brand\" | \"danger\" | \"info\" | \"inverse\" | \"neutral\" | \"success\" | \"warning\"",
           "mutable": false,
           "attr": "kind",
           "reflectToAttr": true,
@@ -13532,6 +13629,14 @@
               "value": "info",
               "type": "string"
             },
+            {
+              "value": "inverse",
+              "type": "string"
+            },
+            {
+              "value": "neutral",
+              "type": "string"
+            },
             {
               "value": "success",
               "type": "string"
@@ -13848,9 +13953,26 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "iconFlipRtl",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "icon-flip-rtl",
+          "reflectToAttr": true,
+          "docs": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "kind",
-          "type": "\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
+          "type": "\"brand\" | \"danger\" | \"info\" | \"inverse\" | \"neutral\" | \"success\" | \"warning\"",
           "mutable": false,
           "attr": "kind",
           "reflectToAttr": true,
@@ -13870,6 +13992,14 @@
               "value": "info",
               "type": "string"
             },
+            {
+              "value": "inverse",
+              "type": "string"
+            },
+            {
+              "value": "neutral",
+              "type": "string"
+            },
             {
               "value": "success",
               "type": "string"
@@ -15380,6 +15510,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "iconFlipRtl",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "icon-flip-rtl",
+          "reflectToAttr": true,
+          "docs": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "label",
           "type": "string",
@@ -16639,7 +16786,7 @@
       "props": [
         {
           "name": "appearance",
-          "type": "\"outline\" | \"solid\"",
+          "type": "\"minimal\" | \"solid\"",
           "mutable": false,
           "attr": "appearance",
           "reflectToAttr": true,
@@ -16648,7 +16795,7 @@
           "default": "\"solid\"",
           "values": [
             {
-              "value": "outline",
+              "value": "minimal",
               "type": "string"
             },
             {
@@ -17152,13 +17299,7 @@
           "docsTags": []
         }
       ],
-      "listeners": [
-        {
-          "event": "blur",
-          "capture": false,
-          "passive": false
-        }
-      ],
+      "listeners": [],
       "styles": [
         {
           "name": "--calcite-rating-spacing-unit",
@@ -17170,13 +17311,13 @@
       "parts": [],
       "dependents": [],
       "dependencies": [
-        "calcite-icon",
-        "calcite-chip"
+        "calcite-chip",
+        "calcite-icon"
       ],
       "dependencyGraph": {
         "calcite-rating": [
-          "calcite-icon",
-          "calcite-chip"
+          "calcite-chip",
+          "calcite-icon"
         ],
         "calcite-chip": [
           "calcite-icon"
@@ -18636,7 +18777,7 @@
       "props": [
         {
           "name": "appearance",
-          "type": "\"clear\" | \"minimal\" | \"outline\" | \"solid\" | \"transparent\"",
+          "type": "\"outline\" | \"outline-fill\" | \"solid\" | \"transparent\"",
           "mutable": false,
           "attr": "appearance",
           "reflectToAttr": true,
@@ -18645,15 +18786,11 @@
           "default": "\"solid\"",
           "values": [
             {
-              "value": "clear",
-              "type": "string"
-            },
-            {
-              "value": "minimal",
+              "value": "outline",
               "type": "string"
             },
             {
-              "value": "outline",
+              "value": "outline-fill",
               "type": "string"
             },
             {
@@ -18668,36 +18805,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "color",
-          "type": "\"blue\" | \"inverse\" | \"neutral\" | \"red\"",
-          "mutable": false,
-          "attr": "color",
-          "reflectToAttr": true,
-          "docs": "Specifies the color of the component.",
-          "docsTags": [],
-          "default": "\"blue\"",
-          "values": [
-            {
-              "value": "blue",
-              "type": "string"
-            },
-            {
-              "value": "inverse",
-              "type": "string"
-            },
-            {
-              "value": "neutral",
-              "type": "string"
-            },
-            {
-              "value": "red",
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -18761,6 +18868,36 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "kind",
+          "type": "\"brand\" | \"danger\" | \"inverse\" | \"neutral\"",
+          "mutable": false,
+          "attr": "kind",
+          "reflectToAttr": true,
+          "docs": "Specifies the kind of the component (will apply to border and background if applicable).",
+          "docsTags": [],
+          "default": "\"brand\"",
+          "values": [
+            {
+              "value": "brand",
+              "type": "string"
+            },
+            {
+              "value": "danger",
+              "type": "string"
+            },
+            {
+              "value": "inverse",
+              "type": "string"
+            },
+            {
+              "value": "neutral",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "loading",
           "type": "boolean",
@@ -19392,6 +19529,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "iconFlipRtl",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "icon-flip-rtl",
+          "reflectToAttr": true,
+          "docs": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "selected",
           "type": "boolean",
@@ -19590,7 +19744,7 @@
           "bubbles": true,
           "cancelable": false,
           "composed": true,
-          "docs": "Fires when the `checked` value has changed.\n\n**Note:** The event payload is deprecated, use the component's `checked` property instead.",
+          "docs": "Fires when the `checked` value has changed.",
           "docsTags": []
         }
       ],
@@ -20320,6 +20474,23 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "iconFlipRtl",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "icon-flip-rtl",
+          "reflectToAttr": true,
+          "docs": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [],
@@ -20472,6 +20643,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "iconFlipRtl",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "icon-flip-rtl",
+          "reflectToAttr": true,
+          "docs": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "inputAlignment",
           "type": "\"end\" | \"start\"",
@@ -22491,6 +22679,23 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "iconFlipRtl",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "icon-flip-rtl",
+          "reflectToAttr": true,
+          "docs": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`).",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "label",
           "type": "string",