npm - @haiilo/catalyst - Versions diffs - 1.3.1 → 2.0.0 - Mend

@haiilo/catalyst 1.3.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (148) hide show

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -7,10 +7,11 @@
     "./components/cat-button/cat-button.js",
     "./components/cat-card/cat-card.js",
     "./components/cat-checkbox/cat-checkbox.js",
+    "./components/cat-dropdown/cat-dropdown.js",
     "./components/cat-icon/cat-icon.js",
     "./components/cat-input/cat-input.js",
-    "./components/cat-menu/cat-menu.js",
     "./components/cat-modal/cat-modal.js",
+    "./components/cat-pagination/cat-pagination.js",
     "./components/cat-radio/cat-radio.js",
     "./components/cat-radio-group/cat-radio-group.js",
     "./components/cat-scrollable/cat-scrollable.js",
@@ -20,7 +21,6 @@
     "./components/cat-tab/cat-tab.js",
     "./components/cat-tabs/cat-tabs.js",
     "./components/cat-textarea/cat-textarea.js",
-    "./components/cat-toast-demo/cat-toast-demo.js",
     "./components/cat-toggle/cat-toggle.js",
     "./components/cat-tooltip/cat-tooltip.js"
   ],

package/dist/collection/components/cat-button/cat-button.css CHANGED Viewed

@@ -236,22 +236,13 @@
   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;
+  gap: 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: 1.25rem;
-  padding-right: 1.25rem;
-}
 :host(.cat-button-pull[size=xs]) {
   margin: -0.25rem -0.25rem;
@@ -288,12 +279,7 @@
   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;
+  gap: 0.25rem;
 }
 .cat-button-s cat-icon {
   margin-top: -0.125rem;
@@ -304,10 +290,6 @@
   padding-left: 0;
   padding-right: 0;
 }
