@emuanalytics/flow-rdf-ui 0.0.19 → 0.0.20

package/dist/custom-elements.json

@@ -674,167 +674,97 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/avatar/avatar.js",
+      "path": "components/badge/badge.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FlowAvatar",
-          "cssProperties": [
-            {
-              "description": "The size of the avatar.",
-              "name": "--size"
-            }
-          ],
+          "name": "FlowBadge",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
-            },
-            {
-              "description": "The container that wraps the avatar's icon.",
-              "name": "icon"
-            },
-            {
-              "description": "The container that wraps the avatar's initials.",
-              "name": "initials"
-            },
-            {
-              "description": "The avatar image. Only shown when the `image` attribute is set.",
-              "name": "image"
             }
           ],
           "slots": [
             {
-              "description": "The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.",
-              "name": "icon"
+              "description": "The badge's content.",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "hasError",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "image",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The image source to use for the avatar.",
-              "attribute": "image"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A label to use to describe the avatar to assistive devices.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "initials",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
-              "default": "''",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "attribute": "initials"
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "pill",
               "type": {
-                "text": "'eager' | 'lazy'"
+                "text": "boolean"
               },
-              "default": "'eager'",
-              "description": "Indicates how the browser should load the image.",
-              "attribute": "loading"
+              "default": "false",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "attribute": "pill",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "shape",
+              "name": "pulse",
               "type": {
-                "text": "'circle' | 'square' | 'rounded'"
+                "text": "boolean"
               },
-              "default": "'circle'",
-              "description": "The shape of the avatar.",
-              "attribute": "shape",
+              "default": "false",
+              "description": "Makes the badge pulsate to draw attention.",
+              "attribute": "pulse",
               "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleImageChange"
             }
           ],
           "attributes": [
             {
-              "name": "image",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The image source to use for the avatar.",
-              "fieldName": "image"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "A label to use to describe the avatar to assistive devices.",
-              "fieldName": "label"
-            },
-            {
-              "name": "initials",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
               },
-              "default": "''",
-              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
-              "fieldName": "initials"
+              "default": "'primary'",
+              "description": "The badge's theme variant.",
+              "fieldName": "variant"
             },
             {
-              "name": "loading",
+              "name": "pill",
               "type": {
-                "text": "'eager' | 'lazy'"
+                "text": "boolean"
               },
-              "default": "'eager'",
-              "description": "Indicates how the browser should load the image.",
-              "fieldName": "loading"
+              "default": "false",
+              "description": "Draws a pill-style badge with rounded edges.",
+              "fieldName": "pill"
             },
             {
-              "name": "shape",
+              "name": "pulse",
               "type": {
-                "text": "'circle' | 'square' | 'rounded'"
+                "text": "boolean"
               },
-              "default": "'circle'",
-              "description": "The shape of the avatar.",
-              "fieldName": "shape"
+              "default": "false",
+              "description": "Makes the badge pulsate to draw attention.",
+              "fieldName": "pulse"
             }
           ],
           "superclass": {
             "name": "FlowRdfElement",
             "module": "/src/internal/flow-ui-rdf-element"
           },
-          "summary": "Avatars are used to represent a person or object.",
-          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/avatar",
+          "summary": "Badges are used to draw attention and display statuses or counts.",
+          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/badge",
           "status": "stable",
           "since": "2.0",
-          "dependencies": [
-            "flow-ui-icon"
-          ],
-          "tagName": "flow-ui-avatar",
+          "tagName": "flow-ui-badge",
           "customElement": true
         }
       ],
@@ -843,16 +773,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "FlowAvatar",
-            "module": "components/avatar/avatar.js"
+            "name": "FlowBadge",
+            "module": "components/badge/badge.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "flow-ui-avatar",
+          "name": "flow-ui-badge",
           "declaration": {
-            "name": "FlowAvatar",
-            "module": "components/avatar/avatar.js"
+            "name": "FlowBadge",
+            "module": "components/badge/badge.js"
           }
         }
       ]
