@haiilo/catalyst 0.3.1 → 0.5.0

package/dist/components/cat-button.js

@@ -1,650 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './cat-icon2.js';
-import { d as defineCustomElement$2 } from './cat-spinner2.js';
-
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function createCommonjsModule(fn, basedir, module) {
-	return module = {
-		path: basedir,
-		exports: {},
-		require: function (path, base) {
-			return commonjsRequire();
-		}
-	}, fn(module, module.exports), module.exports;
-}
-
-function commonjsRequire () {
-	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
-}
-
-var loglevel = createCommonjsModule(function (module) {
-/*
-* loglevel - https://github.com/pimterry/loglevel
-*
-* Copyright (c) 2013 Tim Perry
-* Licensed under the MIT license.
-*/
-(function (root, definition) {
-    if (module.exports) {
-        module.exports = definition();
-    } else {
-        root.log = definition();
-    }
-}(commonjsGlobal, function () {
-
-    // Slightly dubious tricks to cut down minimized file size
-    var noop = function() {};
-    var undefinedType = "undefined";
-    var isIE = (typeof window !== undefinedType) && (typeof window.navigator !== undefinedType) && (
-        /Trident\/|MSIE /.test(window.navigator.userAgent)
-    );
-
-    var logMethods = [
-        "trace",
-        "debug",
-        "info",
-        "warn",
-        "error"
-    ];
-
-    // Cross-browser bind equivalent that works at least back to IE6
-    function bindMethod(obj, methodName) {
-        var method = obj[methodName];
-        if (typeof method.bind === 'function') {
-            return method.bind(obj);
-        } else {
-            try {
-                return Function.prototype.bind.call(method, obj);
-            } catch (e) {
-                // Missing bind shim or IE8 + Modernizr, fallback to wrapping
-                return function() {
-                    return Function.prototype.apply.apply(method, [obj, arguments]);
-                };
-            }
-        }
-    }
-
-    // Trace() doesn't print the message in IE, so for that case we need to wrap it
-    function traceForIE() {
-        if (console.log) {
-            if (console.log.apply) {
-                console.log.apply(console, arguments);
-            } else {
-                // In old IE, native console methods themselves don't have apply().
-                Function.prototype.apply.apply(console.log, [console, arguments]);
-            }
-        }
-        if (console.trace) console.trace();
-    }
-
-    // Build the best logging method possible for this env
-    // Wherever possible we want to bind, not wrap, to preserve stack traces
-    function realMethod(methodName) {
-        if (methodName === 'debug') {
-            methodName = 'log';
-        }
-
-        if (typeof console === undefinedType) {
-            return false; // No method possible, for now - fixed later by enableLoggingWhenConsoleArrives
-        } else if (methodName === 'trace' && isIE) {
-            return traceForIE;
-        } else if (console[methodName] !== undefined) {
-            return bindMethod(console, methodName);
-        } else if (console.log !== undefined) {
-            return bindMethod(console, 'log');
-        } else {
-            return noop;
-        }
-    }
-
-    // These private functions always need `this` to be set properly
-
-    function replaceLoggingMethods(level, loggerName) {
-        /*jshint validthis:true */
-        for (var i = 0; i < logMethods.length; i++) {
-            var methodName = logMethods[i];
-            this[methodName] = (i < level) ?
-                noop :
-                this.methodFactory(methodName, level, loggerName);
-        }
-
-        // Define log.log as an alias for log.debug
-        this.log = this.debug;
-    }
-
-    // In old IE versions, the console isn't present until you first open it.
-    // We build realMethod() replacements here that regenerate logging methods
-    function enableLoggingWhenConsoleArrives(methodName, level, loggerName) {
-        return function () {
-            if (typeof console !== undefinedType) {
-                replaceLoggingMethods.call(this, level, loggerName);
-                this[methodName].apply(this, arguments);
-            }
-        };
-    }
-
-    // By default, we use closely bound real methods wherever possible, and
-    // otherwise we wait for a console to appear, and then try again.
-    function defaultMethodFactory(methodName, level, loggerName) {
-        /*jshint validthis:true */
-        return realMethod(methodName) ||
-               enableLoggingWhenConsoleArrives.apply(this, arguments);
-    }
-
-    function Logger(name, defaultLevel, factory) {
-      var self = this;
-      var currentLevel;
-      defaultLevel = defaultLevel == null ? "WARN" : defaultLevel;
-
-      var storageKey = "loglevel";
-      if (typeof name === "string") {
-        storageKey += ":" + name;
-      } else if (typeof name === "symbol") {
-        storageKey = undefined;
-      }
-
-      function persistLevelIfPossible(levelNum) {
-          var levelName = (logMethods[levelNum] || 'silent').toUpperCase();
-
-          if (typeof window === undefinedType || !storageKey) return;
-
-          // Use localStorage if available
-          try {
-              window.localStorage[storageKey] = levelName;
-              return;
-          } catch (ignore) {}
-
-          // Use session cookie as fallback
-          try {
-              window.document.cookie =
-                encodeURIComponent(storageKey) + "=" + levelName + ";";
-          } catch (ignore) {}
-      }
-
-      function getPersistedLevel() {
-          var storedLevel;
-
-          if (typeof window === undefinedType || !storageKey) return;
-
-          try {
-              storedLevel = window.localStorage[storageKey];
-          } catch (ignore) {}
-
-          // Fallback to cookies if local storage gives us nothing
-          if (typeof storedLevel === undefinedType) {
-              try {
-                  var cookie = window.document.cookie;
-                  var location = cookie.indexOf(
-                      encodeURIComponent(storageKey) + "=");
-                  if (location !== -1) {
-                      storedLevel = /^([^;]+)/.exec(cookie.slice(location))[1];
-                  }
-              } catch (ignore) {}
-          }
-
-          // If the stored level is not valid, treat it as if nothing was stored.
-          if (self.levels[storedLevel] === undefined) {
-              storedLevel = undefined;
-          }
-
-          return storedLevel;
-      }
-
-      function clearPersistedLevel() {
-          if (typeof window === undefinedType || !storageKey) return;
-
-          // Use localStorage if available
-          try {
-              window.localStorage.removeItem(storageKey);
-              return;
-          } catch (ignore) {}
-
-          // Use session cookie as fallback
-          try {
-              window.document.cookie =
-                encodeURIComponent(storageKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
-          } catch (ignore) {}
-      }
-
-      /*
-       *
-       * Public logger API - see https://github.com/pimterry/loglevel for details
-       *
-       */
-
-      self.name = name;
-
-      self.levels = { "TRACE": 0, "DEBUG": 1, "INFO": 2, "WARN": 3,
-          "ERROR": 4, "SILENT": 5};
-
-      self.methodFactory = factory || defaultMethodFactory;
-
-      self.getLevel = function () {
-          return currentLevel;
-      };
-
-      self.setLevel = function (level, persist) {
-          if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) {
-              level = self.levels[level.toUpperCase()];
-          }
-          if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) {
-              currentLevel = level;
-              if (persist !== false) {  // defaults to true
-                  persistLevelIfPossible(level);
-              }
-              replaceLoggingMethods.call(self, level, name);
-              if (typeof console === undefinedType && level < self.levels.SILENT) {
-                  return "No console available for logging";
-              }
-          } else {
-              throw "log.setLevel() called with invalid level: " + level;
-          }
-      };
-
-      self.setDefaultLevel = function (level) {
-          defaultLevel = level;
-          if (!getPersistedLevel()) {
-              self.setLevel(level, false);
-          }
-      };
-
-      self.resetLevel = function () {
-          self.setLevel(defaultLevel, false);
-          clearPersistedLevel();
-      };
-
-      self.enableAll = function(persist) {
-          self.setLevel(self.levels.TRACE, persist);
-      };
-
-      self.disableAll = function(persist) {
-          self.setLevel(self.levels.SILENT, persist);
-      };
-
-      // Initialize with the right level
-      var initialLevel = getPersistedLevel();
-      if (initialLevel == null) {
-          initialLevel = defaultLevel;
-      }
-      self.setLevel(initialLevel, false);
-    }
-
-    /*
-     *
-     * Top-level API
-     *
-     */
-
-    var defaultLogger = new Logger();
-
-    var _loggersByName = {};
-    defaultLogger.getLogger = function getLogger(name) {
-        if ((typeof name !== "symbol" && typeof name !== "string") || name === "") {
-          throw new TypeError("You must supply a name when creating a logger.");
-        }
-
-        var logger = _loggersByName[name];
-        if (!logger) {
-          logger = _loggersByName[name] = new Logger(
-            name, defaultLogger.getLevel(), defaultLogger.methodFactory);
-        }
-        return logger;
-    };
-
-    // Grab the current global log variable in case of overwrite
-    var _log = (typeof window !== undefinedType) ? window.log : undefined;
-    defaultLogger.noConflict = function() {
-        if (typeof window !== undefinedType &&
-               window.log === defaultLogger) {
-            window.log = _log;
-        }
-
-        return defaultLogger;
-    };
-
-    defaultLogger.getLoggers = function getLoggers() {
-        return _loggersByName;
-    };
-
-    // ES6 default export, for compatibility
-    defaultLogger['default'] = defaultLogger;
-
-    return defaultLogger;
-}));
-});
-
-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)'
-};
-function isBreakpoint(value) {
-  return typeof value === 'string' && _breakpoints.includes(value);
-}
-
-// https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts
-// Whether the current platform supports the V8 Break Iterator. The V8 check
-// is necessary to detect all Blink based browsers.
-let hasV8BreakIterator;
-// We need a try/catch around the reference to `Intl`, because accessing it in some cases can
-// cause IE to throw. These cases are tied to particular versions of Windows and can happen if
-// the consumer is providing a polyfilled `Map`. See:
-// 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;
-}
-catch (_a) {
-  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;
-  }
-}
-
-// https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts
-/** Global registry for all dynamically-created, injected media queries. */
-const mediaQueriesForWebkitCompatibility = new Set();
-/** Style tag that holds all of the dynamically-created media queries. */
-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);
-    }
-    return this._matchMedia(query);
-  }
-}
-/**
- * Creates an empty stylesheet that is used to work around browser inconsistencies related to
- * `matchMedia`. At the time of writing, it handles the following cases:
- * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`
- * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.
- * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules
- * inside the `@media` match existing elements on the page. We work around it by having one rule
- * 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 (mediaQueryStyleNode.sheet) {
-      mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);
-      mediaQueriesForWebkitCompatibility.add(query);
-    }
-  }
-  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;}.cat-button{font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:0.25rem;text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid #0071ff;outline-offset:1px}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.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-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.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:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.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:none}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:underline}.cat-button-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--base:var(--cat-primary-text, 32, 127, 138)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 28, 112, 122);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 28, 112, 122)}.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 25, 101, 110);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 25, 101, 110)}.cat-button-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--base:105, 118, 135}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text:174, 42, 10}.cat-button-xs{min-width:1.5rem;padding:0.25rem 0.25rem;font-size:0.875rem;line-height:1rem}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1rem;padding-right:1rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left: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-context(nav) .cat-button-s{padding-left:1rem;padding-right:1rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left: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-context(nav) .cat-button-m{padding-left:1rem;padding-right:1rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left: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-context(nav) .cat-button-l{padding-left:1rem;padding-right:1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1rem;padding-right:1rem}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host-context(nav) .cat-button-content{text-align:left}:host([hidden]){display:none}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}";
-
-const CatButton$1 = /*@__PURE__*/ proxyCustomElement(class 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;
-    /**
-     * The rendering style of the button.
-     */
-    this.variant = 'outlined';
-    /**
-     * The color palette of the button.
-     */
-    this.color = 'secondary';
-    /**
-     * The size of the button.
-     */
-    this.size = 'm';
-    /**
-     * 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;
-    /**
-     * Ellipse overflowing button content.
-     */
-    this.ellipsed = true;
-    /**
-     * Use round button edges.
-     */
-    this.round = false;
-    /**
-     * Hide the actual button content and only display the icon.
-     */
-    this.iconOnly = false;
-    /**
-     * Display the icon as a suffix.
-     */
-    this.iconSuffix = false;
-  }
-  onIconOnlyChanged(value) {
-    var _a, _b;
-    // teardown
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    (_a = this.mediaQueryList) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.mediaQueryListener);
-    this.mediaQueryList = undefined;
-    this.mediaQueryListener = undefined;
-    // setup
-    if (isBreakpoint(value)) {
-      (_b = this.mediaMatcher) !== null && _b !== void 0 ? _b : (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);
-    }
-  }
-  haltDisabledEvents(event) {
-    if (this.disabled || this.loading) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-    }
-  }
-  /**
-   * Sets focus on the button. Use this method instead of `button.focus()`.
-   *
-   * @param options An optional object providing options to control aspects of
-   * the focusing process.
-   */
-  async setFocus(options) {
-    this.button.focus(options);
-  }
-  render() {
-    var _a;
-    if (this.url) {
-      return (h("a", { ref: el => (this.button = el), href: this.disabled ? undefined : this.url, target: this.urlTarget, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, id: this.buttonId, part: "button", class: {
-          'cat-button': true,
-          'cat-button-icon': this.isIconButton,
-          'cat-button-round': this.round,
-          'cat-button-loading': this.loading,
-          'cat-button-disabled': this.disabled,
-          'cat-button-ellipsed': this.ellipsed && !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", { 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, id: this.buttonId, part: "button", class: {
-          'cat-button': true,
-          'cat-button-icon': this.isIconButton,
-          'cat-button-round': (_a = this.round) !== null && _a !== void 0 ? _a : this.isIconButton,
-          'cat-button-loading': this.loading,
-          'cat-button-disabled': this.disabled,
-          'cat-button-ellipsed': this.ellipsed && !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));
-    }
-  }
-  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 isIconButton() {
-    return Boolean(this.icon) && this._iconOnly;
-  }
-  get hasPrefixIcon() {
-    return Boolean(this.icon) && !this._iconOnly && !this.iconSuffix;
-  }
-  get hasSuffixIcon() {
-    return Boolean(this.icon) && !this._iconOnly && this.iconSuffix;
-  }
-  get content() {
-    return [
-      this.hasPrefixIcon ? (h("cat-icon", { icon: this.icon, size: this.iconSize, class: "cat-button-prefix", part: "prefix" })) : null,
-      this.isIconButton ? (h("cat-icon", { icon: this.icon, size: this.iconSize })) : (h("span", { class: "cat-button-content", part: "content" }, h("slot", null))),
-      this.hasSuffixIcon ? (h("cat-icon", { icon: this.icon, size: this.iconSize, class: "cat-button-suffix", 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],
-    "size": [1],
-    "name": [1],
-    "value": [1],
-    "disabled": [4],
-    "loading": [4],
-    "submit": [4],
-    "ellipsed": [4],
-    "round": [4],
-    "url": [1],
-    "urlTarget": [1, "url-target"],
-    "icon": [1],
-    "iconOnly": [8, "icon-only"],
-    "iconSuffix": [4, "icon-suffix"],
-    "buttonId": [1, "button-id"],
-    "a11yLabel": [1, "a11y-label"],
-    "_iconOnly": [32],
-    "setFocus": [64]
-  }, [[0, "click", "haltDisabledEvents"]]]);
-function defineCustomElement$1() {
-  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$1);
-      }
-      break;
-    case "cat-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "cat-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { C as CatButton$1, d as defineCustomElement$1 } from './cat-button2.js';
 
 const CatButton = CatButton$1;
 const defineCustomElement = defineCustomElement$1;