@haiilo/catalyst 8.1.0 → 8.2.0

package/dist/components/cat-button2.js

@@ -5,14 +5,14 @@ import { d as defineCustomElement$1 } from './cat-spinner2.js';
 
 const _breakpoints = ['xs', 's', 'm', 'l', 'xl'];
 const Breakpoints = {
-  xs: '(max-width: 539.98px)',
-  s: '(max-width: 767.98px)',
-  m: '(max-width: 991.98px)',
-  l: '(max-width: 1199.98px)',
-  xl: '(max-width: 1399.98px)'
+    xs: '(max-width: 539.98px)',
+    s: '(max-width: 767.98px)',
+    m: '(max-width: 991.98px)',
+    l: '(max-width: 1199.98px)',
+    xl: '(max-width: 1399.98px)'
 };
 function isBreakpoint(value) {
-  return typeof value === 'string' && _breakpoints.includes(value);
+    return typeof value === 'string' && _breakpoints.includes(value);
 }
 
 // https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts
@@ -25,44 +25,44 @@ let hasV8BreakIterator;
 // https://github.com/Microsoft/ChakraCore/issues/3189
 // https://github.com/angular/components/issues/15687
 try {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  hasV8BreakIterator = typeof Intl !== 'undefined' && Intl.v8BreakIterator;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    hasV8BreakIterator = typeof Intl !== 'undefined' && Intl.v8BreakIterator;
 }
 catch {
-  hasV8BreakIterator = false;
+    hasV8BreakIterator = false;
 }
 class Platform {
-  constructor() {
-    /** Whether the current browser is Microsoft Edge. */
-    this.EDGE = /(edge)/i.test(navigator.userAgent);
-    /** Whether the current rendering engine is Microsoft Trident. */
-    this.TRIDENT = /(msie|trident)/i.test(navigator.userAgent);
-    // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.
-    /** Whether the current rendering engine is Blink. */
-    this.BLINK = 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    !!(window.chrome || hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;
-    // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to
-    // ensure that Webkit runs standalone and is not used as another engine's base.
-    /** Whether the current rendering engine is WebKit. */
-    this.WEBKIT = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;
-    /** Whether the current platform is Apple iOS. */
-    this.IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);
-    // It's difficult to detect the plain Gecko engine, because most of the browsers identify
-    // them self as Gecko-like browsers and modify the userAgent's according to that.
-    // Since we only cover one explicit Firefox case, we can simply check for Firefox
-    // instead of having an unstable check for Gecko.
-    /** Whether the current browser is Firefox. */
-    this.FIREFOX = /(firefox|minefield)/i.test(navigator.userAgent);
-    /** Whether the current platform is Android. */
-    // Trident on mobile adds the android platform to the userAgent to trick detections.
-    this.ANDROID = /android/i.test(navigator.userAgent) && !this.TRIDENT;
-    // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake
-    // this and just place the Safari keyword in the userAgent. To be more safe about Safari every
-    // Safari browser should also use Webkit as its layout engine.
-    /** Whether the current browser is Safari. */
-    this.SAFARI = /safari/i.test(navigator.userAgent) && this.WEBKIT;
-  }
+    constructor() {
+        /** Whether the current browser is Microsoft Edge. */
+        this.EDGE = /(edge)/i.test(navigator.userAgent);
+        /** Whether the current rendering engine is Microsoft Trident. */
+        this.TRIDENT = /(msie|trident)/i.test(navigator.userAgent);
+        // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.
+        /** Whether the current rendering engine is Blink. */
+        this.BLINK = 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        !!(window.chrome || hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;
+        // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to
+        // ensure that Webkit runs standalone and is not used as another engine's base.
+        /** Whether the current rendering engine is WebKit. */
+        this.WEBKIT = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;
+        /** Whether the current platform is Apple iOS. */
+        this.IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);
+        // It's difficult to detect the plain Gecko engine, because most of the browsers identify
+        // them self as Gecko-like browsers and modify the userAgent's according to that.
+        // Since we only cover one explicit Firefox case, we can simply check for Firefox
+        // instead of having an unstable check for Gecko.
+        /** Whether the current browser is Firefox. */
+        this.FIREFOX = /(firefox|minefield)/i.test(navigator.userAgent);
+        /** Whether the current platform is Android. */
+        // Trident on mobile adds the android platform to the userAgent to trick detections.
+        this.ANDROID = /android/i.test(navigator.userAgent) && !this.TRIDENT;
+        // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake
+        // this and just place the Safari keyword in the userAgent. To be more safe about Safari every
+        // Safari browser should also use Webkit as its layout engine.
+        /** Whether the current browser is Safari. */
+        this.SAFARI = /safari/i.test(navigator.userAgent) && this.WEBKIT;
+    }
 }
 
 // https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts
@@ -72,22 +72,22 @@ const mediaQueriesForWebkitCompatibility = new Set();
 let mediaQueryStyleNode;
 /** A utility for calling matchMedia queries. */
 class MediaMatcher {
-  constructor() {
-    this._platform = new Platform();
-    this._matchMedia = window.matchMedia.bind(window);
-  }
-  /**
-   * Evaluates the given media query and returns the native MediaQueryList from which results
-   * can be retrieved.
-   * Confirms the layout engine will trigger for the selector query provided and returns the
-   * MediaQueryList for the query provided.
-   */
-  matchMedia(query) {
-    if (this._platform.WEBKIT || this._platform.BLINK) {
-      createEmptyStyleRule(query);
+    constructor() {
+        this._platform = new Platform();
+        this._matchMedia = window.matchMedia.bind(window);
+    }
+    /**
+     * Evaluates the given media query and returns the native MediaQueryList from which results
+     * can be retrieved.
+     * Confirms the layout engine will trigger for the selector query provided and returns the
+     * MediaQueryList for the query provided.
+     */
+    matchMedia(query) {
+        if (this._platform.WEBKIT || this._platform.BLINK) {
+            createEmptyStyleRule(query);
+        }
+        return this._matchMedia(query);
     }
-    return this._matchMedia(query);
-  }
 }
 /**
  * Creates an empty stylesheet that is used to work around browser inconsistencies related to
@@ -99,244 +99,244 @@ class MediaMatcher {
  * targeting the `body`. See https://github.com/angular/components/issues/23546.
  */
 function createEmptyStyleRule(query) {
-  if (mediaQueriesForWebkitCompatibility.has(query)) {
-    return;
-  }
-  try {
-    if (!mediaQueryStyleNode) {
-      mediaQueryStyleNode = document.createElement('style');
-      mediaQueryStyleNode.setAttribute('type', 'text/css');
-      document.head.appendChild(mediaQueryStyleNode);
+    if (mediaQueriesForWebkitCompatibility.has(query)) {
+        return;
     }
-    if (mediaQueryStyleNode.sheet) {
-      mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);
-      mediaQueriesForWebkitCompatibility.add(query);
+    try {
+        if (!mediaQueryStyleNode) {
+            mediaQueryStyleNode = document.createElement('style');
+            mediaQueryStyleNode.setAttribute('type', 'text/css');
+            document.head.appendChild(mediaQueryStyleNode);
+        }
+        if (mediaQueryStyleNode.sheet) {
+            mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);
+            mediaQueriesForWebkitCompatibility.add(query);
+        }
+    }
+    catch (e) {
+        loglevel.error(e);
     }
-  }
-  catch (e) {
-    loglevel.error(e);
-  }
 }
 
-const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-group-button-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-group-button-middle{border-radius:0}.cat-group-button-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-group-button:hover{z-index:1}.cat-group-button:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none)}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-link{background-color:transparent;color:rgb(var(--text))}.cat-button-link.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-decoration-hover, underline)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-info{--bg:var(--cat-success-bg, 0, 115, 230);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 115, 230);--base:var(--cat-success-text, 0, 115, 230)}.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 107, 227);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 107, 227)}.cat-button-info.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-info:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 96, 223);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 96, 223)}.cat-button-success{--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-warning{--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-danger{--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;gap:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host(.cat-tab)::part(button){padding:1.125rem 0.75rem;--cat-primary-text:transparent;--cat-secondary-bg:transparent}:host(.cat-tab)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}";
+const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-group-button-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-group-button-middle{border-radius:0}.cat-group-button-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-group-button:hover{z-index:1}.cat-group-button:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none)}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-link{background-color:transparent;color:rgb(var(--text))}.cat-button-link.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-decoration-hover, underline)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-info{--bg:var(--cat-success-bg, 0, 115, 230);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 115, 230);--base:var(--cat-success-text, 0, 115, 230)}.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 107, 227);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 107, 227)}.cat-button-info.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-info:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 96, 223);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 96, 223)}.cat-button-success{--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-warning{--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-danger{--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;gap:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host(.cat-tab)::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{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}";
 
 const CatButton = /*@__PURE__*/ proxyCustomElement(class CatButton extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.catClick = createEvent(this, "catClick", 7);
-    this.catFocus = createEvent(this, "catFocus", 7);
-    this.catBlur = createEvent(this, "catBlur", 7);
-    this._iconOnly = true;
-    this.variant = 'outlined';
-    this.color = 'secondary';
-    this.active = false;
-    this.size = 'm';
-    this.name = undefined;
-    this.value = undefined;
-    this.disabled = false;
-    this.loading = false;
-    this.submit = false;
-    this.noEllipsis = false;
-    this.round = false;
-    this.url = undefined;
-    this.urlTarget = undefined;
-    this.icon = undefined;
-    this.iconOnly = false;
-    this.iconRight = false;
-    this.buttonId = undefined;
-    this.a11yLabel = undefined;
-    this.a11yCurrent = undefined;
-    this.nativeAttributes = undefined;
-    this.nativeContentAttributes = undefined;
-    this.buttonGroupPosition = undefined;
-  }
-  onIconOnlyChanged(value) {
-    // teardown
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener);
-    this.mediaQueryList = undefined;
-    this.mediaQueryListener = undefined;
-    // setup
-    if (isBreakpoint(value)) {
-      this.mediaMatcher ?? (this.mediaMatcher = new MediaMatcher());
-      this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);
-      this.mediaQueryListener = (event) => (this._iconOnly = event.matches);
-      this.mediaQueryList.addEventListener('change', this.mediaQueryListener);
-      this._iconOnly = this.mediaQueryList.matches;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.catClick = createEvent(this, "catClick", 7);
+        this.catFocus = createEvent(this, "catFocus", 7);
+        this.catBlur = createEvent(this, "catBlur", 7);
+        this._iconOnly = true;
+        this.variant = 'outlined';
+        this.color = 'secondary';
+        this.active = false;
+        this.size = 'm';
+        this.name = undefined;
+        this.value = undefined;
+        this.disabled = false;
+        this.loading = false;
+        this.submit = false;
+        this.noEllipsis = false;
+        this.round = false;
+        this.url = undefined;
+        this.urlTarget = undefined;
+        this.icon = undefined;
+        this.iconOnly = false;
+        this.iconRight = false;
+        this.buttonId = undefined;
+        this.a11yLabel = undefined;
+        this.a11yCurrent = undefined;
+        this.nativeAttributes = undefined;
+        this.nativeContentAttributes = undefined;
+        this.buttonGroupPosition = undefined;
+    }
+    onIconOnlyChanged(value) {
+        // teardown
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener);
+        this.mediaQueryList = undefined;
+        this.mediaQueryListener = undefined;
+        // setup
+        if (isBreakpoint(value)) {
+            this.mediaMatcher ?? (this.mediaMatcher = new MediaMatcher());
+            this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);
+            this.mediaQueryListener = (event) => (this._iconOnly = event.matches);
+            this.mediaQueryList.addEventListener('change', this.mediaQueryListener);
+            this._iconOnly = this.mediaQueryList.matches;
+        }
+        else {
+            this._iconOnly = value;
+        }
+    }
+    componentWillLoad() {
+        this.onIconOnlyChanged(this.iconOnly);
+    }
+    componentWillRender() {
+        if (this.isIconButton && !this.a11yLabel) {
+            loglevel.warn('[A11y] Missing ARIA label on icon button', this);
+        }
     }