@@ -1002,80 +932,46 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/button/button.js",
+      "path": "components/avatar/avatar.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FlowButton",
+          "name": "FlowAvatar",
+          "cssProperties": [
+            {
+              "description": "The size of the avatar.",
+              "name": "--size"
+            }
+          ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The container that wraps the prefix.",
-              "name": "prefix"
-            },
-            {
-              "description": "The button's label.",
-              "name": "label"
+              "description": "The container that wraps the avatar's icon.",
+              "name": "icon"
             },
             {
-              "description": "The container that wraps the suffix.",
-              "name": "suffix"
+              "description": "The container that wraps the avatar's initials.",
+              "name": "initials"
             },
             {
-              "description": "The button's caret icon, an `<flow-ui-icon>` element.",
-              "name": "caret"
+              "description": "The avatar image. Only shown when the `image` attribute is set.",
+              "name": "image"
             }
           ],
           "slots": [
             {
-              "description": "The button's label.",
-              "name": ""
-            },
-            {
-              "description": "A presentational prefix icon or similar element.",
-              "name": "prefix"
-            },
-            {
-              "description": "A presentational suffix icon or similar element.",
-              "name": "suffix"
+              "description": "The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.",
+              "name": "icon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "formControlController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new FormControlController(this, {\n    form: input => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute is set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute('form')) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute('form')!;\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest('form');\n    },\n    assumeInteractionOn: ['click']\n  })"
-            },
-            {
-              "kind": "field",
-              "name": "hasSlotController",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new HasSlotController(this, '[default]', 'prefix', 'suffix')"
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "button",
-              "type": {
-                "text": "HTMLButtonElement | HTMLLinkElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hasFocus",
+              "name": "hasError",
               "type": {
                 "text": "boolean"
               },
@@ -1084,40 +980,376 @@
             },
             {
               "kind": "field",
-              "name": "invalid",
+              "name": "image",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false"
+              "default": "''",
+              "description": "The image source to use for the avatar.",
+              "attribute": "image"
             },
             {
               "kind": "field",
-              "name": "title",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "title"
+              "description": "A label to use to describe the avatar to assistive devices.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "initials",
               "type": {
-                "text": "'default' | 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+                "text": "string"
               },
-              "default": "'default'",
-              "description": "The button's theme variant.",
-              "attribute": "variant",
-              "reflects": true
+              "default": "''",
+              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+              "attribute": "initials"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "loading",
               "type": {
-                "text": "'small' | 'medium' | 'large'"
+                "text": "'eager' | 'lazy'"
               },
-              "default": "'medium'",
-              "description": "The button's size.",
+              "default": "'eager'",
+              "description": "Indicates how the browser should load the image.",
+              "attribute": "loading"
+            },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "'circle' | 'square' | 'rounded'"
+              },
+              "default": "'circle'",
+              "description": "The shape of the avatar.",
+              "attribute": "shape",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleImageChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "image",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The image source to use for the avatar.",
+              "fieldName": "image"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use to describe the avatar to assistive devices.",
+              "fieldName": "label"
+            },
+            {
+              "name": "initials",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
+              "fieldName": "initials"
+            },
+            {
+              "name": "loading",
+              "type": {
+                "text": "'eager' | 'lazy'"
+              },
+              "default": "'eager'",
+              "description": "Indicates how the browser should load the image.",
+              "fieldName": "loading"
+            },
+            {
+              "name": "shape",
+              "type": {
+                "text": "'circle' | 'square' | 'rounded'"
+              },
+              "default": "'circle'",
+              "description": "The shape of the avatar.",
+              "fieldName": "shape"
+            }
+          ],
+          "superclass": {
+            "name": "FlowRdfElement",
+            "module": "/src/internal/flow-ui-rdf-element"
+          },
+          "summary": "Avatars are used to represent a person or object.",
+          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/avatar",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "flow-ui-icon"
+          ],
+          "tagName": "flow-ui-avatar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FlowAvatar",
+            "module": "components/avatar/avatar.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "flow-ui-avatar",
+          "declaration": {
+            "name": "FlowAvatar",
+            "module": "components/avatar/avatar.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/breadcrumb/breadcrumb.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FlowBreadcrumb",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "One or more breadcrumb items to display.",
+              "name": ""
+            },
+            {
+              "description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
+              "name": "separator"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "separatorDir",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "separatorSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+              "attribute": "label"
+            },
+            {
+              "kind": "method",
+              "name": "getSeparator",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "FlowRdfElement",
+            "module": "/src/internal/flow-ui-rdf-element"
+          },
+          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
+          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/breadcrumb",
+          "status": "stable",
+          "since": "2.0",
+          "dependencies": [
+            "flow-ui-icon"
+          ],
+          "tagName": "flow-ui-breadcrumb",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FlowBreadcrumb",
+            "module": "components/breadcrumb/breadcrumb.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "flow-ui-breadcrumb",
+          "declaration": {
+            "name": "FlowBreadcrumb",
+            "module": "components/breadcrumb/breadcrumb.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/button/button.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FlowButton",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The container that wraps the prefix.",
+              "name": "prefix"
+            },
+            {
+              "description": "The button's label.",
+              "name": "label"
+            },
+            {
+              "description": "The container that wraps the suffix.",
+              "name": "suffix"
+            },
+            {
+              "description": "The button's caret icon, an `<flow-ui-icon>` element.",
+              "name": "caret"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The button's label.",
+              "name": ""
+            },
+            {
+              "description": "A presentational prefix icon or similar element.",
+              "name": "prefix"
+            },
+            {
+              "description": "A presentational suffix icon or similar element.",
+              "name": "suffix"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "formControlController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FormControlController(this, {\n    form: input => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute is set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute('form')) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute('form')!;\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest('form');\n    },\n    assumeInteractionOn: ['click']\n  })"
+            },
+            {
+              "kind": "field",
+              "name": "hasSlotController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new HasSlotController(this, '[default]', 'prefix', 'suffix')"
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "button",
+              "type": {
+                "text": "HTMLButtonElement | HTMLLinkElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasFocus",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "title"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'default' | 'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text'"
+              },
+              "default": "'default'",
+              "description": "The button's theme variant.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The button's size.",
               "attribute": "size",
               "reflects": true
             },
@@ -1494,450 +1726,167 @@
               },
               "default": "false",
               "description": "Disables the button.",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "loading",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws the button in a loading state.",
-              "fieldName": "loading"
-            },
-            {
-              "name": "outline",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws an outlined button.",
-              "fieldName": "outline"
-            },
-            {
-              "name": "pill",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws a pill-style button with rounded edges.",
-              "fieldName": "pill"
-            },
-            {
-              "name": "circle",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Draws a circular icon button. When this attribute is present, the button expects a single `<flow-ui-icon>` in the\ndefault slot.",
-              "fieldName": "circle"
-            },
-            {
-              "name": "type",
-              "type": {
-                "text": "'button' | 'submit' | 'reset'"
-              },
-              "default": "'button'",
-              "description": "The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n`<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.",
-              "fieldName": "type"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.\nThis attribute is ignored when `href` is present.",
-              "fieldName": "name"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The value of the button, submitted as a pair with the button's name as part of the form data, but only when this\nbutton is the submitter. This attribute is ignored when `href` is present.",
-              "fieldName": "value"
-            },
-            {
-              "name": "href",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
-              "fieldName": "href"
-            },
-            {
-              "name": "target",
-              "type": {
-                "text": "'_blank' | '_parent' | '_self' | '_top'"
-              },
-              "description": "Tells the browser where to open the link. Only used when `href` is present.",
-              "fieldName": "target"
-            },
-            {
-              "name": "rel",
-              "type": {
-                "text": "string"
-              },
-              "default": "'noreferrer noopener'",
-              "description": "When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the\ndefault is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a\nspecific tab/window, this will prevent that from working correctly. You can remove or change the default value by\nsetting the attribute to an empty string or a value of your choice, respectively.",
-              "fieldName": "rel"
-            },
-            {
-              "name": "download",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is present.",
-              "fieldName": "download"
-            },
-            {
-              "name": "form",
-              "type": {
-                "text": "string"
-              },
-              "description": "The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\nvalue of this attribute must be an id of a form in the same document or shadow root as the button.",
-              "fieldName": "form"
-            },
-            {
-              "name": "formaction",
-              "type": {
-                "text": "string"
-              },
-              "description": "Used to override the form owner's `action` attribute.",
-              "fieldName": "formAction"
-            },
-            {
-              "name": "formenctype",
-              "type": {
-                "text": "'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'"
-              },
-              "description": "Used to override the form owner's `enctype` attribute.",
-              "fieldName": "formEnctype"
-            },
-            {
-              "name": "formmethod",
-              "type": {
-                "text": "'post' | 'get'"
-              },
-              "description": "Used to override the form owner's `method` attribute.",
-              "fieldName": "formMethod"
-            },
-            {
-              "name": "formnovalidate",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Used to override the form owner's `novalidate` attribute.",
-              "fieldName": "formNoValidate"
-            },
-            {
-              "name": "formtarget",
-              "type": {
-                "text": "'_self' | '_blank' | '_parent' | '_top' | string"
-              },
-              "description": "Used to override the form owner's `target` attribute.",
-              "fieldName": "formTarget"
-            }
-          ],
-          "superclass": {
-            "name": "FlowRdfElement",
-            "module": "/src/internal/flow-ui-rdf-element"
-          },
-          "summary": "Buttons represent actions that are available to the user.",
-          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/button",
-          "status": "stable",
-          "since": "2.0",
-          "dependencies": [
-            "flow-ui-icon",
-            "flow-ui-spinner"
-          ],
-          "tagName": "flow-ui-button",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FlowButton",
-            "module": "components/button/button.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "flow-ui-button",
-          "declaration": {
-            "name": "FlowButton",
-            "module": "components/button/button.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/button-group/button-group.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FlowButtonGroup",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "One or more `<flow-ui-button>` elements to display in the button group.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
-              "name": "disableRole",
+              "name": "loading",
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Draws the button in a loading state.",
+              "fieldName": "loading"
             },
             {
-              "kind": "field",
-              "name": "label",
+              "name": "outline",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "attribute": "label"
+              "default": "false",
+              "description": "Draws an outlined button.",
+              "fieldName": "outline"
             },
             {
-              "kind": "field",
-              "name": "vertical",
+              "name": "pill",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Use vertical layout for the button group.",
-              "attribute": "vertical",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleVerticalChange"
+              "description": "Draws a pill-style button with rounded edges.",
+              "fieldName": "pill"
             },
             {
-              "kind": "method",
-              "name": "handleFocus",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "name": "circle",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Draws a circular icon button. When this attribute is present, the button expects a single `<flow-ui-icon>` in the\ndefault slot.",
+              "fieldName": "circle"
             },
             {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "name": "type",
+              "type": {
+                "text": "'button' | 'submit' | 'reset'"
+              },
+              "default": "'button'",
+              "description": "The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n`<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.",
+              "fieldName": "type"
             },
             {
-              "kind": "method",
-              "name": "handleMouseOver",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.\nThis attribute is ignored when `href` is present.",
+              "fieldName": "name"
             },
             {
-              "kind": "method",
-              "name": "handleMouseOut",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The value of the button, submitted as a pair with the button's name as part of the form data, but only when this\nbutton is the submitter. This attribute is ignored when `href` is present.",
+              "fieldName": "value"
             },
             {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
+              "name": "href",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "label"
+              "description": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.",
+              "fieldName": "href"
             },
             {
-              "name": "vertical",
+              "name": "target",
               "type": {
-                "text": "boolean"
+                "text": "'_blank' | '_parent' | '_self' | '_top'"
               },
-              "default": "false",
-              "description": "Use vertical layout for the button group.",
-              "fieldName": "vertical"
-            }
-          ],
-          "superclass": {
-            "name": "FlowRdfElement",
-            "module": "/src/internal/flow-ui-rdf-element"
-          },
-          "summary": "Button groups can be used to group related buttons into sections.",
-          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/button-group",
-          "status": "stable",
-          "since": "2.0",
-          "tagName": "flow-ui-button-group",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FlowButtonGroup",
-            "module": "components/button-group/button-group.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "flow-ui-button-group",
-          "declaration": {
-            "name": "FlowButtonGroup",
-            "module": "components/button-group/button-group.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/badge/badge.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FlowBadge",
-          "cssParts": [
+              "description": "Tells the browser where to open the link. Only used when `href` is present.",
+              "fieldName": "target"
+            },
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
+              "name": "rel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'noreferrer noopener'",
+              "description": "When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the\ndefault is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a\nspecific tab/window, this will prevent that from working correctly. You can remove or change the default value by\nsetting the attribute to an empty string or a value of your choice, respectively.",
+              "fieldName": "rel"
+            },
             {
-              "description": "The badge's content.",
-              "name": ""
-            }
-          ],
-          "members": [
+              "name": "download",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tells the browser to download the linked file as this filename. Only used when `href` is present.",
+              "fieldName": "download"
+            },
             {
-              "kind": "field",
-              "name": "variant",
+              "name": "form",
               "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+                "text": "string"
               },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "attribute": "variant",
