@haiilo/catalyst 2.5.0 → 3.0.0

package/dist/catalyst/scss/_variables.tokens.scss

@@ -49,7 +49,7 @@
 
 @function cat-token-wrap($value, $alpha: 1) {
   @if meta.type-of($value) == 'string' {
-    @if $alpha < 1 {
+    @if meta.type-of($alpha) != 'number' or $alpha < 1 {
       @return rgba($value, $alpha);
     } @else {
       @return rgb($value);
@@ -80,7 +80,7 @@
   @if string.index($key, 'color.') == 1 {
     @if $wrap {
       @return cat-token-wrap($value, $alpha);
-    } @else if $alpha < 1 {
+    } @else if meta.type-of($alpha) != 'number' or $alpha < 1 {
       @return $value, $alpha;
     }
   }

package/dist/catalyst/scss/core/_dialog.scss

@@ -0,0 +1,66 @@
+@use '../variables' as *;
+@use '../mixins' as *;
+
+/**
+ * Dialog makes assumptions about the DOM structure of the dialog content.
+ * The following selectors are used to style the dialog content based on its
+ * position in the DOM hierarchy.
+ *
+ * .cat-backdrop
+ *   |- .cat-dialog
+ *        |- .cat-dialog-header
+ *             |- .cat-dialog-header-content
+ *        |- .cat-dialog-content
+ *        |- .cat-dialog-actions
+**/
+
+$-dialog-padding: 1.5rem;
+
+.cat-backdrop {
+  background-color: cat-token('color.ui.background.backdrop', cat-token('opacity.backdrop'));
+}
+
+.cat-dialog {
+  background-color: cat-token('color.ui.background.body');
+  border-radius: cat-border-radius('l');
+  @include cat-elevation(7);
+  container: dialog / inline-size;
+}
+
+.cat-dialog-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: $-dialog-padding;
+}
+
+.cat-dialog-header-content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.cat-dialog-content {
+  overflow: auto;
+  padding: 0 $-dialog-padding;
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.cat-dialog-actions {
+  display: flex;
+  padding: $-dialog-padding;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+
+  @container dialog (max-width: 360px) {
+    cat-button {
+      width: 100%;
+    }
+  }
+}

package/dist/catalyst/scss/index.scss

@@ -10,6 +10,7 @@
 
 // -- Core
 @import 'core/base';
+@import 'core/dialog';
 @import 'core/form';
 @import 'core/nav';
 @import 'core/notification';

package/dist/catalyst/scss/utils/_media.mixins.scss

@@ -3,6 +3,7 @@
 // ---- Responsive
 
 @mixin until($size, $media-type: screen) {
+  @debug 'until', $size;
   @media #{$media-type} and (max-width: #{cat-token('size.screen.#{$size}') - 1px}) {
     @content;
   }

package/dist/cjs/cat-alert_24.cjs.entry.js

@@ -445,19 +445,19 @@ const CatButton = class {
     }
   }
   get isIconButton() {
-    return Boolean(this.icon) && this._iconOnly;
+    return (Boolean(this.icon) || Boolean(this.iconSrc)) && this._iconOnly;
   }
   get hasPrefixIcon() {
-    return Boolean(this.icon) && !this._iconOnly && !this.iconRight;
+    return (Boolean(this.icon) || Boolean(this.iconSrc)) && !this._iconOnly && !this.iconRight;
   }
   get hasSuffixIcon() {
-    return Boolean(this.icon) && !this._iconOnly && this.iconRight;
+    return (Boolean(this.icon) || Boolean(this.iconSrc)) && !this._iconOnly && this.iconRight;
   }
   get content() {
     return [
-      this.hasPrefixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null,
-      this.isIconButton ? (index.h("cat-icon", { icon: this.icon, size: this.iconSize })) : (index.h("span", { class: "cat-button-content", part: "content" }, index.h("slot", null))),
-      this.hasSuffixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "suffix" }) : null,
+      this.hasPrefixIcon ? (index.h("cat-icon", { icon: this.icon, iconSrc: this.iconSrc, size: this.iconSize, part: "prefix" })) : null,
+      this.isIconButton ? (index.h("cat-icon", { icon: this.icon, iconSrc: this.iconSrc, size: this.iconSize })) : (index.h("span", { class: "cat-button-content", part: "content" }, index.h("slot", null))),
+      this.hasSuffixIcon ? (index.h("cat-icon", { icon: this.icon, iconSrc: this.iconSrc, size: this.iconSize, part: "suffix" })) : null,
       this.loading ? index.h("cat-spinner", { size: this.spinnerSize }) : null
     ];
   }
@@ -1931,17 +1931,13 @@ const catIconCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user
 const CatIcon = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * The name of the icon.
-     */
-    this.icon = '';
     /**
      * The size of the icon.
      */
     this.size = 'm';
   }
   render() {
-    return (index.h("span", { innerHTML: catIconRegistry.catIconRegistry.getIcon(this.icon), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
+    return (index.h("span", { innerHTML: this.iconSrc || (this.icon ? catIconRegistry.catIconRegistry.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
         icon: true,
         [`icon-${this.size}`]: this.size !== 'inline'
       } }));