@haiilo/catalyst 0.2.0 → 0.2.3

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

@@ -1,12 +1,10 @@
-import { HTMLElement, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { r as registerInstance, h, f as Host } from './index-2df805aa.js';
 
 const catSkeletonCss = ":host{display:flex;flex-direction:column;position:relative;--background:#ebecf0;--highlight:#d7dbe0;--speed:2s}:host([variant=square]),:host([variant=circle]){display:inline-flex}:host([hidden]){display:none}:host([variant=head]){margin-bottom:0.5rem}:host([variant=body]){margin-bottom:1rem}.cat-skeleton{display:block;border-radius:0.25rem;background:var(--background)}.cat-skeleton-circle{border-radius:10rem}.cat-skeleton-xs.cat-skeleton-rectangle{width:var(--width, 100%);height:var(--height, 1.5rem)}.cat-skeleton-xs.cat-skeleton-square,.cat-skeleton-xs.cat-skeleton-circle{width:var(--width, 1.5rem);height:var(--height, 1.5rem)}.cat-skeleton-xs.cat-skeleton-head,.cat-skeleton-xs.cat-skeleton-body{width:var(--width, var(--line-width, 100%))}.cat-skeleton-xs.cat-skeleton-head{height:calc(0.9375rem - 4px);margin:calc((1.25rem - 0.9375rem + 4px) * 0.5) 0}.cat-skeleton-xs.cat-skeleton-body{height:calc(0.75rem - 4px);margin:calc((1rem - 0.75rem + 4px) * 0.5) 0}.cat-skeleton-s.cat-skeleton-rectangle{width:var(--width, 100%);height:var(--height, 2rem)}.cat-skeleton-s.cat-skeleton-square,.cat-skeleton-s.cat-skeleton-circle{width:var(--width, 2rem);height:var(--height, 2rem)}.cat-skeleton-s.cat-skeleton-head,.cat-skeleton-s.cat-skeleton-body{width:var(--width, var(--line-width, 100%))}.cat-skeleton-s.cat-skeleton-head{height:calc(1.125rem - 4px);margin:calc((1.5rem - 1.125rem + 4px) * 0.5) 0}.cat-skeleton-s.cat-skeleton-body{height:calc(0.875rem - 4px);margin:calc((1rem - 0.875rem + 4px) * 0.5) 0}.cat-skeleton-m.cat-skeleton-rectangle{width:var(--width, 100%);height:var(--height, 2.5rem)}.cat-skeleton-m.cat-skeleton-square,.cat-skeleton-m.cat-skeleton-circle{width:var(--width, 2.5rem);height:var(--height, 2.5rem)}.cat-skeleton-m.cat-skeleton-head,.cat-skeleton-m.cat-skeleton-body{width:var(--width, var(--line-width, 100%))}.cat-skeleton-m.cat-skeleton-head{height:calc(1.25rem - 4px);margin:calc((1.5rem - 1.25rem + 4px) * 0.5) 0}.cat-skeleton-m.cat-skeleton-body{height:calc(0.9375rem - 4px);margin:calc((1.25rem - 0.9375rem + 4px) * 0.5) 0}.cat-skeleton-l.cat-skeleton-rectangle{width:var(--width, 100%);height:var(--height, 3rem)}.cat-skeleton-l.cat-skeleton-square,.cat-skeleton-l.cat-skeleton-circle{width:var(--width, 3rem);height:var(--height, 3rem)}.cat-skeleton-l.cat-skeleton-head,.cat-skeleton-l.cat-skeleton-body{width:var(--width, var(--line-width, 100%))}.cat-skeleton-l.cat-skeleton-head{height:calc(1.5rem - 4px);margin:calc((1.75rem - 1.5rem + 4px) * 0.5) 0}.cat-skeleton-l.cat-skeleton-body{height:calc(1.125rem - 4px);margin:calc((1.5rem - 1.125rem + 4px) * 0.5) 0}.cat-skeleton-xl.cat-skeleton-rectangle{width:var(--width, 100%);height:var(--height, 3.5rem)}.cat-skeleton-xl.cat-skeleton-square,.cat-skeleton-xl.cat-skeleton-circle{width:var(--width, 3.5rem);height:var(--height, 3.5rem)}.cat-skeleton-xl.cat-skeleton-head,.cat-skeleton-xl.cat-skeleton-body{width:var(--width, var(--line-width, 100%))}.cat-skeleton-xl.cat-skeleton-head{height:calc(1.75rem - 4px);margin:calc((2rem - 1.75rem + 4px) * 0.5) 0}.cat-skeleton-xl.cat-skeleton-body{height:calc(1.25rem - 4px);margin:calc((1.5rem - 1.25rem + 4px) * 0.5) 0}.cat-skeleton-sheen{background:linear-gradient(90deg, var(--background) 33%, var(--highlight) 50%, var(--background) 66%) var(--background);background-size:300% 100%;animation:sheen var(--speed) ease-in-out infinite}.cat-skeleton-pulse{position:relative;overflow:hidden}.cat-skeleton-pulse::before{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:var(--highlight);animation:var(--speed) ease-in-out 0.5s infinite normal none running pulse;opacity:0}@keyframes sheen{0%{background-position:right}}@keyframes pulse{50%{opacity:1}}";
 
-let CatSkeleton$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
+const CatSkeleton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
     /**
      * The animation style of the skeleton.
      */
@@ -49,29 +47,9 @@ let CatSkeleton$1 = class extends HTMLElement {
   random(min, max) {
     return Math.floor(Math.random() * (max - min + 1) + min);
   }
-  static get style() { return catSkeletonCss; }
 };
-CatSkeleton$1 = /*@__PURE__*/ proxyCustomElement(CatSkeleton$1, [1, "cat-skeleton", {
-    "effect": [1],
-    "variant": [1],
-    "size": [1],
-    "lines": [2]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-skeleton"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-skeleton":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatSkeleton$1);
-      }
-      break;
-  } });
-}
+CatSkeleton.style = catSkeletonCss;
 