-    else {
-      this._iconOnly = value;
+    haltDisabledEvents(event) {
+        if (this.disabled || this.loading) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
     }
-  }
-  componentWillLoad() {
-    this.onIconOnlyChanged(this.iconOnly);
-  }
-  componentWillRender() {
-    if (this.isIconButton && !this.a11yLabel) {
-      loglevel.warn('[A11y] Missing ARIA label on icon button', this);
+    /**
+     * Programmatically move focus to the button. Use this method instead of
+     * `button.focus()`.
+     *
+     * @param options An optional object providing options to control aspects of
+     * the focusing process.
+     */
+    async doFocus(options) {
+        this.button.focus(options);
     }
-  }
-  haltDisabledEvents(event) {
-    if (this.disabled || this.loading) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
+    /**
+     * Programmatically remove focus from the button. Use this method instead of
+     * `button.blur()`.
+     */
+    async doBlur() {
+        this.button.blur();
     }
-  }
-  /**
-   * Programmatically move focus to the button. Use this method instead of
-   * `button.focus()`.
-   *
-   * @param options An optional object providing options to control aspects of
-   * the focusing process.
-   */
-  async doFocus(options) {
-    this.button.focus(options);
-  }
-  /**
-   * Programmatically remove focus from the button. Use this method instead of
-   * `button.blur()`.
-   */
-  async doBlur() {
-    this.button.blur();
-  }
-  /**
-   * Programmatically simulate a click on the button.
-   */
-  async doClick() {
-    this.button.click();
-  }
-  render() {
-    if (this.url) {
-      return (h("a", { ...this.nativeAttributes, ref: el => (this.button = el), href: this.disabled ? undefined : this.url, target: this.urlTarget, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
-          'cat-button': true,
-          'cat-button-active': this.active,
-          'cat-button-icon': this.isIconButton,
-          'cat-button-round': this.round,
-          'cat-button-loading': this.loading,
-          'cat-button-disabled': this.disabled,
-          'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
-          [`cat-button-${this.variant}`]: Boolean(this.variant),
-          [`cat-button-${this.color}`]: Boolean(this.color),
-          [`cat-button-${this.size}`]: Boolean(this.size)
-        }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
+    /**
+     * Programmatically simulate a click on the button.
+     */
+    async doClick() {
+        this.button.click();
     }
-    else {
-      return (h("button", { ...this.nativeAttributes, ref: el => (this.button = el), type: this.submit ? 'submit' : 'button', name: this.name, value: this.value, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
-          'cat-button': true,
-          'cat-button-active': this.active,
-          'cat-button-icon': this.isIconButton,
-          'cat-button-round': this.round ?? this.isIconButton,
-          'cat-button-loading': this.loading,
-          'cat-button-disabled': this.disabled,
-          'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
-          [`cat-button-${this.variant}`]: Boolean(this.variant),
-          [`cat-button-${this.color}`]: Boolean(this.color),
-          [`cat-button-${this.size}`]: Boolean(this.size),
-          [`cat-group-button-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition),
-          'cat-group-button': Boolean(this.buttonGroupPosition)
-        }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
+    render() {
+        if (this.url) {
+            return (h("a", { ...this.nativeAttributes, ref: el => (this.button = el), href: this.disabled ? undefined : this.url, target: this.urlTarget, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
+                    'cat-button': true,
+                    'cat-button-active': this.active,
+                    'cat-button-icon': this.isIconButton,
+                    'cat-button-round': this.round,
+                    'cat-button-loading': this.loading,
+                    'cat-button-disabled': this.disabled,
+                    'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
+                    [`cat-button-${this.variant}`]: Boolean(this.variant),
+                    [`cat-button-${this.color}`]: Boolean(this.color),
+                    [`cat-button-${this.size}`]: Boolean(this.size)
+                }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
+        }
+        else {
+            return (h("button", { ...this.nativeAttributes, ref: el => (this.button = el), type: this.submit ? 'submit' : 'button', name: this.name, value: this.value, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
+                    'cat-button': true,
+                    'cat-button-active': this.active,
+                    'cat-button-icon': this.isIconButton,
+                    'cat-button-round': this.round ?? this.isIconButton,
+                    'cat-button-loading': this.loading,
+                    'cat-button-disabled': this.disabled,
+                    'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
+                    [`cat-button-${this.variant}`]: Boolean(this.variant),
+                    [`cat-button-${this.color}`]: Boolean(this.color),
+                    [`cat-button-${this.size}`]: Boolean(this.size),
+                    [`cat-group-button-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition),
+                    'cat-group-button': Boolean(this.buttonGroupPosition)
+                }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
+        }
     }
-  }
-  get iconSize() {
-    switch (this.size) {
-      case 'xs':
-        return 's';
-      default:
-        return 'l';
+    get iconSize() {
+        switch (this.size) {
+            case 'xs':
+                return 's';
+            default:
+                return 'l';
+        }
     }
-  }
-  get spinnerSize() {
-    switch (this.size) {
-      case 'xs':
-        return 'xs';
-      default:
-        return 'm';
+    get spinnerSize() {
+        switch (this.size) {
+            case 'xs':
+                return 'xs';
+            default:
+                return 'm';
+        }
     }
-  }
-  get isIconButton() {
-    return Boolean(this.icon) && this._iconOnly;
-  }
-  get hasPrefixIcon() {
-    return Boolean(this.icon) && !this._iconOnly && !this.iconRight;
-  }
-  get hasSuffixIcon() {
-    return Boolean(this.icon) && !this._iconOnly && this.iconRight;
-  }
-  get content() {
-    return [
-      this.hasPrefixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null,
-      this.isIconButton ? (h("cat-icon", { icon: this.icon, size: this.iconSize })) : (h("span", { class: "cat-button-content", part: "content", ...this.nativeContentAttributes }, h("span", { class: "cat-button-content-inner" }, h("slot", null)))),
-      this.hasSuffixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "suffix" }) : null,
-      this.loading ? h("cat-spinner", { size: this.spinnerSize }) : null
-    ];
-  }
-  onClick(event) {
-    this.catClick.emit(event);
-  }
-  onFocus(event) {
-    this.catFocus.emit(event);
-  }
-  onBlur(event) {
-    this.catBlur.emit(event);
-  }
-  static get watchers() { return {
-    "iconOnly": ["onIconOnlyChanged"]
-  }; }
-  static get style() { return catButtonCss; }
+    get isIconButton() {
+        return Boolean(this.icon) && this._iconOnly;
+    }
+    get hasPrefixIcon() {
+        return Boolean(this.icon) && !this._iconOnly && !this.iconRight;
+    }
+    get hasSuffixIcon() {
+        return Boolean(this.icon) && !this._iconOnly && this.iconRight;
+    }
+    get content() {
+        return [
+            this.hasPrefixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null,
+            this.isIconButton ? (h("cat-icon", { icon: this.icon, size: this.iconSize })) : (h("span", { class: "cat-button-content", part: "content", ...this.nativeContentAttributes }, h("span", { class: "cat-button-content-inner" }, h("slot", null)))),
+            this.hasSuffixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "suffix" }) : null,
+            this.loading ? h("cat-spinner", { size: this.spinnerSize }) : null
+        ];
+    }
+    onClick(event) {
+        this.catClick.emit(event);
+    }
+    onFocus(event) {
+        this.catFocus.emit(event);
+    }
+    onBlur(event) {
+        this.catBlur.emit(event);
+    }
+    static get watchers() { return {
+        "iconOnly": ["onIconOnlyChanged"]
+    }; }
+    static get style() { return catButtonCss; }
 }, [1, "cat-button", {
-    "variant": [1],
-    "color": [1],
-    "active": [4],
-    "size": [1],
-    "name": [1],
-    "value": [1],
-    "disabled": [4],
-    "loading": [4],
-    "submit": [4],
-    "noEllipsis": [4, "no-ellipsis"],
-    "round": [4],
-    "url": [1],
-    "urlTarget": [1, "url-target"],
-    "icon": [1],
-    "iconOnly": [8, "icon-only"],
-    "iconRight": [4, "icon-right"],
-    "buttonId": [1, "button-id"],
-    "a11yLabel": [1, "a11y-label"],
-    "a11yCurrent": [1, "a11y-current"],
-    "nativeAttributes": [16],
-    "nativeContentAttributes": [16],
-    "buttonGroupPosition": [1, "button-group-position"],
-    "_iconOnly": [32],
-    "doFocus": [64],
-    "doBlur": [64],
-    "doClick": [64]
-  }, [[0, "click", "haltDisabledEvents"]], {
-    "iconOnly": ["onIconOnlyChanged"]
-  }]);
+        "variant": [1],
+        "color": [1],
+        "active": [4],
+        "size": [1],
+        "name": [1],
+        "value": [1],
+        "disabled": [4],
+        "loading": [4],
+        "submit": [4],
+        "noEllipsis": [4, "no-ellipsis"],
+        "round": [4],
+        "url": [1],
+        "urlTarget": [1, "url-target"],
+        "icon": [1],
+        "iconOnly": [8, "icon-only"],
+        "iconRight": [4, "icon-right"],
+        "buttonId": [1, "button-id"],
+        "a11yLabel": [1, "a11y-label"],
+        "a11yCurrent": [1, "a11y-current"],
+        "nativeAttributes": [16],
+        "nativeContentAttributes": [16],
+        "buttonGroupPosition": [1, "button-group-position"],
+        "_iconOnly": [32],
+        "doFocus": [64],
+        "doBlur": [64],
+        "doClick": [64]
+    }, [[0, "click", "haltDisabledEvents"]], {
+        "iconOnly": ["onIconOnlyChanged"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-button", "cat-icon", "cat-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatButton);
-      }
-      break;
-    case "cat-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "cat-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cat-button", "cat-icon", "cat-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cat-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CatButton);
+            }
+            break;
+        case "cat-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "cat-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { CatButton as C, defineCustomElement as d };