-              "reflects": true
+              "description": "The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\nvalue of this attribute must be an id of a form in the same document or shadow root as the button.",
+              "fieldName": "form"
             },
             {
-              "kind": "field",
-              "name": "pill",
+              "name": "formaction",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "attribute": "pill",
-              "reflects": true
+              "description": "Used to override the form owner's `action` attribute.",
+              "fieldName": "formAction"
             },
             {
-              "kind": "field",
-              "name": "pulse",
+              "name": "formenctype",
               "type": {
-                "text": "boolean"
+                "text": "'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'"
               },
-              "default": "false",
-              "description": "Makes the badge pulsate to draw attention.",
-              "attribute": "pulse",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "description": "Used to override the form owner's `enctype` attribute.",
+              "fieldName": "formEnctype"
+            },
             {
-              "name": "variant",
+              "name": "formmethod",
               "type": {
-                "text": "'primary' | 'success' | 'neutral' | 'warning' | 'danger'"
+                "text": "'post' | 'get'"
               },
-              "default": "'primary'",
-              "description": "The badge's theme variant.",
-              "fieldName": "variant"
+              "description": "Used to override the form owner's `method` attribute.",
+              "fieldName": "formMethod"
             },
             {
-              "name": "pill",
+              "name": "formnovalidate",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Draws a pill-style badge with rounded edges.",
-              "fieldName": "pill"
+              "description": "Used to override the form owner's `novalidate` attribute.",
+              "fieldName": "formNoValidate"
             },
             {
-              "name": "pulse",
+              "name": "formtarget",
               "type": {
-                "text": "boolean"
+                "text": "'_self' | '_blank' | '_parent' | '_top' | string"
               },
-              "default": "false",
-              "description": "Makes the badge pulsate to draw attention.",
-              "fieldName": "pulse"
+              "description": "Used to override the form owner's `target` attribute.",
+              "fieldName": "formTarget"
             }
           ],
           "superclass": {
             "name": "FlowRdfElement",
             "module": "/src/internal/flow-ui-rdf-element"
-          },
-          "summary": "Badges are used to draw attention and display statuses or counts.",
-          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/badge",
+          },
+          "summary": "Buttons represent actions that are available to the user.",
+          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/button",
           "status": "stable",
           "since": "2.0",