-const CatSkeleton = CatSkeleton$1;
-const defineCustomElement = defineCustomElement$1;
+export { CatSkeleton as cat_skeleton };
 
-export { CatSkeleton, defineCustomElement };
+//# sourceMappingURL=cat-skeleton.entry.js.map

package/dist/catalyst/cat-skeleton.entry.js.map

@@ -0,0 +1 @@
+{"file":"cat-skeleton.entry.esm.js","mappings":";;AAAA,MAAM,cAAc,GAAG,4oHAA4oH;;MCUtpH,WAAW;EALxB;;;;;IASU,WAAM,GAAgC,OAAO,CAAC;;;;IAK9C,YAAO,GAAwD,WAAW,CAAC;;;;;IAM3E,SAAI,GAAkC,GAAG,CAAC;GAiDnD;EAxCC,MAAM;IACJ,QACE,EAAC,IAAI,QACF,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OACjC,WACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,CAAC,gBAAgB,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;QACrD,CAAC,gBAAgB,IAAI,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QACvD,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAClD,GACI,CACR,CAAC,CACG,EACP;GACH;EAED,IAAY,KAAK;IACf,QAAQ,IAAI,CAAC,OAAO;MAClB,KAAK,MAAM;QACT,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;MACtC,KAAK,MAAM;QACT,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;MACtC;QACE,OAAO,CAAC,CAAC;KACZ;GACF;EAED,IAAY,KAAK;IACf,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;QACrD;QACE,cAAc,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG;OAC3C;QACD,SAAS,CAAC;GACf;EAEO,MAAM,CAAC,GAAW,EAAE,GAAW;IACrC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;GAC1D;;;;;;","names":[],"sources":["./src/components/cat-skeleton/cat-skeleton.scss?tag=cat-skeleton&encapsulation=shadow","./src/components/cat-skeleton/cat-skeleton.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  /**\n   * @prop --background: The background color of the skeleton.\n   * @prop --highlight: The highlight color of the skeleton.\n   * @prop --speed: The animation speed.\n   */\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  --background: #{cat-token('color.ui.background.skeleton')};\n  --highlight: #{cat-token('color.ui.background.skeletonHighlight')};\n  --speed: 2s;\n}\n\n:host([variant='square']),\n:host([variant='circle']) {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([variant='head']) {\n  margin-bottom: $cat-head-margin-bottom;\n}\n\n:host([variant='body']) {\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n.cat-skeleton {\n  display: block;\n  border-radius: cat-border-radius('m');\n  background: var(--background);\n}\n\n.cat-skeleton-circle {\n  border-radius: 10rem;\n}\n\n// ----- size\n\n@mixin size($size, $lvl) {\n  $-text-offset: 4px;\n  .cat-skeleton-#{$size} {\n    &.cat-skeleton-rectangle {\n      width: var(--width, 100%);\n      height: var(--height, #{cat-size($size)});\n    }\n\n    &.cat-skeleton-square,\n    &.cat-skeleton-circle {\n      width: var(--width, #{cat-size($size)});\n      height: var(--height, #{cat-size($size)});\n    }\n\n    &.cat-skeleton-head,\n    &.cat-skeleton-body {\n      width: var(--width, var(--line-width, 100%));\n    }\n\n    &.cat-skeleton-head {\n      height: calc(#{cat-head-font-size($lvl)} - #{$-text-offset});\n      margin: calc((#{cat-head-line-height($lvl)} - #{cat-head-font-size($lvl)} + #{$-text-offset}) * 0.5) 0;\n    }\n\n    &.cat-skeleton-body {\n      height: calc(#{cat-body-font-size($size)} - #{$-text-offset});\n      margin: calc((#{cat-body-line-height($size)} - #{cat-body-font-size($size)} + #{$-text-offset}) * 0.5) 0;\n    }\n  }\n}\n\n@include size('xs', 5);\n@include size('s', 4);\n@include size('m', 3);\n@include size('l', 2);\n@include size('xl', 1);\n\n// ----- animation\n\n.cat-skeleton-sheen {\n  background: linear-gradient(90deg, var(--background) 33%, var(--highlight) 50%, var(--background) 66%)\n    var(--background);\n  background-size: 300% 100%;\n  animation: sheen var(--speed) ease-in-out infinite;\n}\n\n.cat-skeleton-pulse {\n  position: relative;\n  overflow: hidden;\n\n  &::before {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: var(--highlight);\n    animation: var(--speed) ease-in-out 0.5s infinite normal none running pulse;\n    opacity: 0;\n  }\n}\n\n@keyframes sheen {\n  0% {\n    background-position: right;\n  }\n}\n\n@keyframes pulse {\n  50% {\n    opacity: 1;\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n */\n@Component({\n  tag: 'cat-skeleton',\n  styleUrl: 'cat-skeleton.scss',\n  shadow: true\n})\nexport class CatSkeleton {\n  /**\n   * The animation style of the skeleton.\n   */\n  @Prop() effect: 'plain' | 'sheen' | 'pulse' = 'sheen';\n\n  /**\n   * The rendering style of the skeleton.\n   */\n  @Prop() variant: 'rectangle' | 'square' | 'circle' | 'head' | 'body' = 'rectangle';\n\n  /**\n   * The size of the skeleton. If the variant is set to \"head\", the size values\n   * \"xs\" to \"xl\" translate to the head levels `h1` to `h5`.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The number of text lines to be rendered for \"head\" and \"body\" variants.\n   * Defaults to 1 for \"head\" and 3 for \"body\". Will be ignored for other\n   * variants.\n   */\n  @Prop() lines?: number;\n\n  render() {\n    return (\n      <Host>\n        {Array.from(Array(this.count)).map(() => (\n          <div\n            style={this.style}\n            class={{\n              'cat-skeleton': true,\n              [`cat-skeleton-${this.effect}`]: Boolean(this.effect),\n              [`cat-skeleton-${this.variant}`]: Boolean(this.variant),\n              [`cat-skeleton-${this.size}`]: Boolean(this.size)\n            }}\n          ></div>\n        ))}\n      </Host>\n    );\n  }\n\n  private get count() {\n    switch (this.variant) {\n      case 'head':\n        return Math.max(1, this.lines || 1);\n      case 'body':\n        return Math.max(1, this.lines || 3);\n      default:\n        return 1;\n    }\n  }\n\n  private get style() {\n    return this.variant === 'head' || this.variant === 'body'\n      ? {\n          '--line-width': `${this.random(50, 100)}%`\n        }\n      : undefined;\n  }\n\n  private random(min: number, max: number) {\n    return Math.floor(Math.random() * (max - min + 1) + min);\n  }\n}\n"],"version":3}

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

