@haiilo/catalyst 2.4.9 → 3.0.0

package/dist/catalyst/scss/_variables.scss

@@ -31,34 +31,34 @@ $cat-elevation: (
   0: none,
   1: (
     0 0 0 1px cat-token('color.ui.border.default'),
-    0 1px 2px rgba(27, 31, 38, 0.05)
+    0 1px 2px rgba(27, 31, 38, 5%)
   ),
   2: (
     0 0 0 1px cat-token('color.ui.border.default'),
-    0 1px 2px rgba(27, 31, 38, 0.06),
-    0 1px 3px rgba(27, 31, 38, 0.1)
+    0 1px 2px rgba(27, 31, 38, 6%),
+    0 1px 3px rgba(27, 31, 38, 10%)
   ),
   3: (
     0 0 0 1px cat-token('color.ui.border.default'),
-    0 2px 4px -2px rgba(27, 31, 38, 0.06),
-    0 4px 8px -2px rgba(27, 31, 38, 0.1)
+    0 2px 4px -2px rgba(27, 31, 38, 6%),
+    0 4px 8px -2px rgba(27, 31, 38, 10%)
   ),
   4: (
     0 0 0 1px cat-token('color.ui.border.default'),
-    0 4px 6px -2px rgba(27, 31, 38, 0.03),
-    0 12px 16px -4px rgba(27, 31, 38, 0.08)
+    0 4px 6px -2px rgba(27, 31, 38, 3%),
+    0 12px 16px -4px rgba(27, 31, 38, 8%)
   ),
   5: (
     0 0 0 1px cat-token('color.ui.border.default'),
-    0 8px 8px -4px rgba(27, 31, 38, 0.03),
-    0 20px 24px -4px rgba(27, 31, 38, 0.08)
+    0 8px 8px -4px rgba(27, 31, 38, 3%),
+    0 20px 24px -4px rgba(27, 31, 38, 8%)
   ),
   6: (
     0 0 0 1px cat-token('color.ui.border.default'),
-    0 24px 48px -12px rgba(27, 31, 38, 0.18)
+    0 24px 48px -12px rgba(27, 31, 38, 18%)
   ),
   7: (
     0 0 0 1px cat-token('color.ui.border.default'),
-    0 32px 64px -12px rgba(27, 31, 38, 0.14)
+    0 32px 64px -12px rgba(27, 31, 38, 14%)
   )
 );

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_23.cjs.entry.js → 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
     ];
   }
