@haiilo/catalyst 0.10.3 → 0.10.8

package/dist/catalyst/scss/index.scss

@@ -29,3 +29,55 @@
 // -- Includes
 $cat-font-path: 'assets/fonts' !default;
 @include cat-fonts($cat-font-path);
+
+// -- Styles
+
+.wrapper {
+  width: 48rem;
+  margin: 8rem auto;
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 8rem;
+}
+
+.content {
+  flex: 3 0 0;
+  min-width: 0;
+}
+
+#nav {
+  align-self: flex-start;
+  position: sticky;
+  top: 8rem;
+  flex: 1 0 0;
+  min-width: 0;
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .active {
+    font-weight: bold;
+  }
+}
+
+section {
+  flex: 0 1 auto;
+  padding: 2rem 0;
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  > h2:not(:first-child),
+  > h3:not(:first-child) {
+    margin-top: 2rem;
+  }
+
+  > h2:not(:last-child),
+  > h3:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+}

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

@@ -3129,7 +3129,6 @@ const CatRadio = class {
   }
   onChange(event) {
     this.checked = true;
-    this.value = this.input.value;
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -3147,6 +3146,7 @@ const catRadioGroupCss = ":host{display:block}:host([hidden]){display:none}";
 const CatRadioGroup = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.catChange = index.createEvent(this, "catChange", 7);
     this.catRadioGroup = [];
     /**
      * Whether this radio group is disabled.
@@ -3162,6 +3162,12 @@ const CatRadioGroup = class {
       catRadio.name = newName;
     });
   }
+  onValueChanged(newValue) {
+    this.catRadioGroup.forEach(catRadio => {
+      catRadio.checked = catRadio.value === newValue;
+    });
+    this.updateTabIndex();
+  }
   onDisabledChanged(disabled) {
     this.catRadioGroup.forEach(catRadio => {
       if (disabled) {
@@ -3179,9 +3185,10 @@ const CatRadioGroup = class {
   componentDidLoad() {
     this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
     this.onNameChanged(this.name);
+    this.onValueChanged(this.value);
     this.onDisabledChanged(this.disabled);
     this.onLabelLeftChanged(this.labelLeft);
-    this.updateTabIndex();
+    //this.updateTabIndex();
   }
   onKeydown(event) {
     var _a, _b;
@@ -3199,11 +3206,9 @@ const CatRadioGroup = class {
   }
   onInput(event) {
     const catRadioElement = this.catRadioGroup.find(value => value === event.target);
-    if (catRadioElement && catRadioElement.checked) {
-      const catRadioElements = this.catRadioGroup.filter(value => value !== catRadioElement);
-      catRadioElements.forEach(value => (value.checked = false));
-      this.updateTabIndex();
-    }
+    this.value = catRadioElement === null || catRadioElement === void 0 ? void 0 : catRadioElement.value;
+    //this.updateTabIndex();
+    this.catChange.emit();
   }
   render() {
     return (index.h("div", { role: "radiogroup", "aria-label": this.a11yLabel }, index.h("slot", null)));
@@ -3219,6 +3224,7 @@ const CatRadioGroup = class {
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {
     "name": ["onNameChanged"],
+    "value": ["onValueChanged"],
     "disabled": ["onDisabledChanged"],
     "labelLeft": ["onLabelLeftChanged"]
   }; }