@haiilo/catalyst 2.1.3 → 2.4.0

package/dist/catalyst/scss/core/_typography.scss

@@ -2,7 +2,12 @@
 @use '../mixins' as *;
 
 :where(h1, h2, h3, h4, h5, h6),
-.cat-h1, .cat-h2, .cat-h3, .cat-h4, .cat-h5, .cat-h6 {
+.cat-h1,
+.cat-h2,
+.cat-h3,
+.cat-h4,
+.cat-h5,
+.cat-h6 {
   margin-top: 0;
   margin-bottom: $cat-head-margin-bottom;
 }
@@ -155,8 +160,9 @@ dd {
 }
 
 blockquote {
-  padding: 0.5rem 0 0.5rem calc(2rem - 4px);
-  border-left: 4px solid cat-token('color.ui.border.default');
+  padding: 0.75rem 0 0.75rem calc(1.5rem - 2px);
+  border-left: 2px solid cat-token('color.ui.border.quote');
+  font-style: italic;
   @include cat-body('l', null);
 
   > :last-child {
@@ -177,8 +183,8 @@ figcaption {
 }
 
 figure {
-  padding: 0.5rem 0 0.5rem calc(2rem - 4px);
-  border-left: 4px solid cat-token('color.ui.border.default');
+  padding: 0.75rem 0 0.75rem calc(1.5rem - 2px);
+  border-left: 2px solid cat-token('color.ui.border.quote');
 
   blockquote {
     margin-bottom: 0;

package/dist/cjs/{cat-alert_22.cjs.entry.js → cat-alert_23.cjs.entry.js}

@@ -11,9 +11,6 @@ function setAttributeDefault(host, attr, value) {
     host.hostElement.setAttribute(attr, String(value));
   }
 }
-function setPropertyDefault(host, prop) {
-  setAttributeDefault(host, String(prop), host[prop]);
-}
 
 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:rgba(var(--cat-primary-bg, 0, 129, 148), 0.1)}:host([color=primary]) cat-icon{color:rgb(var(--cat-primary-text, 0, 129, 148))}:host([color=secondary]){background-color:rgba(var(--cat-secondary-bg, 105, 118, 135), 0.1)}:host([color=secondary]) cat-icon{color:#697687}:host([color=success]){background-color:rgba(var(--cat-success-bg-, 0, 132, 88), 0.1)}:host([color=success]) cat-icon{color:#008458}:host([color=warning]){background-color:rgba(var(--cat-warning-bg, 255, 206, 128), 0.1)}:host([color=warning]) cat-icon{color:#ebb663}:host([color=danger]){background-color:rgba(var(--cat-danger-bg, 217, 52, 13), 0.1)}:host([color=danger]) cat-icon{color:#d9340d}";
 
@@ -46,7 +43,6 @@ const CatAlert = class {
   connectedCallback() {
     setAttributeDefault(this, 'tabindex', 0);
     setAttributeDefault(this, 'role', this.mapRole.get(this.color));
-    setPropertyDefault(this, 'color');
   }
   render() {
     return (index.h(index.Host, null, !this.noIcon && index.h("cat-icon", { size: "l", icon: this.icon ? this.icon : this.mapIcon.get(this.color) }), index.h("div", { class: "content" }, index.h("slot", null))));
@@ -166,11 +162,6 @@ const CatBadge = class {
      */
     this.pulse = false;
   }
-  connectedCallback() {
-    setPropertyDefault(this, 'variant');
-    setPropertyDefault(this, 'color');
-    setPropertyDefault(this, 'size');
-  }
   render() {
     return index.h("slot", null);
   }
@@ -521,7 +512,7 @@ const CatCheckbox = class {
     this.catChange = index.createEvent(this, "catChange", 7);
     this.catFocus = index.createEvent(this, "catFocus", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
-    this.id = `cat-checkbox-${nextUniqueId$8++}`;
+    this._id = `cat-checkbox-${nextUniqueId$8++}`;
     this.hasSlottedLabel = false;
     /**
      * Checked state of the checkbox
@@ -552,6 +543,9 @@ const CatCheckbox = class {
      */
     this.labelLeft = false;
   }
+  get id() {
+    return this.identifier || this._id;
+  }
   componentDidLoad() {
     if (this.input && this.indeterminate) {
       this.input.indeterminate = true;
@@ -1926,7 +1920,7 @@ const CatInput = class {
     this.catChange = index.createEvent(this, "catChange", 7);
     this.catFocus = index.createEvent(this, "catFocus", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
-    this.id = `cat-input-${nextUniqueId$6++}`;
+    this._id = `cat-input-${nextUniqueId$6++}`;
     this.hasSlottedLabel = false;
     /**
      * Whether the input should show a clear button.
@@ -1948,10 +1942,6 @@ const CatInput = class {
      * Visually hide the label, but still show it to assistive technologies like screen readers.
      */
     this.labelHidden = false;
-    /**
-     * The name of the form control. Submitted with the form as part of a name/value pair.
-     */
-    this.name = '';
     /**
      * The value is not editable.
      */
@@ -1969,6 +1959,9 @@ const CatInput = class {
      */
     this.type = 'text';
   }
+  get id() {
+    return this.identifier || this._id;
+  }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
@@ -2031,6 +2024,50 @@ const CatInput = class {
 };
 CatInput.style = catInputCss;
 
+const catLabelCss = ":host{display:block}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
+
+const CatLabel = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * A value is required or must be check for the form to be submittable.
+     */
+    this.required = false;
+  }
+  onClick() {
+    var _a;
+    if (this.for) {
+      // focus target that is possibly hidden inside a shadow root
+      (_a = (document.getElementById(this.for) || this.findShadowTarget(this.for))) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  }
+  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'), ")")))));
+  }
+  findShadowTarget(id) {
+    var _a;
+    for (let i = 0; i < CatLabel.SHADOW_TARGETS.length; i++) {
+      const elems = document.getElementsByTagName(CatLabel.SHADOW_TARGETS[i]);
+      for (let i = 0; i < elems.length; i++) {
+        const target = (_a = elems[i].shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(id);
+        if (target) {
+          return target;
+        }
+      }
+    }
+    return null;
+  }
+};
+CatLabel.SHADOW_TARGETS = [
+  'CAT-INPUT',
+  'CAT-TEXTAREA',
+  'CAT-CHECKBOX',
+  'CAT-TOGGLE',
+  'CAT-RADIO',
+  'CAT-SELECT'
+];
+CatLabel.style = catLabelCss;
+
 const catPaginationCss = ":host{display:inline-block}:host([hidden]){display:none}ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}li{display:inline-flex;justify-content:center}li.dots{-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([variant=outlined]) ol{gap:0.75rem}.cat-pagination-xs li.dots,.cat-pagination-xs li.text{height:1.5rem;line-height:1.5rem;font-size:0.875rem}.cat-pagination-xs li.dots{width:1.5rem}:host([variant=outlined]) .cat-pagination-xs{gap:0.375rem}.cat-pagination-s li.dots,.cat-pagination-s li.text{height:2rem;line-height:2rem;font-size:0.9375rem}.cat-pagination-s li.dots{width:2rem}:host([variant=outlined]) .cat-pagination-s{gap:0.5rem}.cat-pagination-m li.dots,.cat-pagination-m li.text{height:2.5rem;line-height:2.5rem;font-size:0.9375rem}.cat-pagination-m li.dots{width:2.5rem}:host([variant=outlined]) .cat-pagination-m{gap:0.625rem}.cat-pagination-l li.dots,.cat-pagination-l li.text{height:3rem;line-height:3rem;font-size:0.9375rem}.cat-pagination-l li.dots{width:3rem}:host([variant=outlined]) .cat-pagination-l{gap:0.75rem}.cat-pagination-xl li.dots,.cat-pagination-xl li.text{height:3.5rem;line-height:3.5rem;font-size:1.125rem}.cat-pagination-xl li.dots{width:3.5rem}:host([variant=outlined]) .cat-pagination-xl{gap:0.875rem}";
 
 const CatPagination = class {
@@ -2137,7 +2174,7 @@ const CatRadio = class {
     this.catChange = index.createEvent(this, "catChange", 7);
     this.catFocus = index.createEvent(this, "catFocus", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
-    this.id = `cat-radio-${++nextUniqueId$5}`;
+    this._id = `cat-radio-${++nextUniqueId$5}`;
     this.hasSlottedLabel = false;
     /**
      * Whether this radio is checked.
@@ -2164,6 +2201,9 @@ const CatRadio = class {
      */
     this.labelLeft = false;
   }
+  get id() {
+    return this.identifier || this._id;
+  }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
@@ -2194,7 +2234,7 @@ const CatRadio = class {
     this.input.click();
   }
   render() {
-    return (index.h(index.Host, null, index.h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, index.h("span", { class: "radio" }, index.h("input", { ref: el => (this.input = el), id: this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), index.h("span", { class: "circle" })), index.h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label)), this.hintSection));
+    return (index.h(index.Host, null, index.h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, index.h("span", { class: "radio" }, index.h("input", { ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), index.h("span", { class: "circle" })), index.h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label)), this.hintSection));
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
@@ -4166,7 +4206,7 @@ const CatSelect = class {
     this.catClose = index.createEvent(this, "catClose", 7);
     this.catChange = index.createEvent(this, "catChange", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
-    this.id = `cat-input-${nextUniqueId$4++}`;
+    this._id = `cat-input-${nextUniqueId$4++}`;
     this.term$ = new Subject();
     this.more$ = new Subject();
     this.state = INIT_STATE;
@@ -4191,10 +4231,6 @@ const CatSelect = class {
      * The label for the select.
      */
     this.label = '';
-    /**
-     * The name of the form control. Submitted with the form as part of a name/value pair.
-     */
-    this.name = '';
     /**
      * Visually hide the label, but still show it to assistive technologies like screen readers.
      */
@@ -4212,6 +4248,9 @@ const CatSelect = class {
      */
     this.tags = false;
   }
+  get id() {
+    return this.identifier || this._id;
+  }
   onConnectorChange(connector) {
     this.reset(connector);
     this.resolve();
@@ -6277,7 +6316,7 @@ const CatTextarea = class {
     this.catChange = index.createEvent(this, "catChange", 7);
     this.catFocus = index.createEvent(this, "catFocus", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
-    this.id = `cat-textarea-${nextUniqueId$2++}`;
+    this._id = `cat-textarea-${nextUniqueId$2++}`;
     this.hasSlottedLabel = false;
     /**
      * Whether the textarea is disabled.
@@ -6291,10 +6330,6 @@ const CatTextarea = class {
      * Visually hide the label, but still show it to assistive technologies like screen readers.
      */
     this.labelHidden = false;
-    /**
-     * The name of the form control. Submitted with the form as part of a name/value pair.
-     */
-    this.name = '';
     /**
      * The value is not editable.
      */
@@ -6308,6 +6343,9 @@ const CatTextarea = class {
      */
     this.rows = 3;
   }
+  get id() {
+    return this.identifier || this._id;
+  }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
@@ -6370,7 +6408,7 @@ const CatToggle = class {
     this.catChange = index.createEvent(this, "catChange", 7);
     this.catFocus = index.createEvent(this, "catFocus", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
-    this.id = `cat-toggle-${nextUniqueId$1++}`;
+    this._id = `cat-toggle-${nextUniqueId$1++}`;
     this.hasSlottedLabel = false;
     /**
      * Checked state of the toggle.
@@ -6397,6 +6435,9 @@ const CatToggle = class {
      */
     this.labelLeft = false;
   }
+  get id() {
+    return this.identifier || this._id;
+  }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
@@ -6606,6 +6647,7 @@ exports.cat_checkbox = CatCheckbox;
 exports.cat_dropdown = CatDropdown;
 exports.cat_icon = CatIcon;
 exports.cat_input = CatInput;
+exports.cat_label = CatLabel;
 exports.cat_pagination = CatPagination;
 exports.cat_radio = CatRadio;
 exports.cat_radio_group = CatRadioGroup;
@@ -6620,4 +6662,4 @@ exports.cat_textarea = CatTextarea;
 exports.cat_toggle = CatToggle;
 exports.cat_tooltip = CatTooltip;
 
-//# sourceMappingURL=cat-alert_22.cjs.entry.js.map
+//# sourceMappingURL=cat-alert_23.cjs.entry.js.map