@haiilo/catalyst 4.1.2 → 5.0.0

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

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 import { catIconRegistry as icons } from './cat-icon-registry';
 /**
  * Icons are used to provide additional meaning or in places where text label
@@ -8,10 +8,10 @@ import { catIconRegistry as icons } from './cat-icon-registry';
  */
 export class CatIcon {
   constructor() {
-    /**
-     * The size of the icon.
-     */
+    this.icon = undefined;
+    this.iconSrc = undefined;
     this.size = 'm';
+    this.a11yLabel = undefined;
   }
   render() {
     return (h("span", { innerHTML: this.iconSrc || (this.icon ? icons.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
@@ -21,82 +21,88 @@ export class CatIcon {
   }
   static get is() { return "cat-icon"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["cat-icon.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["cat-icon.css"]
-  }; }
-  static get properties() { return {
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The name of the icon."
-      },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "iconSrc": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The SVG source of the icon. This takes precenedence over the `icon` name."
-      },
-      "attribute": "icon-src",
-      "reflect": false
-    },
-    "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 icon."
+  static get originalStyleUrls() {
+    return {
+      "$": ["cat-icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cat-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The name of the icon."
+        },
+        "attribute": "icon",
+        "reflect": false
       },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'m'"
-    },
-    "a11yLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
+      "iconSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The SVG source of the icon. This takes precenedence over the `icon` name."
+        },
+        "attribute": "icon-src",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Adds accessible label for the icon that is only shown for screen\nreaders. The `aria-hidden` attribute will be set if no label is present."
+      "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 icon."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'m'"
       },
-      "attribute": "a11y-label",
-      "reflect": false
-    }
-  }; }
+      "a11yLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Adds accessible label for the icon that is only shown for screen\nreaders. The `aria-hidden` attribute will be set if no label is present."
+        },
+        "attribute": "a11y-label",
+        "reflect": false
+      }
+    };
+  }
 }
-//# sourceMappingURL=cat-icon.js.map
+//# sourceMappingURL=cat-icon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cat-icon.js","sourceRoot":"","sources":["../../../src/components/cat-icon/cat-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,eAAe,IAAI,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE/D;;;;;GAKG;AAMH,MAAM,OAAO,OAAO;EALpB;IAgBE;;OAEG;IACK,SAAI,GAA6C,GAAG,CAAC;GAsB9D;EAdC,MAAM;IACJ,OAAO,CACL,YACE,SAAS,EAAE,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,gBAC1D,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,EAC3C,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;OAC9C,GACK,CACT,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { catIconRegistry as icons } from './cat-icon-registry';\n\n/**\n * Icons are used to provide additional meaning or in places where text label\n * doesn't fit.\n *\n * @part icon - The span element wrapping the SVG icon.\n */\n@Component({\n  tag: 'cat-icon',\n  styleUrl: 'cat-icon.scss',\n  shadow: true\n})\nexport class CatIcon {\n  /**\n   * The name of the icon.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * The SVG source of the icon. This takes precenedence over the `icon` name.\n   */\n  @Prop() iconSrc?: string;\n\n  /**\n   * The size of the icon.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the icon that is only shown for screen\n   * readers. The `aria-hidden` attribute will be set if no label is present.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  render() {\n    return (\n      <span\n        innerHTML={this.iconSrc || (this.icon ? icons.getIcon(this.icon) : '')}\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        part=\"icon\"\n        class={{\n          icon: true,\n          [`icon-${this.size}`]: this.size !== 'inline'\n        }}\n      ></span>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cat-icon.js","sourceRoot":"","sources":["../../../src/components/cat-icon/cat-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,eAAe,IAAI,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE/D;;;;;GAKG;AAMH,MAAM,OAAO,OAAO;;;;gBAcuC,GAAG;;;EAQ5D,MAAM;IACJ,OAAO,CACL,YACE,SAAS,EAAE,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,gBAC1D,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,EAC3C,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;OAC9C,GACK,CACT,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { catIconRegistry as icons } from './cat-icon-registry';\n\n/**\n * Icons are used to provide additional meaning or in places where text label\n * doesn't fit.\n *\n * @part icon - The span element wrapping the SVG icon.\n */\n@Component({\n  tag: 'cat-icon',\n  styleUrl: 'cat-icon.scss',\n  shadow: true\n})\nexport class CatIcon {\n  /**\n   * The name of the icon.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * The SVG source of the icon. This takes precenedence over the `icon` name.\n   */\n  @Prop() iconSrc?: string;\n\n  /**\n   * The size of the icon.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the icon that is only shown for screen\n   * readers. The `aria-hidden` attribute will be set if no label is present.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  render() {\n    return (\n      <span\n        innerHTML={this.iconSrc || (this.icon ? icons.getIcon(this.icon) : '')}\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        part=\"icon\"\n        class={{\n          icon: true,\n          [`icon-${this.size}`]: this.size !== 'inline'\n        }}\n      ></span>\n    );\n  }\n}\n"]}

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

@@ -253,8 +253,6 @@
 
 :host {
   display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-weight: var(--cat-font-weight-body, 400);
@@ -265,6 +263,19 @@
   display: none;
 }
 
+.input-field,
+.input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1 1 auto;
+}
+
+.input-field.input-horizontal {
+  flex-direction: row;
+  gap: 1rem;
+}
+
 .input-wrapper {
   display: flex;
   align-items: stretch;
@@ -308,8 +319,15 @@
 
 label {
   align-self: flex-start;
+  overflow: hidden;
+  word-wrap: break-word;
+  word-break: break-word;
 }
-label.hidden {
+
+.label-container {
+  flex-basis: var(--label-size, 33.33%);
+}
+.label-container.hidden {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;
@@ -329,6 +347,17 @@ label.hidden {
   color: rgb(var(--cat-font-color-muted, 105, 118, 135));
 }
 
+.input-horizontal label {
+  min-height: 2.5rem;
+  display: inline-flex;
+  align-items: center;
+}
+.input-horizontal .label-optional {
+  display: block;
+  margin-top: 0.25rem;
+  margin-left: 0;
+}
+
 .text-prefix,
 .text-suffix {
   display: inline-flex;