@@ -1,12 +1,10 @@
-import { HTMLElement, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { r as registerInstance, h } from './index-2df805aa.js';
 
 const catSpinnerCss = ":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:none;stroke:currentColor;stroke-dasharray:135px;stroke-dashoffset:95px;stroke-linecap:round;stroke-width:5px;transform-origin:center center;animation:cat-spinner 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;width:1em;height:1em}.cat-spinner-xs svg{font-size:0.75rem}.cat-spinner-s svg{font-size:1rem}.cat-spinner-m svg{font-size:1.25rem}.cat-spinner-l svg{font-size:1.5rem}.cat-spinner-xl svg{font-size:1.75rem}@keyframes cat-spinner{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";
 
-let CatSpinner = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
+const CatSpinner = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
     /**
      * The size of the spinner.
      */
@@ -17,24 +15,9 @@ let CatSpinner = class extends HTMLElement {
         [`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 style() { return catSpinnerCss; }
 };
-CatSpinner = /*@__PURE__*/ proxyCustomElement(CatSpinner, [1, "cat-spinner", {
-    "size": [1],
-    "a11yLabel": [1, "a11y-label"]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-spinner":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatSpinner);
-      }
-      break;
-  } });
-}
+CatSpinner.style = catSpinnerCss;
+
+export { CatSpinner as cat_spinner };
 
-export { CatSpinner as C, defineCustomElement as d };
+//# sourceMappingURL=cat-spinner.entry.js.map

package/dist/catalyst/cat-spinner.entry.js.map

@@ -0,0 +1 @@
+{"file":"cat-spinner.entry.esm.js","mappings":";;AAAA,MAAM,aAAa,GAAG,+pBAA+pB;;MCUxqB,UAAU;EALvB;;;;;IASU,SAAI,GAA6C,GAAG,CAAC;GAuB9D;EAfC,MAAM;IACJ,QACE,0BACc,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,MAAM,EAC3C,KAAK,EAAE;QACL,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ;OACrD,IAED,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IACzD,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,GAAU,CACtC,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/cat-spinner/cat-spinner.scss?tag=cat-spinner&encapsulation=shadow","./src/components/cat-spinner/cat-spinner.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n  @include cat-select(none);\n\n  &[hidden] {\n    display: none;\n  }\n}\n\nspan {\n  display: inline-flex;\n}\n\nsvg {\n  fill: none;\n  stroke: currentColor;\n  stroke-dasharray: 135px;\n  stroke-dashoffset: 95px;\n  stroke-linecap: round;\n  stroke-width: 5px;\n  transform-origin: center center;\n  animation: cat-spinner 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;\n  width: 1em;\n  height: 1em;\n}\n\n// ----- sizes\n\n@mixin size($size) {\n  .cat-spinner-#{$size} svg {\n    font-size: cat-size($size) * 0.5;\n  }\n}\n\n@include size('xs');\n@include size('s');\n@include size('m');\n@include size('l');\n@include size('xl');\n\n// ----- animation\n\n@keyframes cat-spinner {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Spinners are used to indicate users that their action is being processed.\n */\n@Component({\n  tag: 'cat-spinner',\n  styleUrl: 'cat-spinner.scss',\n  shadow: true\n})\nexport class CatSpinner {\n  /**\n   * The size of the spinner.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the spinner 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        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        class={{\n          [`cat-spinner-${this.size}`]: this.size !== 'inline'\n        }}\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\">\n          <circle cx=\"24\" cy=\"24\" r=\"21.5\"></circle>\n        </svg>\n      </span>\n    );\n  }\n}\n"],"version":3}