@haiilo/catalyst 0.7.0 → 0.7.3

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

@@ -0,0 +1,102 @@
+@use '../variables' as *;
+
+// ---- Head
+
+@function cat-head-font-family() {
+  @return cat-token('font.family.head'), $font-fallback-sans-serif;
+}
+
+@function cat-head-font-size($size) {
+  @return cat-token('size.font.head.#{$size}');
+}
+
+@function cat-head-line-height($size) {
+  @return cat-token('size.line.head.#{$size}');
+}
+
+@mixin cat-head($size, $weight: null) {
+  font-family: cat-head-font-family();
+  font-size: cat-head-font-size($size);
+  line-height: cat-head-line-height($size);
+  color: cat-token('color.ui.font.head');
+  font-weight: $weight;
+}
+
+// ---- Body
+
+@function cat-body-font-family() {
+  @return cat-token('font.family.body'), $font-fallback-sans-serif;
+}
+
+@function cat-body-font-size($size) {
+  @return cat-token('size.font.body.#{$size}');
+}
+
+@function cat-body-line-height($size) {
+  @return cat-token('size.line.body.#{$size}');
+}
+
+@mixin cat-body($size, $weight: null) {
+  // skip font family, as it is set on the body
+  // skip color, as it is set on the body
+  font-size: cat-body-font-size($size);
+  line-height: cat-body-line-height($size);
+  font-weight: $weight;
+}
+
+// ---- Mono
+
+@function cat-mono-font-family() {
+  @return cat-token('font.family.mono'), $font-fallback-monospace;
+}
+
+@function cat-mono-font-size($size) {
+  @return cat-token('size.font.mono.#{$size}');
+}
+
+@function cat-mono-line-height($size) {
+  @return cat-token('size.line.mono.#{$size}');
+}
+
+@mixin cat-mono($size, $weight: null) {
+  font-family: cat-mono-font-family();
+  font-size: cat-mono-font-size($size);
+  line-height: cat-mono-line-height($size);
+  color: cat-token('color.ui.font.mono');
+  font-weight: $weight;
+}
+
+// ---- Utils
+
+@mixin cat-break-word {
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+@mixin cat-ellipsis($lines: 1) {
+  /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
+  @if $lines == 1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  } @else {
+    display: -webkit-box;
+    -webkit-line-clamp: $lines;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
+}
+
+@mixin cat-select($select: auto) {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-user-select: $select;
+  -ms-user-select: $select;
+  user-select: $select;
+  /* stylelint-enable property-no-vendor-prefix */
+}
+
+@mixin cat-font-smooth() {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: greyscale;
+}

package/dist/catalyst/scss/utils/_typography.scss

@@ -0,0 +1,34 @@
+@use 'typography.mixins' as *;
+
+.cat-text-left {
+  text-align: left !important;
+}
+
+.cat-text-center {
+  text-align: center !important;
+}
+
+.cat-text-right {
+  text-align: right !important;
+}
+
+.cat-ellipsis {
+  @include cat-ellipsis;
+}
+@for $i from 1 through 5 {
+  .cat-ellipsis-#{$i} {
+    @include cat-ellipsis($i);
+  }
+}
+
+.cat-select {
+  @include cat-select;
+}
+
+.cat-no-select {
+  @include cat-select(none);
+}
+
+.cat-break-word {
+  @include cat-break-word;
+}

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

@@ -0,0 +1,29 @@
+@mixin cat-visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+@mixin cat-visually-hidden-focusable {
+  &:not(:focus):not(:focus-within) {
+    @include cat-visually-hidden;
+  }
+}
+
+@mixin cat-visually-hidden-hoverable($container: null) {
+  @if $container {
+    #{$container}:not(:hover):not(:focus):not(:focus-within) & {
+      @include cat-visually-hidden;
+    }
+  } @else {
+    *:not(:hover):not(:focus):not(:focus-within) > & {
+      @include cat-visually-hidden;
+    }
+  }
+}

package/dist/catalyst/scss/utils/_visibility.scss

@@ -0,0 +1,13 @@
+@use 'visibility.mixins' as *;
+
+.cat-visually-hidden {
+  @include cat-visually-hidden;
+}
+
+.cat-visually-hidden-focusable {
+  @include cat-visually-hidden-focusable;
+}
+
+.cat-visually-hidden-hoverable {
+  @include cat-visually-hidden-hoverable;
+}

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

@@ -506,7 +506,8 @@ const CatCheckbox = class {
     }
   }
   componentWillRender() {
-    if (!this.label && !this.hostElement.querySelector('[slot="label"]')) {
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    if (!this.label && !this.hasSlottedLabel) {
       loglevel.loglevel.error('[A11y] Missing ARIA label on checkbox', this);
     }
   }
@@ -540,7 +541,7 @@ const CatCheckbox = class {
 };
 CatCheckbox.style = catCheckboxCss;
 
-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}.icon-xs svg{font-size:0.75rem}.icon-s svg{font-size:1rem}.icon-m svg{font-size:1.25rem}.icon-l svg{font-size:1.5rem}.icon-xl svg{font-size:1.75rem}";
+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;height:1em;width:calc(var(--cat-icon-ratio, 1) * 1em)}.icon-xs svg{font-size:0.75rem}.icon-s svg{font-size:1rem}.icon-m svg{font-size:1.25rem}.icon-l svg{font-size:1.5rem}.icon-xl svg{font-size:1.75rem}";
 
 const CatIcon = class {
   constructor(hostRef) {
@@ -618,7 +619,8 @@ const CatInput = class {
     this.type = 'text';
   }
   componentWillRender() {
-    if (!this.label && !this.hostElement.querySelector('[slot="label"]')) {
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    if (!this.label && !this.hasSlottedLabel) {
       loglevel.loglevel.error('[A11y] Missing ARIA label on input', this);
     }
   }
@@ -3033,7 +3035,8 @@ const CatRadio = class {
     this.required = false;
   }
   componentWillRender() {
-    if (!this.label && !this.hostElement.querySelector('[slot="label"]')) {
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    if (!this.label && !this.hasSlottedLabel) {
       loglevel.loglevel.error('[A11y] Missing ARIA label on radio', this);
     }
   }
@@ -4643,7 +4646,8 @@ const CatToggle = class {
     this.required = false;
   }
   componentWillRender() {
-    if (!this.label && !this.hostElement.querySelector('[slot="label"]')) {
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    if (!this.label && !this.hasSlottedLabel) {
       loglevel.loglevel.error('[A11y] Missing ARIA label on toggle', this);
     }
   }