-          "tagName": "flow-ui-badge",
+          "dependencies": [
+            "flow-ui-icon",
+            "flow-ui-spinner"
+          ],
+          "tagName": "flow-ui-button",
           "customElement": true
         }
       ],
@@ -1946,28 +1895,28 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "FlowBadge",
-            "module": "components/badge/badge.js"
+            "name": "FlowButton",
+            "module": "components/button/button.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "flow-ui-badge",
+          "name": "flow-ui-button",
           "declaration": {
-            "name": "FlowBadge",
-            "module": "components/badge/badge.js"
+            "name": "FlowButton",
+            "module": "components/button/button.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/breadcrumb/breadcrumb.js",
+      "path": "components/button-group/button-group.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FlowBreadcrumb",
+          "name": "FlowButtonGroup",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
@@ -1976,27 +1925,11 @@
           ],
           "slots": [
             {
-              "description": "One or more breadcrumb items to display.",
+              "description": "One or more `<flow-ui-button>` elements to display in the button group.",
               "name": ""
-            },
-            {
-              "description": "The separator to use between breadcrumb items. Works best with `<flow-ui-icon>`.",
-              "name": "separator"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "private",
-              "readonly": true,
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "separatorDir",
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "defaultSlot",
@@ -2006,10 +1939,11 @@
             },
             {
               "kind": "field",
-              "name": "separatorSlot",
+              "name": "disableRole",
               "type": {
-                "text": "HTMLSlotElement"
-              }
+                "text": "boolean"
+              },
+              "default": "false"
             },
             {
               "kind": "field",
@@ -2018,13 +1952,74 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
               "attribute": "label"
             },
