@haiilo/catalyst 11.0.0 → 12.0.0

package/dist/collection/components/cat-badge/cat-badge.js

@@ -8,13 +8,33 @@ import { MediaMatcher } from "../../utils/media-matcher";
 export class CatBadge {
     constructor() {
         this._iconOnly = true;
+        /**
+         * The rendering style of the badge.
+         */
         this.variant = 'filled';
+        /**
+         * The color palette of the badge.
+         */
         this.color = 'primary';
+        /**
+         * The size of the badge.
+         */
         this.size = 'm';
+        /**
+         * Use round badge edges.
+         */
         this.round = false;
+        /**
+         * Draw attention to the badge with a subtle animation.
+         */
         this.pulse = false;
-        this.icon = undefined;
+        /**
+         * Hide the actual button content and only display the icon.
+         */
         this.iconOnly = false;
+        /**
+         * Display the icon on the right.
+         */
         this.iconRight = false;
     }
     onIconOnlyChanged(value) {
@@ -78,6 +98,7 @@ export class CatBadge {
         return {
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "'filled' | 'outlined'",
@@ -90,12 +111,14 @@ export class CatBadge {
                     "tags": [],
                     "text": "The rendering style of the badge."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'filled'"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
@@ -108,12 +131,14 @@ export class CatBadge {
                     "tags": [],
                     "text": "The color palette of the badge."
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'primary'"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'xs' | 's' | 'm' | 'l' | 'xl'",
@@ -126,12 +151,14 @@ export class CatBadge {
                     "tags": [],
                     "text": "The size of the badge."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'m'"
             },
             "round": {
                 "type": "boolean",
+                "attribute": "round",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -144,12 +171,14 @@ export class CatBadge {
                     "tags": [],
                     "text": "Use round badge edges."
                 },
-                "attribute": "round",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "pulse": {
                 "type": "boolean",
+                "attribute": "pulse",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -162,12 +191,14 @@ export class CatBadge {
                     "tags": [],
                     "text": "Draw attention to the badge with a subtle animation."
                 },
-                "attribute": "pulse",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -180,11 +211,13 @@ export class CatBadge {
                     "tags": [],
                     "text": "The name of an icon to be displayed in the button."
                 },
-                "attribute": "icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "iconOnly": {
                 "type": "any",
+                "attribute": "icon-only",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean | Breakpoint",
@@ -203,12 +236,14 @@ export class CatBadge {
                     "tags": [],
                     "text": "Hide the actual button content and only display the icon."
                 },
-                "attribute": "icon-only",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "iconRight": {
                 "type": "boolean",
+                "attribute": "icon-right",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -221,7 +256,8 @@ export class CatBadge {
                     "tags": [],
                     "text": "Display the icon on the right."
                 },
-                "attribute": "icon-right",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/cat-badge/cat-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-badge.js","sourceRoot":"","sources":["../../../src/components/cat-badge/cat-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/**\n * Badges are used to inform users of the status of an object or of an action\n * that’s been taken.\n */\n@Component({\n  tag: 'cat-badge',\n  styleUrl: 'cat-badge.scss',\n  shadow: true\n})\nexport class CatBadge {\n  private mediaMatcher?: MediaMatcher;\n  private mediaQueryList?: MediaQueryList;\n  private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() _iconOnly = true;\n\n  /**\n   * The rendering style of the badge.\n   */\n  @Prop({ reflect: true }) variant: 'filled' | 'outlined' = 'filled';\n\n  /**\n   * The color palette of the badge.\n   */\n  @Prop({ reflect: true }) color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'primary';\n\n  /**\n   * The size of the badge.\n   */\n  @Prop({ reflect: true }) size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round badge edges.\n   */\n  @Prop({ reflect: true }) round = false;\n\n  /**\n   * Draw attention to the badge with a subtle animation.\n   */\n  @Prop({ reflect: true }) pulse = false;\n\n  /**\n   * The name of an icon to be displayed in the button.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Hide the actual button content and only display the icon.\n   */\n  @Prop() iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  @Watch('iconOnly')\n  onIconOnlyChanged(value: boolean | Breakpoint): void {\n    // teardown\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n    this.mediaQueryList = undefined;\n    this.mediaQueryListener = undefined;\n    // setup\n    if (isBreakpoint(value)) {\n      this.mediaMatcher ??= new MediaMatcher();\n      this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n      this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n      this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n      this._iconOnly = this.mediaQueryList.matches;\n    } else {\n      this._iconOnly = value;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.onIconOnlyChanged(this.iconOnly);\n  }\n\n  private get isIconBadge() {\n    return Boolean(this.icon) && this._iconOnly;\n  }\n\n  private get hasPrefixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n  }\n\n  private get hasSuffixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n  }\n\n  private get iconSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n      case 's':\n        return 'xs';\n      case 'l':\n      case 'xl':\n        return 'l';\n      default:\n        return 'm';\n    }\n  }\n\n  render() {\n    return (\n      <Host data-icon-badge={this.isIconBadge ? this.size : null}>\n        {this.hasPrefixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null}\n        {this.isIconBadge ? (\n          <cat-icon icon={this.icon} size={this.iconSize} class=\"icon-only\"></cat-icon>\n        ) : (\n          <slot></slot>\n        )}\n        {this.hasSuffixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cat-badge.js","sourceRoot":"","sources":["../../../src/components/cat-badge/cat-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/**\n * Badges are used to inform users of the status of an object or of an action\n * that’s been taken.\n */\n@Component({\n  tag: 'cat-badge',\n  styleUrl: 'cat-badge.scss',\n  shadow: true\n})\nexport class CatBadge {\n  private mediaMatcher?: MediaMatcher;\n  private mediaQueryList?: MediaQueryList;\n  private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() _iconOnly = true;\n\n  /**\n   * The rendering style of the badge.\n   */\n  @Prop({ reflect: true }) variant: 'filled' | 'outlined' = 'filled';\n\n  /**\n   * The color palette of the badge.\n   */\n  @Prop({ reflect: true }) color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'primary';\n\n  /**\n   * The size of the badge.\n   */\n  @Prop({ reflect: true }) size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round badge edges.\n   */\n  @Prop({ reflect: true }) round = false;\n\n  /**\n   * Draw attention to the badge with a subtle animation.\n   */\n  @Prop({ reflect: true }) pulse = false;\n\n  /**\n   * The name of an icon to be displayed in the button.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Hide the actual button content and only display the icon.\n   */\n  @Prop() iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  @Watch('iconOnly')\n  onIconOnlyChanged(value: boolean | Breakpoint): void {\n    // teardown\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n    this.mediaQueryList = undefined;\n    this.mediaQueryListener = undefined;\n    // setup\n    if (isBreakpoint(value)) {\n      this.mediaMatcher ??= new MediaMatcher();\n      this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n      this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n      this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n      this._iconOnly = this.mediaQueryList.matches;\n    } else {\n      this._iconOnly = value;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.onIconOnlyChanged(this.iconOnly);\n  }\n\n  private get isIconBadge() {\n    return Boolean(this.icon) && this._iconOnly;\n  }\n\n  private get hasPrefixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n  }\n\n  private get hasSuffixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n  }\n\n  private get iconSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n      case 's':\n        return 'xs';\n      case 'l':\n      case 'xl':\n        return 'l';\n      default:\n        return 'm';\n    }\n  }\n\n  render() {\n    return (\n      <Host data-icon-badge={this.isIconBadge ? this.size : null}>\n        {this.hasPrefixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null}\n        {this.isIconBadge ? (\n          <cat-icon icon={this.icon} size={this.iconSize} class=\"icon-only\"></cat-icon>\n        ) : (\n          <slot></slot>\n        )}\n        {this.hasSuffixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cat-button/cat-button.css

@@ -518,13 +518,15 @@
   margin-right: -1.25rem;
 }
 
-:host(.cat-tab)::part(button) {
+:host(.cat-tab)::part(button),
+:host(.cat-tab-more-button)::part(button) {
   padding: 1.125rem 0.75rem;
   --cat-secondary-bg: transparent;
   --cat-primary-text: transparent;
   --cat-danger-text: transparent;
 }
-:host(.cat-tab)::part(content)::before {
+:host(.cat-tab)::part(content)::before,
+:host(.cat-tab-more-button)::part(content)::before {
   content: attr(data-text);
   content: attr(data-text)/"";
   height: 0;

package/dist/collection/components/cat-button/cat-button.js

@@ -15,29 +15,53 @@ export class CatButton {
     constructor() {
         this._iconOnly = true;
         this.hasSlottedContent = false;
+        /**
+         * The rendering style of the button.
+         */
         this.variant = 'outlined';
+        /**
+         * The color palette of the button.
+         */
         this.color = 'secondary';
+        /**
+         * Set the button into an active state.
+         */
         this.active = false;
+        /**
+         * The size of the button.
+         */
         this.size = 'm';
-        this.name = undefined;
-        this.value = undefined;
+        /**
+         * Specifies that the button should be disabled. A disabled button is unusable
+         * and un-clickable. Corresponds with the native HTML disabled attribute.
+         */
         this.disabled = false;
+        /**
+         * Displays the button in a loading state with a spinner. Just like a disabled
+         * button, an inactive button is unusable and un-clickable. However, it
+         * retains the current focus state.
+         */
         this.loading = false;
+        /**
+         * Allows the button to submit a form.
+         */
         this.submit = false;
+        /**
+         * Disables ellipse overflowing button content.
+         */
         this.noEllipsis = false;
+        /**
+         * Use round button edges.
+         */
         this.round = false;
-        this.url = undefined;
-        this.urlTarget = undefined;
-        this.icon = undefined;
+        /**
+         * Hide the actual button content and only display the icon.
+         */
         this.iconOnly = false;
+        /**
+         * Display the icon on the right.
+         */
         this.iconRight = false;
-        this.buttonId = undefined;
-        this.a11yLabel = undefined;
-        this.a11yCurrent = undefined;
-        this.nativeAttributes = undefined;
-        this.nativeContentAttributes = undefined;
-        this.testId = undefined;
-        this.buttonGroupPosition = undefined;
     }
     onIconOnlyChanged(value) {
         // teardown
@@ -193,6 +217,7 @@ export class CatButton {
         return {
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "'filled' | 'outlined' | 'text' | 'link'",
@@ -205,12 +230,14 @@ export class CatButton {
                     "tags": [],
                     "text": "The rendering style of the button."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'outlined'"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
@@ -223,12 +250,14 @@ export class CatButton {
                     "tags": [],
                     "text": "The color palette of the button."
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'secondary'"
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -241,12 +270,14 @@ export class CatButton {
                     "tags": [],
                     "text": "Set the button into an active state."
                 },
-                "attribute": "active",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'xs' | 's' | 'm' | 'l' | 'xl'",
@@ -259,12 +290,14 @@ export class CatButton {
                     "tags": [],
                     "text": "The size of the button."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'m'"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -277,11 +310,13 @@ export class CatButton {
                     "tags": [],
                     "text": "The name of the button, which gets paired with the button's value when\nsubmitted as part of a form. Corresponds with the native HTML name\nattribute."
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -294,11 +329,13 @@ export class CatButton {
                     "tags": [],
                     "text": "The value of the button, which gets paired with the button's name when\nsubmitted as part of a form. Corresponds with the native HTML value\nattribute."
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -311,12 +348,14 @@ export class CatButton {
                     "tags": [],
                     "text": "Specifies that the button should be disabled. A disabled button is unusable\nand un-clickable. Corresponds with the native HTML disabled attribute."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -329,12 +368,14 @@ export class CatButton {
                     "tags": [],
                     "text": "Displays the button in a loading state with a spinner. Just like a disabled\nbutton, an inactive button is unusable and un-clickable. However, it\nretains the current focus state."
                 },
-                "attribute": "loading",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "submit": {
                 "type": "boolean",
+                "attribute": "submit",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -347,12 +388,14 @@ export class CatButton {
                     "tags": [],
                     "text": "Allows the button to submit a form."
                 },
-                "attribute": "submit",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "noEllipsis": {
                 "type": "boolean",
+                "attribute": "no-ellipsis",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -365,12 +408,14 @@ export class CatButton {
                     "tags": [],
                     "text": "Disables ellipse overflowing button content."
                 },
-                "attribute": "no-ellipsis",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "round": {
                 "type": "boolean",
+                "attribute": "round",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -383,12 +428,14 @@ export class CatButton {
                     "tags": [],
                     "text": "Use round button edges."
                 },
-                "attribute": "round",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -401,11 +448,13 @@ export class CatButton {
                     "tags": [],
                     "text": "A destination to link to, rendered in the href attribute of a link."
                 },
-                "attribute": "url",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "urlTarget": {
                 "type": "string",
+                "attribute": "url-target",
                 "mutable": false,
                 "complexType": {
                     "original": "'_blank' | '_self'",
@@ -418,11 +467,13 @@ export class CatButton {
                     "tags": [],
                     "text": "Specifies where to open the linked document."
                 },
-                "attribute": "url-target",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -435,11 +486,13 @@ export class CatButton {
                     "tags": [],
                     "text": "The name of an icon to be displayed in the button."
                 },
-                "attribute": "icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "iconOnly": {
                 "type": "any",
+                "attribute": "icon-only",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean | Breakpoint",
@@ -458,12 +511,14 @@ export class CatButton {
                     "tags": [],
                     "text": "Hide the actual button content and only display the icon."
                 },
-                "attribute": "icon-only",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "iconRight": {
                 "type": "boolean",
+                "attribute": "icon-right",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -476,12 +531,14 @@ export class CatButton {
                     "tags": [],
                     "text": "Display the icon on the right."
                 },
-                "attribute": "icon-right",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "buttonId": {
                 "type": "string",
+                "attribute": "button-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -494,11 +551,13 @@ export class CatButton {
                     "tags": [],
                     "text": "Adds a unique identifier for the button. Please note that with this\nparticular component this ID is added inside the web component. If you need\nan ID on the HTML element, use the regular `id` attribute instead."
                 },
-                "attribute": "button-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "a11yLabel": {
                 "type": "string",
+                "attribute": "a11y-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -511,11 +570,13 @@ export class CatButton {
                     "tags": [],
                     "text": "Adds accessible label for the button that is only shown for screen\nreaders. Typically, this label text replaces the visible text on the\nbutton for users who use assistive technology."
                 },
-                "attribute": "a11y-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "a11yCurrent": {
                 "type": "string",
+                "attribute": "a11y-current",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -528,11 +589,13 @@ export class CatButton {
                     "tags": [],
                     "text": "Sets the `aria-current` attribute on the button."
                 },
-                "attribute": "a11y-current",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "nativeAttributes": {
                 "type": "unknown",
+                "attribute": "native-attributes",
                 "mutable": false,
                 "complexType": {
                     "original": "{ [key: string]: string }",
@@ -544,10 +607,13 @@ export class CatButton {
                 "docs": {
                     "tags": [],
                     "text": "Attributes that will be added to the native HTML button element"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "nativeContentAttributes": {
                 "type": "unknown",
+                "attribute": "native-content-attributes",
                 "mutable": false,
                 "complexType": {
                     "original": "{ [key: string]: string }",
@@ -559,10 +625,13 @@ export class CatButton {
                 "docs": {
                     "tags": [],
                     "text": "Attributes that will be added to the native HTML button content element"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "testId": {
                 "type": "string",
+                "attribute": "test-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -575,11 +644,13 @@ export class CatButton {
                     "tags": [],
                     "text": "A unique identifier for the underlying native element that is used for\ntesting purposes. The attribute is added as `data-test` attribute and acts\nas a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`."
                 },
-                "attribute": "test-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "buttonGroupPosition": {
                 "type": "string",
+                "attribute": "button-group-position",
                 "mutable": false,
                 "complexType": {
                     "original": "'first' | 'last' | 'middle'",
@@ -592,7 +663,8 @@ export class CatButton {
                     "tags": [],
                     "text": "The index of a button that is used inside a cat-button-group component"
                 },
-                "attribute": "button-group-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };