@haiilo/catalyst 0.1.1 → 0.2.0

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

@@ -0,0 +1,64 @@
+import { Component, h, Prop } from '@stencil/core';
+/**
+ * Spinners are used to indicate users that their action is being processed.
+ */
+export class CatSpinner {
+  constructor() {
+    /**
+     * The size of the spinner.
+     */
+    this.size = 'm';
+  }
+  render() {
+    return (h("span", { "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
+        [`cat-spinner-${this.size}`]: this.size !== 'inline'
+      } },
+      h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" },
+        h("circle", { cx: "24", cy: "24", r: "21.5" }))));
+  }
+  static get is() { return "cat-spinner"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cat-spinner.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cat-spinner.css"]
+  }; }
+  static get properties() { return {
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'xs' | 's' | 'm' | 'l' | 'xl' | 'inline'",
+        "resolved": "\"inline\" | \"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the spinner."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'m'"
+    },
+    "a11yLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Adds accessible label for the spinner that is only shown for screen\nreaders. The `aria-hidden` attribute will be set if no label is present."
+      },
+      "attribute": "a11y-label",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/index.cdn.js

@@ -0,0 +1,21 @@
+(function (doc) {
+  var scriptElm = doc.scripts[doc.scripts.length - 1];
+  var warn = ['Discouraged script use, please remove: ' + scriptElm.outerHTML];
+
+  warn.push('To improve performance it is recommended to set the script in the head as follows:');
+
+  var parts = scriptElm.src.split('/');
+  parts.pop();
+  // add subfolder(s) here
+  // parts.push('...');
+  var url = parts.join('/');
+
+  scriptElm = doc.createElement('script');
+  scriptElm.setAttribute('type', 'module');
+  scriptElm.src = url + '/catalyst.esm.js';
+  warn.push(scriptElm.outerHTML);
+  scriptElm.setAttribute('data-stencil-namespace', 'catalyst');
+  doc.head.appendChild(scriptElm);
+
+  console.warn(warn.join('\n'));
+})(document);

package/dist/collection/index.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/init.js

@@ -0,0 +1,8 @@
+import { CatIconRegistry } from './components/cat-icon/cat-icon-registry';
+import { ci } from '@haiilo/catalyst-icons';
+function registerIcons() {
+  CatIconRegistry.getInstance().addIcons(ci);
+}
+export default function () {
+  registerIcons();
+}

package/dist/collection/utils/breakpoints.js

@@ -0,0 +1,11 @@
+const _breakpoints = ['xs', 's', 'm', 'l', 'xl'];
+export 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)'
+};
+export function isBreakpoint(value) {
+  return typeof value === 'string' && _breakpoints.includes(value);
+}

package/dist/collection/utils/media-matcher.js

@@ -0,0 +1,54 @@
+import log from 'loglevel';
+import { Platform } from './platform';
+// 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. */
+export 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) {
+    log.error(e);
+  }
+}

package/dist/collection/utils/platform.js

@@ -0,0 +1,49 @@
+// 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;
+}
+export 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;
+  }
+}

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

package/dist/components/cat-alert.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CatAlert extends Components.CatAlert, HTMLElement {}
+export const CatAlert: {
+  prototype: CatAlert;
+  new (): CatAlert;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cat-alert.js

@@ -0,0 +1,43 @@
+import { HTMLElement, h, proxyCustomElement } from '@stencil/core/internal/client';
+
+const catAlertCss = ":host{display:block;margin-bottom:1rem}:host([hidden]){display:none}.cat-alert{font:inherit;color:rgb(var(--text));background-color:rgba(var(--bg), 0.1);box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);border-radius:0.25rem;padding:0.75rem 1rem;width:100%}::slotted(:last-child){margin-bottom:0 !important}.cat-alert-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--text:var(--cat-primary-text, 32, 127, 138);--border:var(--cat-primary-text, 32, 127, 138)}.cat-alert-secondary{--bg:105, 118, 135;--text:0, 0, 0;--border:105, 118, 135}.cat-alert-success{--bg:0, 132, 88;--text:0, 132, 88;--border:0, 132, 88}.cat-alert-warning{--bg:255, 206, 128;--text:159, 97, 0;--border:159, 97, 0}.cat-alert-danger{--bg:217, 52, 13;--text:217, 52, 13;--border:217, 52, 13}";
+
+let CatAlert$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * The color palette of the alert.
+     */
+    this.color = 'primary';
+  }
+  render() {
+    return (h("div", { part: "alert", class: {
+        'cat-alert': true,
+        [`cat-alert-${this.color}`]: Boolean(this.color)
+      } }, h("slot", null)));
+  }
+  static get style() { return catAlertCss; }
+};
+CatAlert$1 = /*@__PURE__*/ proxyCustomElement(CatAlert$1, [1, "cat-alert", {
+    "color": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cat-alert"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cat-alert":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CatAlert$1);
+      }
+      break;
+  } });
+}
+
+const CatAlert = CatAlert$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CatAlert, defineCustomElement };