+            {
+              "kind": "field",
+              "name": "vertical",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Use vertical layout for the button group.",
+              "attribute": "vertical",
+              "reflects": true
+            },
             {
               "kind": "method",
-              "name": "getSeparator",
-              "privacy": "private"
+              "name": "handleVerticalChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleFocus",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseOver",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseOut",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -2039,22 +2034,27 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by\nscreen readers and other assistive devices to provide more context for users.",
               "fieldName": "label"
+            },
+            {
+              "name": "vertical",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Use vertical layout for the button group.",
+              "fieldName": "vertical"
             }
           ],
           "superclass": {
             "name": "FlowRdfElement",
             "module": "/src/internal/flow-ui-rdf-element"
           },
-          "summary": "Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.",
-          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/breadcrumb",
+          "summary": "Button groups can be used to group related buttons into sections.",
+          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/button-group",
           "status": "stable",
           "since": "2.0",
-          "dependencies": [
-            "flow-ui-icon"
-          ],
-          "tagName": "flow-ui-breadcrumb",
+          "tagName": "flow-ui-button-group",
           "customElement": true
         }
       ],
@@ -2063,16 +2063,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "FlowBreadcrumb",
-            "module": "components/breadcrumb/breadcrumb.js"
+            "name": "FlowButtonGroup",
+            "module": "components/button-group/button-group.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "flow-ui-breadcrumb",
+          "name": "flow-ui-button-group",
           "declaration": {
-            "name": "FlowBreadcrumb",
-            "module": "components/breadcrumb/breadcrumb.js"
+            "name": "FlowButtonGroup",
+            "module": "components/button-group/button-group.js"
           }
         }
       ]
@@ -17007,6 +17007,17 @@
               "attribute": "active",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "scrollable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
+              "attribute": "scrollable",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "handleActiveChange"
@@ -17030,6 +17041,15 @@
               "default": "false",
               "description": "When true, the tab panel will be shown.",
               "fieldName": "active"
+            },
+            {
+              "name": "scrollable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
+              "fieldName": "scrollable"
             }
           ],
           "superclass": {
@@ -19589,52 +19609,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/visually-hidden/visually-hidden.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FlowVisuallyHidden",
-          "slots": [
-            {
-              "description": "The content to be visually hidden.",
-              "name": ""
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "FlowRdfElement",
-            "module": "/src/internal/flow-ui-rdf-element"
-          },
-          "summary": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.",
-          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/visually-hidden",
-          "status": "stable",
-          "since": "2.0",
-          "tagName": "flow-ui-visually-hidden",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "FlowVisuallyHidden",
-            "module": "components/visually-hidden/visually-hidden.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "flow-ui-visually-hidden",
-          "declaration": {
-            "name": "FlowVisuallyHidden",
-            "module": "components/visually-hidden/visually-hidden.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/tree-item/tree-item.js",
@@ -20038,6 +20012,52 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/visually-hidden/visually-hidden.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FlowVisuallyHidden",
+          "slots": [
+            {
+              "description": "The content to be visually hidden.",
+              "name": ""
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "FlowRdfElement",
+            "module": "/src/internal/flow-ui-rdf-element"
+          },
+          "summary": "The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.",
+          "documentation": "https://developer.emu-analytics.net/docs/flow-ui-rdf/components/visually-hidden",
+          "status": "stable",
+          "since": "2.0",
+          "tagName": "flow-ui-visually-hidden",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FlowVisuallyHidden",
+            "module": "components/visually-hidden/visually-hidden.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "flow-ui-visually-hidden",
+          "declaration": {
+            "name": "FlowVisuallyHidden",
+            "module": "components/visually-hidden/visually-hidden.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/chart/chartjs-plugins/dayjs.adapter.js",
@@ -20267,6 +20287,6 @@
   ],
   "package": {
     "name": "@emuanalytics/flow-rdf-ui",
-    "version": "0.0.19"
+    "version": "0.0.20"
   }
 }