@@ -1887,22 +1887,57 @@ const CatDropdown = class {
 CatDropdown.OFFSET = 4;
 CatDropdown.style = catDropdownCss;
 
-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 catFormGroupCss = ":host{display:block}";
 
-const CatIcon = class {
+const CatFormGroup = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.formElements = [];
     /**
-     * The name of the icon.
+     * Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br />
+     * By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br />
+     * - If there are more required, the optional will be marked.<br />
+     * - If there are less required, it will mark the required.<br /><br />
+     * If a form field had "!", the requiredMarked of the field would not change.
      */
-    this.icon = '';
+    this.requiredMarker = 'auto';
+  }
+  onRequiredMarker(newRequiredMarker) {
+    const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;
+    this.formElements.forEach(element => { var _a; return !((_a = element.requiredMarker) === null || _a === void 0 ? void 0 : _a.endsWith('!')) && (element.requiredMarker = updateMarker); });
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", { onSlotchange: this.onSlotChange.bind(this) })));
+  }
+  onSlotChange() {
+    this.formElements = Array.from(this.hostElement.querySelectorAll('cat-textarea, cat-input, cat-select, cat-label'));
+    this.onRequiredMarker(this.requiredMarker);
+  }
+  calculate(elements) {
+    const formFields = elements.filter(value => value.tagName !== 'CAT-LABEL');
+    const optionalFields = formFields.filter(value => !value.required).length;
+    const requiredFields = formFields.length - optionalFields;
+    return requiredFields >= optionalFields ? 'optional' : 'required';
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "requiredMarker": ["onRequiredMarker"]
+  }; }
+};
+CatFormGroup.style = catFormGroupCss;
+
+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) {
+    index.registerInstance(this, hostRef);
     /**
      * 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'
       } }));
@@ -1921,6 +1956,10 @@ const CatInput = class {
     this.catBlur = index.createEvent(this, "catBlur", 7);
     this._id = `cat-input-${nextUniqueId$6++}`;
     this.hasSlottedLabel = false;
+    /**
+     * Whether the label need a marker to shown if the input is required or optional.
+     */
+    this.requiredMarker = 'optional';
     /**
      * Whether the input should show a clear button.
      */
@@ -1997,7 +2036,7 @@ const CatInput = class {
     this.value = '';
   }
   render() {
-    return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.optional'), ")"))))), index.h("div", { class: {
+    return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.startsWith('optional') && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.required'), ")"))))), index.h("div", { class: {
         'input-wrapper': true,
         'input-round': this.round,
         'input-disabled': this.disabled
@@ -2028,6 +2067,10 @@ const catLabelCss = ":host{display:inline-flex;align-items:center;min-height:2.5
 const CatLabel = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * Whether the label need a marker to shown if the input is required or optional.
+     */
+    this.requiredMarker = 'optional';
     /**
      * A value is required or must be check for the form to be submittable.
      */
@@ -2041,7 +2084,7 @@ const CatLabel = class {
     }
   }
   render() {
-    return (index.h(index.Host, null, index.h("label", { htmlFor: this.for, onClick: this.onClick.bind(this) }, index.h("slot", null), !this.required && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.optional'), ")")))));
+    return (index.h(index.Host, null, index.h("label", { htmlFor: this.for, onClick: this.onClick.bind(this) }, index.h("slot", null), !this.required && this.requiredMarker.startsWith('optional') && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.required'), ")")))));
   }
   findShadowTarget(id) {
     var _a;
@@ -4211,6 +4254,10 @@ const CatSelect = class {
     this.valueChangedBySelection = false;
     this.state = INIT_STATE;
     this.hasSlottedLabel = false;
+    /**
+     * Whether the label need a marker to shown if the select is required or optional.
+     */
+    this.requiredMarker = 'optional';
     /**
      * Enable multiple selection.
      */
@@ -4444,7 +4491,7 @@ const CatSelect = class {
     });
   }
   render() {
-    return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.optional'), ")"))))), index.h("div", { class: { 'select-wrapper': true, 'select-disabled': this.disabled }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, index.h("div", { class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (index.h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (index.h("span", { class: {
+    return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.startsWith('optional') && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.required'), ")"))))), index.h("div", { class: { 'select-wrapper': true, 'select-disabled': this.disabled }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, index.h("div", { class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (index.h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (index.h("span", { class: {
         pill: true,
         'select-no-open': true,
         'select-option-active': this.state.activeSelectionIndex === i
@@ -4454,7 +4501,7 @@ const CatSelect = class {
       this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "cross-circle-outlined", variant: "text", size: "s", a11yLabel: catIconRegistry.catI18nRegistry.t('input.clear'), onClick: () => this.clear() })) : null, !this.state.isResolving && (index.h("cat-button", { iconOnly: true, icon: "chevron-down-outlined", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? catIconRegistry.catI18nRegistry.t('select.close') : catIconRegistry.catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))), this.hintSection, index.h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isLoading
       ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (index.h("li", { class: "select-option-loading" }, index.h("cat-skeleton", { variant: "body", lines: 1 }), index.h("cat-skeleton", { variant: "body", lines: 1 }))))
       : !this.state.options.length &&
-        !this.tags && index.h("li", { class: "select-option-empty" }, catIconRegistry.catI18nRegistry.t('select.empty'))))))));
+        !this.tags && (index.h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : catIconRegistry.catI18nRegistry.t('select.empty')))))))));
   }
   get optionsList() {
     return this.state.options.map((item, i) => {
@@ -4881,7 +4928,7 @@ const CatSelectTest = class {
     setTimeout(() => this.multipleSelect && (this.multipleSelect.value = []), 5000);
   }
   render() {
-    return (index.h(index.Host, { style: { display: 'flex', flexDirection: 'column' } }, index.h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => { var _a; return console.log((_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.value); }, onCatBlur: e => console.log('Multiple blur', e), multiple: true, clearable: true }, index.h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), index.h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), index.h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), index.h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', onCatChange: () => { var _a; return console.log((_a = this.singleSelectAvatar) === null || _a === void 0 ? void 0 : _a.value); }, placeholder: "Search for a country or capital", clearable: true }), index.h("cat-dropdown", { overflow: true, noAutoClose: true }, index.h("cat-button", { slot: "trigger", style: { width: '50%' } }, "Open select"), index.h("div", { slot: "content", style: { width: '400px' } }, index.h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true, style: { width: '90%' } })))));
+    return (index.h(index.Host, { style: { display: 'flex', flexDirection: 'column' } }, index.h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => { var _a; return console.log((_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.value); }, onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true }, index.h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), index.h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), index.h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), index.h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', onCatChange: () => { var _a; return console.log((_a = this.singleSelectAvatar) === null || _a === void 0 ? void 0 : _a.value); }, placeholder: "Search for a country or capital", clearable: true }), index.h("cat-dropdown", { overflow: true, noAutoClose: true }, index.h("cat-button", { slot: "trigger", style: { width: '50%' } }, "Open select"), index.h("div", { slot: "content", style: { width: '400px' } }, index.h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true, style: { width: '90%' } })))));
   }
   get countryConnector() {
     return {
@@ -6328,6 +6375,10 @@ const CatTextarea = class {
     this.catBlur = index.createEvent(this, "catBlur", 7);
     this._id = `cat-textarea-${nextUniqueId$2++}`;
     this.hasSlottedLabel = false;
+    /**
+     * Whether the label need a marker to shown if the textarea is required or optional.
+     */
+    this.requiredMarker = 'optional';
     /**
      * Whether the textarea is disabled.
      */
@@ -6389,7 +6440,7 @@ const CatTextarea = class {
     this.textarea.click();
   }
   render() {
-    return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(Optional)"))))), index.h("textarea", { ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.hintSection));
+    return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && this.requiredMarker.startsWith('optional') && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catIconRegistry.catI18nRegistry.t('input.required'), ")"))))), index.h("textarea", { ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.hintSection));
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
@@ -6655,6 +6706,7 @@ exports.cat_button = CatButton;
 exports.cat_card = CatCard;
 exports.cat_checkbox = CatCheckbox;
 exports.cat_dropdown = CatDropdown;
+exports.cat_form_group = CatFormGroup;
 exports.cat_icon = CatIcon;
 exports.cat_input = CatInput;
 exports.cat_label = CatLabel;
@@ -6672,4 +6724,4 @@ exports.cat_textarea = CatTextarea;
 exports.cat_toggle = CatToggle;
 exports.cat_tooltip = CatTooltip;
 
-//# sourceMappingURL=cat-alert_23.cjs.entry.js.map
+//# sourceMappingURL=cat-alert_24.cjs.entry.js.map