package/dist/components/cat-badge.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CatBadge extends Components.CatBadge, HTMLElement {}
+export const CatBadge: {
+  prototype: CatBadge;
+  new (): CatBadge;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cat-badge.js

@@ -0,0 +1,67 @@
+import { HTMLElement, h, proxyCustomElement } from '@stencil/core/internal/client';
+
+const catBadgeCss = ":host{display:inline-flex;max-width:100%;vertical-align:baseline}:host([hidden]){display:none}.cat-badge{font:inherit;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:0.125rem;text-decoration:none;width:100%;box-sizing:border-box;line-height:1;white-space:nowrap}.cat-badge slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-badge-round{border-radius:10rem}.cat-badge-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-badge-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}.cat-badge-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);--border:var(--cat-primary-text, 32, 127, 138)}.cat-badge-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}.cat-badge-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}.cat-badge-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}.cat-badge-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}.cat-badge-xs{height:0.75rem;min-width:0.75rem;font-size:0.75rem;padding:0 0.1875rem}.cat-badge-s{height:1rem;min-width:1rem;font-size:0.75rem;padding:0 0.25rem}.cat-badge-m{height:1.25rem;min-width:1.25rem;font-size:0.75rem;padding:0 0.3125rem}.cat-badge-l{height:1.5rem;min-width:1.5rem;font-size:0.875rem;padding:0 0.375rem}.cat-badge-xl{height:1.75rem;min-width:1.75rem;font-size:0.9375rem;padding:0 0.4375rem}.cat-badge-pulse.cat-badge-filled{animation:1.5s ease 0s infinite normal none running pulse}.cat-badge-pulse.cat-badge-outlined{animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0px 0px 0px 0.5rem}100%{box-shadow:transparent 0px 0px 0px 0px}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--border), 0.2)}70%{box-shadow:transparent 0px 0px 0px 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0px 0px 0px 0px, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
+
+let CatBadge$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * 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;
+  }
+  render() {
+    return (h("span", { part: "badge", class: {
+        'cat-badge': true,
+        'cat-badge-round': this.round,
+        'cat-badge-pulse': this.pulse,
+        [`cat-badge-${this.variant}`]: Boolean(this.variant),
+        [`cat-badge-${this.color}`]: Boolean(this.color),
+        [`cat-badge-${this.size}`]: Boolean(this.size)
+      } }, h("slot", null)));
+  }
+  static get style() { return catBadgeCss; }
+};
+CatBadge$1 = /*@__PURE__*/ proxyCustomElement(CatBadge$1, [1, "cat-badge", {
+    "variant": [1],
+    "color": [1],
+    "size": [1],
+    "round": [4],
+    "pulse": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cat-badge"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cat-badge":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CatBadge$1);
+      }
+      break;
+  } });
+}
+
+const CatBadge = CatBadge$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CatBadge, defineCustomElement };

package/dist/{catalyst/cat-button.entry.js → components/cat-button.js}

@@ -1,44 +1,19 @@
-import { r as registerInstance, e as createEvent, h } from './index-45406d3b.js';
+import { HTMLElement, createEvent, h, proxyCustomElement } 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 getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
 function createCommonjsModule(fn, basedir, module) {
 	return module = {
 		path: basedir,
 		exports: {},
 		require: function (path, base) {
-			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
+			return commonjsRequire();
 		}
 	}, fn(module, module.exports), module.exports;
 }
 