-:host-context(nav) .cat-button-s {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
 :host(.cat-button-pull[size=s]) {
   margin: -0.375rem -0.5rem;
@@ -344,12 +326,7 @@
   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;
+  gap: 0.25rem;
 }
 .cat-button-m cat-icon {
   margin-top: -0.125rem;
@@ -360,10 +337,6 @@
   padding-left: 0;
   padding-right: 0;
 }
-:host-context(nav) .cat-button-m {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
 :host(.cat-button-pull[size=m]) {
   margin: -0.625rem -0.75rem;
@@ -400,12 +373,7 @@
   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;
+  gap: 0.25rem;
 }
 .cat-button-l cat-icon {
   margin-top: -0.125rem;
@@ -416,10 +384,6 @@
   padding-left: 0;
   padding-right: 0;
 }
-:host-context(nav) .cat-button-l {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
 :host(.cat-button-pull[size=l]) {
   margin: -0.875rem -1rem;
@@ -456,22 +420,13 @@
   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;
+  gap: 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: 1.25rem;
-  padding-right: 1.25rem;
-}
 :host(.cat-button-pull[size=xl]) {
   margin: -1rem -1.25rem;
@@ -503,26 +458,29 @@
   margin-right: -1.25rem;
 }
-:host-context(cat-tabs) .cat-button {
-  background-color: transparent !important;
+:host(.cat-tab-active:not(:hover)) {
+  --cat-primary-text: transparent;
+}
+:host(.cat-text-left) .cat-button {
+  justify-content: left;
+}
+:host(.cat-text-right) .cat-button {
+  justify-content: right;
 }
-:host-context(nav) {
+:host(.cat-nav-item) {
   width: 100%;
 }
-:host-context(nav) .cat-button {
+:host(.cat-nav-item) .cat-button {
   box-shadow: none;
   border-radius: 0;
   justify-content: left;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  gap: 0.5rem;
 }
-:host-context(nav) .cat-button:focus-visible {
+:host(.cat-nav-item) .cat-button:focus-visible {
   outline-offset: -2px;
-}
-:host(.cat-text-left) .cat-button {
-  justify-content: left;
-}
-:host(.cat-text-right) .cat-button {
-  justify-content: right;
 }

package/dist/collection/components/cat-button/cat-button.js CHANGED Viewed

@@ -107,7 +107,7 @@ export class CatButton {
   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: {
+      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, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
           'cat-button': true,
           'cat-button-icon': this.isIconButton,
           'cat-button-round': this.round,
@@ -120,7 +120,7 @@ export class CatButton {
         }, 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: {
+      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, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
           'cat-button': true,
           'cat-button-active': this.active,
           'cat-button-icon': this.isIconButton,
@@ -161,10 +161,10 @@ export class CatButton {
   }
   get content() {
     return [
-      this.hasPrefixIcon ? (h("cat-icon", { icon: this.icon, size: this.iconSize, class: "cat-button-prefix", part: "prefix" })) : null,
+      this.hasPrefixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null,
       this.isIconButton ? (h("cat-icon", { icon: this.icon, size: this.iconSize })) : (h("span", { class: "cat-button-content", part: "content" },
         h("slot", null))),
-      this.hasSuffixIcon ? (h("cat-icon", { icon: this.icon, size: this.iconSize, class: "cat-button-suffix", part: "suffix" })) : null,
+      this.hasSuffixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "suffix" }) : null,
       this.loading ? h("cat-spinner", { size: this.spinnerSize }) : null
     ];
   }
@@ -507,6 +507,23 @@ export class CatButton {
       },
       "attribute": "a11y-label",
       "reflect": false
+    },
+    "a11yCurrent": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Sets the `aria-current` attribute on the button."
+      },
+      "attribute": "a11y-current",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/cat-button/cat-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-button.js","sourceRoot":"","sources":["../../../src/components/cat-button/cat-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/*\n Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n \n @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n /\n@Component({\n tag: 'cat-button',\n styleUrl: 'cat-button.scss',\n shadow: true\n})\nexport class CatButton {\n private button!: HTMLButtonElement \| HTMLAnchorElement;\n private mediaMatcher?: MediaMatcher;\n private mediaQueryList?: MediaQueryList;\n private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n @State() _iconOnly = true;\n\n /\n The rendering style of the button.\n /\n @Prop() variant: 'filled' \| 'outlined' \| 'text' = 'outlined';\n\n /\n The color palette of the button.\n /\n @Prop() color: 'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning' = 'secondary';\n\n /\n Set the button into an active state.\n /\n @Prop() active = false;\n\n /\n The size of the button.\n /\n @Prop() size: 'xs' \| 's' \| 'm' \| 'l' \| 'xl' = 'm';\n\n /\n The name of the button, which gets paired with the button's value when\n * submitted as part of a form. Corresponds with the native HTML name\n * attribute.\n /\n @Prop() name?: string;\n\n /\n The value of the button, which gets paired with the button's name when\n * submitted as part of a form. Corresponds with the native HTML value\n * attribute.\n /\n @Prop() value?: string;\n\n /\n Specifies that the button should be disabled. A disabled button is unusable\n * and un-clickable. Corresponds with the native HTML disabled attribute.\n /\n @Prop() disabled = false;\n\n /\n Displays the button in a loading state with a spinner. Just like a disabled\n * button, an inactive button is unusable and un-clickable. However, it\n * retains the current focus state.\n /\n @Prop() loading = false;\n\n /\n Allows the button to submit a form.\n /\n @Prop() submit = false;\n\n /\n Disables ellipse overflowing button content.\n /\n @Prop() noEllipsis = false;\n\n /\n Use round button edges.\n /\n @Prop() round = false;\n\n /\n A destination to link to, rendered in the href attribute of a link.\n /\n @Prop() url?: string;\n\n /\n Specifies where to open the linked document.\n /\n @Prop() urlTarget?: '_blank' \| '_self';\n\n /\n The name of an icon to be displayed in the button.\n /\n @Prop() icon?: string;\n\n /\n Hide the actual button content and only display the icon.\n /\n @Prop() iconOnly: boolean \| Breakpoint = false;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n Adds a unique identifier for the button. Please note that with this\n * particular component this ID is added inside the web component. If you need\n * an ID on the HTML element, use the regular `id` attribute instead.\n /\n @Prop() buttonId?: string;\n\n /\n Adds accessible label for the button that is only shown for screen\n * readers. Typically, this label text replaces the visible text on the\n * button for users who use assistive technology.\n /\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n @Watch('iconOnly')\n onIconOnlyChanged(value: boolean \| Breakpoint): void {\n // teardown\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n this.mediaQueryList = undefined;\n this.mediaQueryListener = undefined;\n // setup\n if (isBreakpoint(value)) {\n this.mediaMatcher ??= new MediaMatcher();\n this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n this._iconOnly = this.mediaQueryList.matches;\n } else {\n this._iconOnly = value;\n }\n }\n\n /\n Emitted when the button is clicked.\n /\n @Event() catClick!: EventEmitter<MouseEvent>;\n\n /\n Emitted when the button received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the button loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad(): void {\n this.onIconOnlyChanged(this.iconOnly);\n }\n\n componentWillRender(): void {\n if (this.isIconButton && !this.a11yLabel) {\n log.warn('[A11y] Missing ARIA label on icon button', this);\n }\n }\n\n @Listen('click')\n haltDisabledEvents(event: Event): void {\n if (this.disabled \|\| this.loading) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n /\n Sets focus on the button. Use this method instead of `button.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n */\n @Method()\n async setFocus(options?: FocusOptions): Promise<void> {\n this.button.focus(options);\n }\n\n render() {\n if (this.url) {\n return (\n <a\n ref={el => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? undefined : this.url}\n target={this.urlTarget}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </a>\n );\n } else {\n return (\n <button\n ref={el => (this.button = el as HTMLButtonElement)}\n type={this.submit ? 'submit' : 'button'}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round ?? this.isIconButton,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </button>\n );\n }\n }\n\n private get iconSize(): 'xs' \| 's' \| 'm' \| 'l' \| 'xl' {\n switch (this.size) {\n case 'xs':\n return 's';\n default:\n return 'l';\n }\n }\n\n private get spinnerSize(): 'xs' \| 's' \| 'm' \| 'l' \| 'xl' {\n switch (this.size) {\n case 'xs':\n return 'xs';\n default:\n return 'm';\n }\n }\n\n private get isIconButton() {\n return Boolean(this.icon) && this._iconOnly;\n }\n\n private get hasPrefixIcon() {\n return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n }\n\n private get hasSuffixIcon() {\n return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n }\n\n private get content() {\n return [\n this.hasPrefixIcon ? (\n <cat-icon icon={this.icon} size={this.iconSize} class=\"cat-button-prefix\" part=\"prefix\"></cat-icon>\n ) : null,\n this.isIconButton ? (\n <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>\n ) : (\n <span class=\"cat-button-content\" part=\"content\">\n <slot></slot>\n </span>\n ),\n this.hasSuffixIcon ? (\n <cat-icon icon={this.icon} size={this.iconSize} class=\"cat-button-suffix\" part=\"suffix\"></cat-icon>\n ) : null,\n this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n ];\n }\n\n private onClick(event: MouseEvent) {\n this.catClick.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"]}
1	+ {"version":3,"file":"cat-button.js","sourceRoot":"","sources":["../../../src/components/cat-button/cat-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/*\n Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n \n @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n /\n@Component({\n tag: 'cat-button',\n styleUrl: 'cat-button.scss',\n shadow: true\n})\nexport class CatButton {\n private button!: HTMLButtonElement \| HTMLAnchorElement;\n private mediaMatcher?: MediaMatcher;\n private mediaQueryList?: MediaQueryList;\n private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n @State() _iconOnly = true;\n\n /\n The rendering style of the button.\n /\n @Prop() variant: 'filled' \| 'outlined' \| 'text' = 'outlined';\n\n /\n The color palette of the button.\n /\n @Prop() color: 'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning' = 'secondary';\n\n /\n Set the button into an active state.\n /\n @Prop() active = false;\n\n /\n The size of the button.\n /\n @Prop() size: 'xs' \| 's' \| 'm' \| 'l' \| 'xl' = 'm';\n\n /\n The name of the button, which gets paired with the button's value when\n * submitted as part of a form. Corresponds with the native HTML name\n * attribute.\n /\n @Prop() name?: string;\n\n /\n The value of the button, which gets paired with the button's name when\n * submitted as part of a form. Corresponds with the native HTML value\n * attribute.\n /\n @Prop() value?: string;\n\n /\n Specifies that the button should be disabled. A disabled button is unusable\n * and un-clickable. Corresponds with the native HTML disabled attribute.\n /\n @Prop() disabled = false;\n\n /\n Displays the button in a loading state with a spinner. Just like a disabled\n * button, an inactive button is unusable and un-clickable. However, it\n * retains the current focus state.\n /\n @Prop() loading = false;\n\n /\n Allows the button to submit a form.\n /\n @Prop() submit = false;\n\n /\n Disables ellipse overflowing button content.\n /\n @Prop() noEllipsis = false;\n\n /\n Use round button edges.\n /\n @Prop() round = false;\n\n /\n A destination to link to, rendered in the href attribute of a link.\n /\n @Prop() url?: string;\n\n /\n Specifies where to open the linked document.\n /\n @Prop() urlTarget?: '_blank' \| '_self';\n\n /\n The name of an icon to be displayed in the button.\n /\n @Prop() icon?: string;\n\n /\n Hide the actual button content and only display the icon.\n /\n @Prop() iconOnly: boolean \| Breakpoint = false;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n Adds a unique identifier for the button. Please note that with this\n * particular component this ID is added inside the web component. If you need\n * an ID on the HTML element, use the regular `id` attribute instead.\n /\n @Prop() buttonId?: string;\n\n /\n Adds accessible label for the button that is only shown for screen\n * readers. Typically, this label text replaces the visible text on the\n * button for users who use assistive technology.\n /\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /\n Sets the `aria-current` attribute on the button.\n /\n @Prop({ attribute: 'a11y-current' }) a11yCurrent?: boolean;\n\n @Watch('iconOnly')\n onIconOnlyChanged(value: boolean \| Breakpoint): void {\n // teardown\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n this.mediaQueryList = undefined;\n this.mediaQueryListener = undefined;\n // setup\n if (isBreakpoint(value)) {\n this.mediaMatcher ??= new MediaMatcher();\n this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n this._iconOnly = this.mediaQueryList.matches;\n } else {\n this._iconOnly = value;\n }\n }\n\n /\n Emitted when the button is clicked.\n /\n @Event() catClick!: EventEmitter<MouseEvent>;\n\n /\n Emitted when the button received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the button loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad(): void {\n this.onIconOnlyChanged(this.iconOnly);\n }\n\n componentWillRender(): void {\n if (this.isIconButton && !this.a11yLabel) {\n log.warn('[A11y] Missing ARIA label on icon button', this);\n }\n }\n\n @Listen('click')\n haltDisabledEvents(event: Event): void {\n if (this.disabled \|\| this.loading) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n /\n Sets focus on the button. Use this method instead of `button.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n */\n @Method()\n async setFocus(options?: FocusOptions): Promise<void> {\n this.button.focus(options);\n }\n\n render() {\n if (this.url) {\n return (\n <a\n ref={el => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? undefined : this.url}\n target={this.urlTarget}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </a>\n );\n } else {\n return (\n <button\n ref={el => (this.button = el as HTMLButtonElement)}\n type={this.submit ? 'submit' : 'button'}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round ?? this.isIconButton,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </button>\n );\n }\n }\n\n private get iconSize(): 'xs' \| 's' \| 'm' \| 'l' \| 'xl' {\n switch (this.size) {\n case 'xs':\n return 's';\n default:\n return 'l';\n }\n }\n\n private get spinnerSize(): 'xs' \| 's' \| 'm' \| 'l' \| 'xl' {\n switch (this.size) {\n case 'xs':\n return 'xs';\n default:\n return 'm';\n }\n }\n\n private get isIconButton() {\n return Boolean(this.icon) && this._iconOnly;\n }\n\n private get hasPrefixIcon() {\n return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n }\n\n private get hasSuffixIcon() {\n return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n }\n\n private get content() {\n return [\n this.hasPrefixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null,\n this.isIconButton ? (\n <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>\n ) : (\n <span class=\"cat-button-content\" part=\"content\">\n <slot></slot>\n </span>\n ),\n this.hasSuffixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"suffix\"></cat-icon> : null,\n this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n ];\n }\n\n private onClick(event: MouseEvent) {\n this.catClick.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"]}

package/dist/collection/components/cat-card/cat-card.css CHANGED Viewed

@@ -15,14 +15,15 @@
   display: none;
 }
-::slotted(nav) {
-  margin: -0.75rem -1.25rem !important;
-}
 ::slotted(:last-child) {
   margin-bottom: 0 !important;
 }
+::slotted(nav),
+::slotted(nav:last-child) {
+  margin: -0.75rem -1.25rem !important;
+}
 ::slotted(.cat-card-pull) {
   margin: -1.25rem !important;
   width: calc(100% + 2.5rem) !important;

package/dist/collection/components/cat-checkbox/cat-checkbox.css CHANGED Viewed

@@ -7,6 +7,7 @@
   display: flex;
   gap: 0.5rem;
   flex-direction: column;
+  color: rgb(var(--cat-hint-color, inherit));
 }
 .hint-section .input-hint,
 .hint-section ::slotted([slot=hint]) {
@@ -16,10 +17,6 @@
   margin: 0 !important;
 }
-:host-context(.cat-error) .hint-section {
-  color: rgb(var(--cat-danger-text, 217, 52, 13));
-}
 :host {
   display: flex;
   flex-direction: column;

package/dist/collection/components/cat-checkbox/cat-checkbox.js CHANGED Viewed

@@ -52,7 +52,7 @@ export class CatCheckbox {
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
-      log.error('[A11y] Missing ARIA label on checkbox', this);
+      log.warn('[A11y] Missing ARIA label on checkbox', this);
     }
   }
   /**

package/dist/collection/components/cat-checkbox/cat-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-checkbox.js","sourceRoot":"","sources":["../../../src/components/cat-checkbox/cat-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtG,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;;;;;;;GAQG;AAMH,MAAM,OAAO,WAAW;EALxB;IAMmB,OAAE,GAAG,gBAAgB,YAAY,EAAE,EAAE,CAAC;IAK9C,oBAAe,GAAG,KAAK,CAAC;IAEjC;;OAEG;IACsB,YAAO,GAAG,KAAK,CAAC;IAEzC;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAEzB;;OAEG;IACK,kBAAa,GAAG,KAAK,CAAC;IAE9B;;OAEG;IACK,UAAK,GAAG,EAAE,CAAC;IAEnB;;OAEG;IACK,gBAAW,GAAG,KAAK,CAAC;IAO5B;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAYzB;;OAEG;IACK,cAAS,GAAG,KAAK,CAAC;GAuG3B;EAtFC,gBAAgB;IACd,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,aAAa,EAAE;MACpC,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC;KACjC;EACH,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC1E,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACxC,GAAG,CAAC,~~KAAK~~,CAAC,uCAAuC,EAAE,IAAI,CAAC,CAAC;~~KAC1D~~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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/*\n Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n \n @slot hint - Optional hint element to be displayed with the checkbox.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part checkbox - The checkbox element.\n * @part label - The label content.\n /\n@Component({\n tag: 'cat-checkbox',\n styleUrls: ['cat-checkbox.scss'],\n shadow: true\n})\nexport class CatCheckbox {\n private readonly id = `cat-checkbox-${nextUniqueId++}`;\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n /\n Checked state of the checkbox\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Disabled state of the checkbox\n /\n @Prop() disabled = false;\n\n /\n Indeterminate state of the checkbox\n /\n @Prop() indeterminate = false;\n\n /\n Label of the checkbox which is presented in the UI\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n The name of the input\n /\n @Prop() name?: string;\n\n /\n Required state of the checkbox\n /\n @Prop() required = false;\n\n /\n The value of the checkbox\n /\n @Prop({ mutable: true }) value?: string \| boolean;\n\n /\n Optional hint text(s) to be displayed with the checkbox.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the checkbox.\n /\n @Prop() labelLeft = false;\n\n /\n Emitted when the checked status of the checkbox is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the checkbox received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the checkbox loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentDidLoad() {\n if (this.input && this.indeterminate) {\n this.input.indeterminate = true;\n }\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.~~error~~('[A11y] Missing ARIA label on checkbox', this);\n }\n }\n\n /\n Sets focus on the checkbox. Use this method instead of `checkbox.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n */\n @Method()\n async setFocus(options?: FocusOptions): Promise<void> {\n this.input.focus(options);\n }\n\n render() {\n return (\n <Host>\n <label\n htmlFor={this.id}\n class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n >\n <input\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n type=\"checkbox\"\n name={this.name}\n value={this.value !== undefined ? String(this.value) : this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n />\n <span class=\"box\" aria-hidden=\"true\" part=\"checkbox\">\n <svg class=\"check\" viewBox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n </svg>\n <svg class=\"dash\" viewBox=\"0 0 12 10\">\n <polyline points=\"1.5 5 10.5 5\"></polyline>\n </svg>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\n {this.hintSection}\n </Host>\n );\n }\n\n private get hintSection() {\n const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n return (\n (this.hint \|\| hasSlottedHint) && (\n <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n )\n );\n }\n\n private onInput(event: Event) {\n this.checked = this.input.checked;\n\n if (!this.value \|\| typeof this.value === 'boolean') {\n this.value = this.checked;\n }\n this.catChange.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"]}
1	+ {"version":3,"file":"cat-checkbox.js","sourceRoot":"","sources":["../../../src/components/cat-checkbox/cat-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/*\n Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n \n @slot hint - Optional hint element to be displayed with the checkbox.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part checkbox - The checkbox element.\n * @part label - The label content.\n /\n@Component({\n tag: 'cat-checkbox',\n styleUrls: ['cat-checkbox.scss'],\n shadow: true\n})\nexport class CatCheckbox {\n private readonly id = `cat-checkbox-${nextUniqueId++}`;\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n /\n Checked state of the checkbox\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Disabled state of the checkbox\n /\n @Prop() disabled = false;\n\n /\n Indeterminate state of the checkbox\n /\n @Prop() indeterminate = false;\n\n /\n Label of the checkbox which is presented in the UI\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n The name of the input\n /\n @Prop() name?: string;\n\n /\n Required state of the checkbox\n /\n @Prop() required = false;\n\n /\n The value of the checkbox\n /\n @Prop({ mutable: true }) value?: string \| boolean;\n\n /\n Optional hint text(s) to be displayed with the checkbox.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the checkbox.\n /\n @Prop() labelLeft = false;\n\n /\n Emitted when the checked status of the checkbox is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the checkbox received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the checkbox loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentDidLoad() {\n if (this.input && this.indeterminate) {\n this.input.indeterminate = true;\n }\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on checkbox', this);\n }\n }\n\n /\n Sets focus on the checkbox. Use this method instead of `checkbox.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n */\n @Method()\n async setFocus(options?: FocusOptions): Promise<void> {\n this.input.focus(options);\n }\n\n render() {\n return (\n <Host>\n <label\n htmlFor={this.id}\n class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n >\n <input\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n type=\"checkbox\"\n name={this.name}\n value={this.value !== undefined ? String(this.value) : this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n />\n <span class=\"box\" aria-hidden=\"true\" part=\"checkbox\">\n <svg class=\"check\" viewBox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n </svg>\n <svg class=\"dash\" viewBox=\"0 0 12 10\">\n <polyline points=\"1.5 5 10.5 5\"></polyline>\n </svg>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\n {this.hintSection}\n </Host>\n );\n }\n\n private get hintSection() {\n const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n return (\n (this.hint \|\| hasSlottedHint) && (\n <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n )\n );\n }\n\n private onInput(event: Event) {\n this.checked = this.input.checked;\n\n if (!this.value \|\| typeof this.value === 'boolean') {\n this.value = this.checked;\n }\n this.catChange.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"]}

package/dist/collection/components/{cat-menu/cat-menu.css → cat-dropdown/cat-dropdown.css} RENAMED Viewed

@@ -31,6 +31,26 @@
   box-shadow: 0 1px 4px 0 rgba(16, 29, 48, 0.2);
   border-radius: var(--cat-border-radius-m, 0.25rem);
   z-index: 100;
+  opacity: 0;
+  transition: transform 0.13s cubic-bezier(0.3, 0, 0.8, 0.15), opacity 0.13s cubic-bezier(0.3, 0, 0.8, 0.15);
+}
+.content[data-placement^=top] {
+  transform: translateY(1rem);
+}
+.content[data-placement^=left] {
+  transform: translateX(1rem);
+}
+.content[data-placement^=right] {
+  transform: translateX(-1rem);
+}
+.content[data-placement^=bottom] {
+  transform: translateY(-1rem);
+}
+.content.show {
+  opacity: 1;
+  transform: translateX(0);
+  transform: translateY(0);
+  transition: transform 0.5s cubic-bezier(0.05, 0.7, 0.1, 1), opacity 0.5s cubic-bezier(0.05, 0.7, 0.1, 1);
 }
 .content.overflow-auto {
   overflow: auto;