@haiilo/catalyst 6.5.0 → 7.0.0

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

@@ -3,17 +3,23 @@
  */
 /* stylelint-disable value-keyword-case */
 /* stylelint-enable value-keyword-case */
-.hint-section {
+.hint-wrapper {
+  flex: 0 1 auto;
   display: flex;
   gap: 0.5rem;
+}
+
+.hint-section {
+  flex: 1 1 auto;
+  display: flex;
   flex-direction: column;
-  color: rgb(var(--cat-hint-color, inherit));
+  gap: 0.25rem;
+  color: rgb(var(--cat-font-color-muted, 81, 92, 108));
+  font-size: 0.875rem;
+  line-height: 1.125rem;
 }
 .hint-section .input-hint,
 .hint-section ::slotted([slot=hint]) {
-  font-size: 0.875rem;
-  line-height: 1.125rem;
-  font-weight: var(--cat-font-weight-body, 400);
   margin: 0 !important;
 }
 
@@ -285,27 +291,20 @@
   flex-grow: 1;
   justify-content: space-between;
   gap: 0.25rem;
+  color: rgb(var(--cat-font-color-muted, 81, 92, 108));
 }
 
-.label-optional {
-  display: flex;
+.label-optional,
+.label-character-count {
+  display: inline-flex;
   align-items: center;
   max-height: 1.25rem;
   font-size: 0.75rem;
   line-height: 1rem;
-  font-weight: var(--cat-font-weight-body, 400);
-  color: rgb(var(--cat-font-color-muted, 81, 92, 108));
 }
 
 .label-character-count {
-  display: flex;
-  align-items: center;
   margin-left: auto;
-  max-height: 1.25rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: var(--cat-font-weight-body, 400);
-  color: rgb(var(--cat-font-color-muted, 81, 92, 108));
 }
 
 .input-horizontal .label-container.hidden label,
@@ -351,7 +350,6 @@
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-weight: var(--cat-font-weight-body, 400);
-  margin-bottom: 1rem;
 }
 
 :host([hidden]) {

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

@@ -3,20 +3,6 @@
  */
 /* stylelint-disable value-keyword-case */
 /* stylelint-enable value-keyword-case */
-.hint-section {
-  display: flex;
-  gap: 0.5rem;
-  flex-direction: column;
-  color: rgb(var(--cat-hint-color, inherit));
-}
-.hint-section .input-hint,
-.hint-section ::slotted([slot=hint]) {
-  font-size: 0.875rem;
-  line-height: 1.125rem;
-  font-weight: var(--cat-font-weight-body, 400);
-  margin: 0 !important;
-}
-
 .hint-wrapper {
   flex: 0 1 auto;
   display: flex;
@@ -25,22 +11,22 @@
 
 .hint-section {
   flex: 1 1 auto;
-  min-width: 0;
-}
-
-.input-hint,
-::slotted([slot=hint]) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
   color: rgb(var(--cat-font-color-muted, 81, 92, 108));
-  line-height: 1.5;
-  flex: 1 1 auto;
-  min-width: 0;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+}
+.hint-section .input-hint,
+.hint-section ::slotted([slot=hint]) {
+  margin: 0 !important;
 }
 
 :host {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  margin-bottom: 1rem;
 }
 
 :host([hidden]) {

package/dist/collection/scss/_snippets/_form-label.scss

@@ -31,23 +31,19 @@ $cat-input-height: 2.5rem;
   flex-grow: 1;
   justify-content: space-between;
   gap: 0.25rem;
+  color: cat-token('color.ui.font.muted');
 }
 
-.label-optional {
-  display: flex;
+.label-optional,
+.label-character-count {
+  display: inline-flex;
   align-items: center;
   max-height: 1.25rem;
-  @include cat-body('xs');
-  color: cat-token('color.ui.font.muted');
+  @include cat-body('xs', null);
 }
 
 .label-character-count {
-  display: flex;
-  align-items: center;
   margin-left: auto;
-  max-height: 1.25rem;
-  @include cat-body('xs');
-  color: cat-token('color.ui.font.muted');
 }
 
 .input-horizontal,

package/dist/collection/scss/_variables.scss

@@ -1,12 +1,25 @@
 @use 'variables.tokens' as *;
 @forward 'variables.tokens';
 
+// --------
+// -- Variables
+//    These variables are not part of the design tokens, as they do not have a
+//    corresponding value assigned to them. They are still used throughout the
+//    design system to allow for easy customization while maintaining correct
+//    style inheritance.
+// --------
+
+$cat-font-family-head: var(--cat-font-family-head);
+$cat-font-color-head: rgb(var(--cat-font-color-head));
+$cat-font-color-mono: rgb(var(--cat-font-color-mono));
+
 // --------
 // -- Spacings
 // --------
 
-$cat-head-margin-bottom: 0.5rem;
-$cat-body-margin-bottom: 1rem;
+$cat-head-margin-bottom: 1rem;
+$cat-body-margin-bottom: 2rem;
+$cat-form-margin-bottom: 1.5rem;
 $cat-nav-padding-horizontal: 0.75rem;
 
 // --------
@@ -14,6 +27,20 @@ $cat-nav-padding-horizontal: 0.75rem;
 // --------
 
 $cat-mark-color: cat-token('color.theme.primary.bg', 0.2);
+/* stylelint-disable value-keyword-case */
+$font-fallback-base:
+  system-ui,
+  -apple-system,
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  'Noto Sans',
+  'Liberation Sans',
+  Arial,
+  sans-serif !default;
+$font-fallback-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
+$font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
+/* stylelint-enable value-keyword-case */
 
 // --------
 // -- Elevations

package/dist/collection/scss/core/_base.scss

@@ -1,8 +1,6 @@
 @use '../variables' as *;
 @use '../mixins' as *;
 
-// ---- Typography
-
 html,
 body {
   background-color: cat-token('color.ui.background.canvas');
@@ -10,6 +8,6 @@ body {
 
 body {
   @include cat-body('m');
-  font-family: cat-body-font-family();
-  color: cat-token('color.ui.font.body');
+  font-family: cat-token('font.family.body'), $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji;
+  color: cat-token('color.ui.font.base');
 }

package/dist/collection/scss/core/_form.scss

@@ -0,0 +1,14 @@
+@use '../variables' as *;
+@use '../mixins' as *;
+
+.cat-form {
+  :is(cat-checkbox, cat-datepicker, cat-inline, cat-input, cat-radio-group, cat-select, cat-textarea, cat-toggle):not(
+      :last-child
+    ) {
+    margin-bottom: $cat-form-margin-bottom;
+  }
+
+  cat-radio:not(:last-child) {
+    margin-bottom: 0.5rem;
+  }
+}

package/dist/collection/scss/core/_notification.scss

@@ -7,14 +7,13 @@
   background: cat-token('color.ui.background.surface');
   padding: 1.25rem;
   box-shadow: none;
-  color: cat-token('color.ui.font.body');
+  color: cat-token('color.ui.font.base');
   width: 400px;
   max-width: 400px;
   cursor: unset;
 
   &.cat-toastify-dark {
-    --cat-font-color-head: #{cat-token('color.ui.font.headInverted', $wrap: false)};
-    --cat-font-color-body: #{cat-token('color.ui.font.bodyInverted', $wrap: false)};
+    --cat-font-color-base: #{cat-token('color.ui.font.baseInverted', $wrap: false)};
     --cat-primary-text: #{cat-token('color.theme.primaryInverted.text', $wrap: false)};
     --cat-primary-text-hover: #{cat-token('color.theme.primaryInverted.textHover', $wrap: false)};
     --cat-primary-text-active: #{cat-token('color.theme.primaryInverted.textActive', $wrap: false)};

package/dist/collection/scss/core/_typography.scss

@@ -1,15 +1,16 @@
 @use '../variables' as *;
 @use '../mixins' as *;
 
-:where(h1, h2, h3, h4, h5, h6),
+// -- reset margins
+
+:where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, blockquote, figure, pre, hr),
 .cat-h1,
 .cat-h2,
 .cat-h3,
 .cat-h4,
 .cat-h5,
 .cat-h6 {
-  margin-top: 0;
-  margin-bottom: $cat-head-margin-bottom;
+  margin: 0;
 }
 
 // -- head styles
@@ -34,15 +35,9 @@
   }
 }
 
-:where(p) {
-  margin-top: 0;
-  margin-bottom: $cat-body-margin-bottom;
-}
-
 hr,
 .cat-hr {
   display: block;
-  margin: $cat-body-margin-bottom 0;
   border: 0;
   height: 1px;
   background-color: cat-token('color.ui.border.default');
@@ -120,11 +115,6 @@ dl {
   }
 }
 
-:where(ol, ul, dl) {
-  margin-top: 0;
-  margin-bottom: $cat-body-margin-bottom;
-}
-
 nav ol,
 nav ul,
 ol.cat-plain,
@@ -151,10 +141,6 @@ dd {
 
 // ----- blockquotes & figures
 
-:where(blockquote, figure) {
-  margin: 0 0 $cat-body-margin-bottom;
-}
-
 blockquote {
   padding: 0.75rem 0 0.75rem calc(1.5rem - 2px);
   border-left: 2px solid cat-token('color.ui.border.quote');
@@ -181,7 +167,7 @@ blockquote {
 }
 
 figcaption {
-  @include cat-body('s');
+  @include cat-body('s', null);
 }
 
 // ----- code
@@ -209,11 +195,6 @@ pre {
   }
 }
 
-:where(pre) {
-  margin-top: 0;
-  margin-bottom: $cat-body-margin-bottom;
-}
-
 kbd,
 code {
   margin: 0 0.125rem;
@@ -241,81 +222,29 @@ code {
 
 // ----- editorial typography
 
-cat-article,
 .cat-article {
-  font-size: 1rem;
-
-  $cat-head-margin-bottom: 1.5rem;
-  $cat-body-margin-bottom: 2.5rem;
-
-  :where(h1, h2, h3, h4, h5, h6),
-  .cat-h1,
-  .cat-h2,
-  .cat-h3,
-  .cat-h4,
-  .cat-h5,
-  .cat-h6 {
-    margin-top: 0;
+  :where(h1, h2, h3),
+  :is(.cat-h1, .cat-h2, .cat-h3) {
+    color: $cat-font-color-head;
     margin-bottom: $cat-head-margin-bottom;
-  }
-
-  .type-space-small {
-    margin-top: 0;
-    margin-bottom: calc($cat-body-margin-bottom * 0.2);
-  }
 
-  .type-space-medium {
-    margin-top: 0;
-    margin-bottom: calc($cat-body-margin-bottom * 0.4);
+    &:has(+ h1, + h2, + h3, + h4, + h5, + h6, + .cat-h1, + .cat-h2, + .cat-h3, + .cat-h4, + .cat-h5, + .cat-h6) {
+      margin-bottom: $cat-head-margin-bottom * 0.5;
+    }
   }
 
-  // :where(h1, h2, h3, h4, h5, h6, .cat-h1, .cat-h2, .cat-h3, .cat-h4, .cat-h5, .cat-h6):has(
-  //     + h1,
-  //     + h2,
-  //     + h3,
-  //     + h4,
-  //     + h5,
-  //     + h6,
-  //     + .cat-h1,
-  //     + .cat-h2,
-  //     + .cat-h3,
-  //     + .cat-h4,
-  //     + .cat-h5,
-  //     + .cat-h6
-  //   ) {
-  //     margin-top: 0;
-  //     margin-bottom:calc($cat-body-margin-bottom * 0.2);
-  // }
-
-  // :where(h3, h4, h5, h6, .cat-h3, .cat-h4, .cat-h5, .cat-h6):has(+ ul, + ol, + p) {
-  //   margin-bottom:calc($cat-body-margin-bottom * 0.4);
-  // }
-
-  h5,
-  .cat-h5 {
-    font-size: 1rem;
+  :where(h4, h5, h6),
+  :is(.cat-h4, .cat-h5, .cat-h6) {
+    color: $cat-font-color-head;
+    margin-bottom: $cat-head-margin-bottom * 0.5;
   }
 
-  :where(p),
-  ol,
-  ul,
-  blockquote,
-  figure {
-    margin-top: 0;
+  :where(p, ol, ul, dl, blockquote, figure, pre, cat-alert, cat-card) {
     margin-bottom: $cat-body-margin-bottom;
   }
 
-  :where(p):has(+ p) {
-    margin-bottom: calc($cat-body-margin-bottom * 0.4);
-  }
-
   hr,
   .cat-hr {
-    margin: $cat-body-margin-bottom 0;
-  }
-
-  ol li,
-  ul li {
-    margin-bottom: calc($cat-body-margin-bottom * 0.2);
+    margin: $cat-body-margin-bottom;
   }
 }

package/dist/collection/scss/index.scss

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

package/dist/collection/scss/index.shadow.scss

@@ -3,6 +3,7 @@
 @import '~sanitize.css/reduce-motion.css';
 
 // -- Core
+@import 'core/form';
 @import 'core/nav';
 @import 'core/typography';
 

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

@@ -1,26 +1,7 @@
 @use '../variables' as *;
 
-/* stylelint-disable value-keyword-case */
-$font-fallback-sans-serif:
-  system-ui,
-  -apple-system,
-  'Segoe UI',
-  Roboto,
-  'Helvetica Neue',
-  'Noto Sans',
-  'Liberation Sans',
-  Arial,
-  sans-serif !default;
-$font-fallback-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
-$font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
-/* stylelint-enable value-keyword-case */
-
 // ---- Head
 
-@function cat-head-font-family() {
-  @return cat-token('font.family.head'), $font-fallback-sans-serif, cat-token('font.family.emoji'), $font-fallback-emoji;
-}
-
 @function cat-head-font-size($size) {
   @return cat-token('size.font.head.#{$size}');
 }
@@ -30,20 +11,16 @@ $font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation M
 }
 
 @mixin cat-head($size, $weight: cat-token('font.weight.head')) {
-  font-family: cat-head-font-family();
+  // skip color, as it is only set for editorial styles
+  font-family: $cat-font-family-head, $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji;
   font-size: cat-head-font-size($size);
   line-height: cat-head-line-height($size);
-  color: cat-token('color.ui.font.head');
   font-weight: $weight;
   font-feature-settings: 'pnum';
 }
 
 // ---- Body
 
-@function cat-body-font-family() {
-  @return cat-token('font.family.body'), $font-fallback-sans-serif, cat-token('font.family.emoji'), $font-fallback-emoji;
-}
-
 @function cat-body-font-size($size) {
   @return cat-token('size.font.body.#{$size}');
 }
@@ -78,7 +55,7 @@ $font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation M
   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');
+  color: $cat-font-color-mono;
   font-weight: $weight;
 }
 

package/dist/collection/scss/vendor/_flatpickr.scss

@@ -105,7 +105,7 @@
   color: cat-token('color.ui.font.muted');
 
   &:hover {
-    color: cat-token('color.ui.font.body');
+    color: cat-token('color.ui.font.base');
   }
 }
 
@@ -114,7 +114,7 @@
 
   .flatpickr-weekday {
     color: cat-token('color.ui.font.muted');
-    @include cat-body(xs, $weight: 700);
+    @include cat-body(xs, 700);
   }
 }
 
@@ -134,7 +134,7 @@
 
   span.flatpickr-day,
   span.flatpickr-day:hover {
-    @include cat-body(xs, $weight: 700);
+    @include cat-body(xs, 700);
     color: cat-token('color.ui.font.muted');
     text-align: center;
     line-height: 2.25rem;
@@ -152,7 +152,7 @@
 }
 
 .flatpickr-day {
-  color: cat-token('color.ui.font.body');
+  color: cat-token('color.ui.font.base');
   height: 2.25rem;
   line-height: 2.25rem;
   border: 0;
@@ -263,7 +263,7 @@
     }
 
     &::after {
-      @include cat-body(xs, $weight: 700);
+      @include cat-body(xs, 700);
       position: static;
       border: 0 !important;
       font-size: 10px;
@@ -273,7 +273,7 @@
     }
 
     &:hover {
-      color: cat-token('color.ui.font.body');
+      color: cat-token('color.ui.font.base');
       background: transparent;
     }
   }
@@ -305,7 +305,7 @@
 .flatpickr-time .flatpickr-am-pm {
   margin: 0 0.25rem;
   @include cat-head(4, 400);
-  color: cat-token('color.ui.font.body');
+  color: cat-token('color.ui.font.base');
   line-height: 2.25rem;
 }
 
@@ -325,7 +325,7 @@
 
   input {
     background: transparent !important;
-    color: cat-token('color.ui.font.body');
+    color: cat-token('color.ui.font.base');
     font-size: cat-token('size.font.body.m');
     line-height: 2.25rem;
     font-family: inherit;

package/dist/components/cat-alert.js

@@ -7,7 +7,7 @@ function setAttributeDefault(host, attr, value) {
   }
 }
 
-const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem);margin-bottom:1rem}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgb(var(--cat-primary-bg, 0, 129, 148));color:rgb(var(--cat-primary-fill, 255, 255, 255))}:host([color=secondary]){background-color:rgb(var(--cat-secondary-bg, 105, 118, 135));color:rgb(var(--cat-secondary-fill, 255, 255, 255))}:host([color=success]){background-color:rgb(var(--cat-success-bg, 0, 132, 88));color:rgb(var(--cat-success-fill, 255, 255, 255))}:host([color=warning]){background-color:rgb(var(--cat-warning-bg, 255, 206, 128));color:rgb(var(--cat-warning-fill, 0, 0, 0))}:host([color=danger]){background-color:rgb(var(--cat-danger-bg, 217, 52, 13));color:rgb(var(--cat-danger-fill, 255, 255, 255))}";
+const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem)}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgb(var(--cat-primary-bg, 0, 129, 148));color:rgb(var(--cat-primary-fill, 255, 255, 255))}:host([color=secondary]){background-color:rgb(var(--cat-secondary-bg, 105, 118, 135));color:rgb(var(--cat-secondary-fill, 255, 255, 255))}:host([color=success]){background-color:rgb(var(--cat-success-bg, 0, 132, 88));color:rgb(var(--cat-success-fill, 255, 255, 255))}:host([color=warning]){background-color:rgb(var(--cat-warning-bg, 255, 206, 128));color:rgb(var(--cat-warning-fill, 0, 0, 0))}:host([color=danger]){background-color:rgb(var(--cat-danger-bg, 217, 52, 13));color:rgb(var(--cat-danger-fill, 255, 255, 255))}";
 
 const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class CatAlert extends HTMLElement {
   constructor() {

package/dist/components/cat-alert.js.map

@@ -1 +1 @@
-{"file":"cat-alert.js","mappings":";;;SAAgB,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc;EAEd,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;IACzD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;GACpD;AACH;;ACRA,MAAM,WAAW,GAAG,m9BAAm9B;;MCY19BA,UAAQ;;;;;IACF,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,WAAW,EAAE,sBAAsB,CAAC;MACrC,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,QAAQ,EAAE,mBAAmB,CAAC;KAChC,CAAC,CAAC;IACc,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;MACvB,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,SAAS,EAAE,OAAO,CAAC;MACpB,CAAC,QAAQ,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;iBAO0F,SAAS;;kBAUrF,KAAK;;EAEtB,iBAAiB;IACf,mBAAmB,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;IACzC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;GACjE;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,MAAM,IAAI,gBAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAa,EAC3G,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert"],"sources":["src/utils/setDefault.ts","src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n  host: T,\n  attr: string,\n  value: unknown\n): void {\n  if (!host.hostElement.hasAttribute(attr) && value != null) {\n    host.hostElement.setAttribute(attr, String(value));\n  }\n}\n\nexport function setAttribute<T extends { hostElement: HTMLElement }>(host: T, attr: string, value: unknown): void {\n  host.hostElement.setAttribute(attr, String(value));\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n:host {\n  display: flex;\n  gap: 0.5rem;\n  padding: 1.25rem;\n  border-radius: cat-border-radius('l');\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid cat-token('color.ui.border.focus');\n  outline-offset: 1px;\n}\n\n.content {\n  align-self: center;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n  :host([color='#{$theme}']) {\n    background-color: cat-token('color.theme.#{$theme}.bg');\n    color: cat-token('color.theme.#{$theme}.fill');\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { setAttributeDefault } from '../../utils/setDefault';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  private readonly mapIcon: Map<string, string> = new Map([\n    ['primary', '$cat:alert-primary'],\n    ['secondary', '$cat:alert-secondary'],\n    ['success', '$cat:alert-success'],\n    ['warning', '$cat:alert-warning'],\n    ['danger', '$cat:alert-danger']\n  ]);\n  private readonly mapRole: Map<string, string> = new Map([\n    ['primary', 'status'],\n    ['secondary', 'status'],\n    ['success', 'status'],\n    ['warning', 'alert'],\n    ['danger', 'alert']\n  ]);\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The color palette of the alert.\n   */\n  @Prop({ reflect: true }) color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The name of an icon to be displayed in the alert.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the icon of the alert is deactivated.\n   */\n  @Prop() noIcon = false;\n\n  connectedCallback() {\n    setAttributeDefault(this, 'tabindex', 0);\n    setAttributeDefault(this, 'role', this.mapRole.get(this.color));\n  }\n\n  render() {\n    return (\n      <Host>\n        {!this.noIcon && <cat-icon size=\"l\" icon={this.icon ? this.icon : this.mapIcon.get(this.color)}></cat-icon>}\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-alert.js","mappings":";;;SAAgB,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc;EAEd,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;IACzD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;GACpD;AACH;;ACRA,MAAM,WAAW,GAAG,g8BAAg8B;;MCYv8BA,UAAQ;;;;;IACF,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,WAAW,EAAE,sBAAsB,CAAC;MACrC,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,QAAQ,EAAE,mBAAmB,CAAC;KAChC,CAAC,CAAC;IACc,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;MACvB,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,SAAS,EAAE,OAAO,CAAC;MACpB,CAAC,QAAQ,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;iBAO0F,SAAS;;kBAUrF,KAAK;;EAEtB,iBAAiB;IACf,mBAAmB,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;IACzC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;GACjE;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,MAAM,IAAI,gBAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAa,EAC3G,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert"],"sources":["src/utils/setDefault.ts","src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n  host: T,\n  attr: string,\n  value: unknown\n): void {\n  if (!host.hostElement.hasAttribute(attr) && value != null) {\n    host.hostElement.setAttribute(attr, String(value));\n  }\n}\n\nexport function setAttribute<T extends { hostElement: HTMLElement }>(host: T, attr: string, value: unknown): void {\n  host.hostElement.setAttribute(attr, String(value));\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n:host {\n  display: flex;\n  gap: 0.5rem;\n  padding: 1.25rem;\n  border-radius: cat-border-radius('l');\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid cat-token('color.ui.border.focus');\n  outline-offset: 1px;\n}\n\n.content {\n  align-self: center;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n  :host([color='#{$theme}']) {\n    background-color: cat-token('color.theme.#{$theme}.bg');\n    color: cat-token('color.theme.#{$theme}.fill');\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { setAttributeDefault } from '../../utils/setDefault';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  private readonly mapIcon: Map<string, string> = new Map([\n    ['primary', '$cat:alert-primary'],\n    ['secondary', '$cat:alert-secondary'],\n    ['success', '$cat:alert-success'],\n    ['warning', '$cat:alert-warning'],\n    ['danger', '$cat:alert-danger']\n  ]);\n  private readonly mapRole: Map<string, string> = new Map([\n    ['primary', 'status'],\n    ['secondary', 'status'],\n    ['success', 'status'],\n    ['warning', 'alert'],\n    ['danger', 'alert']\n  ]);\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The color palette of the alert.\n   */\n  @Prop({ reflect: true }) color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The name of an icon to be displayed in the alert.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the icon of the alert is deactivated.\n   */\n  @Prop() noIcon = false;\n\n  connectedCallback() {\n    setAttributeDefault(this, 'tabindex', 0);\n    setAttributeDefault(this, 'role', this.mapRole.get(this.color));\n  }\n\n  render() {\n    return (\n      <Host>\n        {!this.noIcon && <cat-icon size=\"l\" icon={this.icon ? this.icon : this.mapIcon.get(this.color)}></cat-icon>}\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-card.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const catCardCss = ":host{display:block;margin-bottom:1rem;border-radius:var(--cat-border-radius-l, 0.5rem);background-color:white;padding:1.25rem}:host([hidden]){display:none}::slotted(:last-child){margin-bottom:0 !important}::slotted(nav),::slotted(nav:last-child){margin:-1rem -1rem !important}::slotted(.cat-card-pull){margin:-1.25rem !important;width:calc(100% + 2.5rem) !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-h){margin-left:-1.25rem !important;margin-right:-1.25rem !important;width:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-v){margin-top:-1.25rem !important;margin-bottom:-1.25rem !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-t){margin-top:-1.25rem !important}::slotted(.cat-card-pull-l){margin-left:-1.25rem !important}::slotted(.cat-card-pull-r){margin-right:-1.25rem !important}::slotted(.cat-card-pull-b){margin-bottom:-1.25rem !important}";
+const catCardCss = ":host{display:block;border-radius:var(--cat-border-radius-l, 0.5rem);background-color:white;padding:1.25rem}:host([hidden]){display:none}::slotted(:last-child){margin-bottom:0 !important}::slotted(nav),::slotted(nav:last-child){margin:-1rem -1rem !important}::slotted(.cat-card-pull){margin:-1.25rem !important;width:calc(100% + 2.5rem) !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-h){margin-left:-1.25rem !important;margin-right:-1.25rem !important;width:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-v){margin-top:-1.25rem !important;margin-bottom:-1.25rem !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-t){margin-top:-1.25rem !important}::slotted(.cat-card-pull-l){margin-left:-1.25rem !important}::slotted(.cat-card-pull-r){margin-right:-1.25rem !important}::slotted(.cat-card-pull-b){margin-bottom:-1.25rem !important}";
 
 const CatCard$1 = /*@__PURE__*/ proxyCustomElement(class CatCard extends HTMLElement {
   constructor() {

package/dist/components/cat-card.js.map

@@ -1 +1 @@
-{"file":"cat-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,84BAA84B;;MCWp5BA,SAAO;;;;;;EAClB,MAAM;IACJ,OAAO,eAAa,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;","names":["CatCard"],"sources":["src/components/cat-card/cat-card.scss?tag=cat-card&encapsulation=shadow","src/components/cat-card/cat-card.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n$-padding: 1.25rem;\n\n:host {\n  display: block;\n  margin-bottom: $cat-body-margin-bottom;\n  border-radius: cat-border-radius('l');\n  background-color: cat-token('color.ui.background.surface');\n  padding: $-padding;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n::slotted(nav),\n::slotted(nav:last-child) {\n  margin: #{0.25rem - $-padding} #{0.25rem - $-padding} !important;\n}\n\n// --- pull out helper classes\n\n::slotted(.cat-card-pull) {\n  margin: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-h) {\n  margin-left: -$-padding !important;\n  margin-right: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-v) {\n  margin-top: -$-padding !important;\n  margin-bottom: -$-padding !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-t) {\n  margin-top: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-l) {\n  margin-left: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-r) {\n  margin-right: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-b) {\n  margin-bottom: -$-padding !important;\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * Cards are surfaces that display content and actions on a single topic. They\n * should be easy to scan for relevant and actionable information.\n */\n@Component({\n  tag: 'cat-card',\n  styleUrl: 'cat-card.scss',\n  shadow: true\n})\nexport class CatCard {\n  render() {\n    return <slot></slot>;\n  }\n}\n"],"version":3}
+{"file":"cat-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,23BAA23B;;MCWj4BA,SAAO;;;;;;EAClB,MAAM;IACJ,OAAO,eAAa,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;","names":["CatCard"],"sources":["src/components/cat-card/cat-card.scss?tag=cat-card&encapsulation=shadow","src/components/cat-card/cat-card.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n$-padding: 1.25rem;\n\n:host {\n  display: block;\n  border-radius: cat-border-radius('l');\n  background-color: cat-token('color.ui.background.surface');\n  padding: $-padding;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n::slotted(nav),\n::slotted(nav:last-child) {\n  margin: #{0.25rem - $-padding} #{0.25rem - $-padding} !important;\n}\n\n// --- pull out helper classes\n\n::slotted(.cat-card-pull) {\n  margin: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-h) {\n  margin-left: -$-padding !important;\n  margin-right: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-v) {\n  margin-top: -$-padding !important;\n  margin-bottom: -$-padding !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-t) {\n  margin-top: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-l) {\n  margin-left: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-r) {\n  margin-right: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-b) {\n  margin-bottom: -$-padding !important;\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * Cards are surfaces that display content and actions on a single topic. They\n * should be easy to scan for relevant and actionable information.\n */\n@Component({\n  tag: 'cat-card',\n  styleUrl: 'cat-card.scss',\n  shadow: true\n})\nexport class CatCard {\n  render() {\n    return <slot></slot>;\n  }\n}\n"],"version":3}

package/dist/components/cat-checkbox2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { l as loglevel } from './loglevel.js';
 import { C as CatFormHint } from './cat-form-hint.js';
 
-const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column;color:rgb(var(--cat-hint-color, inherit))}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1.125rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}.hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;min-width:0}.input-hint,::slotted([slot=hint]){color:rgb(var(--cat-font-color-muted, 81, 92, 108));line-height:1.5;flex:1 1 auto;min-width:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative}.label-left{flex-direction:row-reverse}.label-left input{right:1px;left:unset}input{position:absolute;width:1.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit;left:1px;top:0.5px}.box-placeholder{width:calc(1.25rem + 1px)}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:var(--cat-border-radius-s, 0.125rem);transition:background-color 125ms ease, border-color 125ms ease;pointer-events:none}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 125ms ease;width:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .check{stroke-dashoffset:16px}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.is-disabled .box{background-color:#f2f4f7;border-color:rgb(var(--cat-border-color-dark, 215, 219, 224));stroke:rgb(var(--cat-font-color-muted, 81, 92, 108))}:host(.cat-error) .box{border:1px solid rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.box,:host(.cat-error) :indeterminate+.box{background-color:rgb(var(--cat-danger-bg, 217, 52, 13));border-color:rgb(var(--cat-danger-bg, 217, 52, 13));stroke:rgb(var(--cat-danger-fill, 255, 255, 255))}.label{flex:1 1 auto;min-width:0}.is-hidden .label{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}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}";
+const catCheckboxCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}:host{display:flex;flex-direction:column;gap:0.5rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative}.label-left{flex-direction:row-reverse}.label-left input{right:1px;left:unset}input{position:absolute;width:1.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit;left:1px;top:0.5px}.box-placeholder{width:calc(1.25rem + 1px)}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:var(--cat-border-radius-s, 0.125rem);transition:background-color 125ms ease, border-color 125ms ease;pointer-events:none}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 125ms ease;width:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .check{stroke-dashoffset:16px}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.is-disabled .box{background-color:#f2f4f7;border-color:rgb(var(--cat-border-color-dark, 215, 219, 224));stroke:rgb(var(--cat-font-color-muted, 81, 92, 108))}:host(.cat-error) .box{border:1px solid rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.box,:host(.cat-error) :indeterminate+.box{background-color:rgb(var(--cat-danger-bg, 217, 52, 13));border-color:rgb(var(--cat-danger-bg, 217, 52, 13));stroke:rgb(var(--cat-danger-fill, 255, 255, 255))}.label{flex:1 1 auto;min-width:0}.is-hidden .label{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}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}";
 
 let nextUniqueId = 0;
 const CatCheckbox = /*@__PURE__*/ proxyCustomElement(class CatCheckbox extends HTMLElement {