-function getDefaultExportFromNamespaceIfPresent (n) {
-	return n && Object.prototype.hasOwnProperty.call(n, 'default') ? n['default'] : n;
-}
-
-function getDefaultExportFromNamespaceIfNotNamed (n) {
-	return n && Object.prototype.hasOwnProperty.call(n, 'default') && Object.keys(n).length === 1 ? n['default'] : n;
-}
-
-function getAugmentedNamespace(n) {
-	if (n.__esModule) return n;
-	var a = Object.defineProperty({}, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
 function commonjsRequire () {
 	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
 }
@@ -51,16 +26,12 @@ var loglevel = createCommonjsModule(function (module) {
 * Licensed under the MIT license.
 */
 (function (root, definition) {
-    "use strict";
-    if (typeof undefined === 'function' && undefined.amd) {
-        undefined(definition);
-    } else if ('object' === 'object' && module.exports) {
+    if (module.exports) {
         module.exports = definition();
     } else {
         root.log = definition();
     }
 }(commonjsGlobal, function () {
-    "use strict";
 
     // Slightly dubious tricks to cut down minimized file size
     var noop = function() {};
@@ -458,22 +429,25 @@ function createEmptyStyleRule(query) {
   }
 }
 
-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{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-content{flex:1 1 auto;text-align:center}.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}.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}.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}.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}.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){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}";
+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{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-content{flex:1 1 auto;text-align:center}.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}";
 
-let CatButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+let CatButton$1 = 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 = 'filled';
+    this.variant = 'outlined';
     /**
      * The color palette of the button.
      */
-    this.color = 'primary';
+    this.color = 'secondary';
     /**
      * The size of the button.
      */
@@ -565,7 +539,7 @@ let CatButton = class {
           [`cat-button-${this.variant}`]: Boolean(this.variant),
           [`cat-button-${this.color}`]: Boolean(this.color),
           [`cat-button-${this.size}`]: Boolean(this.size)
-        }, onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
+        }, 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: {
@@ -578,7 +552,7 @@ let CatButton = class {
           [`cat-button-${this.variant}`]: Boolean(this.variant),
           [`cat-button-${this.color}`]: Boolean(this.color),
           [`cat-button-${this.size}`]: Boolean(this.size)
-        }, onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
+        }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
     }
   }
   get iconSize() {
@@ -614,6 +588,9 @@ let CatButton = class {
       this.loading ? h("cat-spinner", { size: this.spinnerSize }) : null
     ];
   }
+  onClick(event) {
+    this.catClick.emit(event);
+  }
   onFocus(event) {
     this.catFocus.emit(event);
   }
@@ -623,7 +600,54 @@ let CatButton = class {
   static get watchers() { return {
     "iconOnly": ["onIconOnlyChanged"]
   }; }
+  static get style() { return catButtonCss; }
 };
-CatButton.style = catButtonCss;
+CatButton$1 = /*@__PURE__*/ proxyCustomElement(CatButton$1, [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;
+  } });
+}
+
+const CatButton = CatButton$1;
+const defineCustomElement = defineCustomElement$1;
 
-export { CatButton as cat_button };
+export { CatButton, defineCustomElement };

package/dist/components/cat-icon.js

@@ -0,0 +1,6 @@
+import { C as CatIcon$1, d as defineCustomElement$1 } from './cat-icon2.js';
+
+const CatIcon = CatIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CatIcon, defineCustomElement };

package/dist/components/cat-icon2.js

@@ -0,0 +1,47 @@
+import { HTMLElement, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { C as CatIconRegistry } from './cat-icon-registry.js';
+
+const catIconCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}span{display:inline-flex}svg{fill:currentColor;stroke:none;transform-origin:center center;width:1em;height:1em}.cat-icon-xs svg{font-size:0.75rem}.cat-icon-s svg{font-size:1rem}.cat-icon-m svg{font-size:1.25rem}.cat-icon-l svg{font-size:1.5rem}.cat-icon-xl svg{font-size:1.75rem}";
+
+let CatIcon = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.iconRegistry = CatIconRegistry.getInstance();
+    /**
+     * The name of the icon.
+     */
+    this.icon = '';
+    /**
+     * The size of the icon.
+     */
+    this.size = 'm';
+  }
+  render() {
+    return (h("span", { innerHTML: this.iconRegistry.getIcon(this.icon), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
+        [`cat-icon-${this.size}`]: this.size !== 'inline'
+      } }));
+  }
+  static get style() { return catIconCss; }
+};
+CatIcon = /*@__PURE__*/ proxyCustomElement(CatIcon, [1, "cat-icon", {
+    "icon": [1],
+    "size": [1],
+    "a11yLabel": [1, "a11y-label"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cat-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cat-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CatIcon);
+      }
+      break;
+  } });
+}
+
+export { CatIcon as C, defineCustomElement as d };