@aquera/nile-elements 1.6.2 → 1.6.4

package/src/nile-checkbox-group/nile-checkbox-group.ts

@@ -0,0 +1,351 @@
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { HasSlotController } from '../internal/slot';
+import { html } from 'lit';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+import { styles } from './nile-checkbox-group.css';
+import { Nile_Events } from '../internal/enum';
+import type { CSSResultGroup, PropertyValues } from 'lit';
+import type NileCheckbox from '../nile-checkbox/nile-checkbox';
+
+/**
+ * @summary Checkbox groups manage multiple [checkboxes](/components/checkbox) so they function as a multi-select form control.
+ * Supports two association modes: slotted children or property-based remote association via `for`/`group`.
+ *
+ * @slot - The default slot where `<nile-checkbox>` elements are placed (slotted mode).
+ * @slot label - The checkbox group's label. Required for proper accessibility. Alternatively, use the `label` attribute.
+ *
+ * @event change - Emitted when the checkbox group's selected values change.
+ * @event input - Emitted when the checkbox group receives user input.
+ *
+ * @csspart form-control - The fieldset wrapper.
+ * @csspart form-control-label - The group label.
+ * @csspart form-control-input - The wrapper around the checkbox options.
+ * @csspart options-base - The container for the checkbox options.
+ */
+@customElement('nile-checkbox-group')
+export class NileCheckboxGroup extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
+  private boundDocumentListener: ((event: Event) => void) | null = null;
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+
+  @state() defaultValue: string[] = [];
+
+  /** The checkbox group's label. Required for proper accessibility. */
+  @property() label = '';
+
+  /** The name of the checkbox group, submitted as a name/value pair with form data. */
+  @property() name = '';
+
+  /** The current selected values, as an array of checkbox value strings. */
+  @property({ type: Array }) value: string[] = [];
+
+  /**
+   * Group name for property-based association. When set, the group discovers
+   * checkboxes anywhere in the DOM that have a matching `group` attribute
+   * instead of relying on slotted children.
+   */
+  @property({ reflect: true, attribute: true}) for = '';
+
+  /**
+   * Associates the group with a `<form>` element by its `id`. The form must
+   * be in the same document or shadow root.
+   */
+  @property({ reflect: true }) form = '';
+
+  /** At least one checkbox must be checked before the form can submit. */
+  @property({ type: Boolean, reflect: true }) required = false;
+
+  /** Layout direction of the checkboxes. */
+  @property({ reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';
+
+  /** Display checkboxes in an inline (horizontal) layout. Alias for orientation="horizontal". */
+  @property({ type: Boolean, reflect: true }) labelInline = false;
+
+  /** Disables all associated checkboxes. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  @property({ attribute: true, reflect: true }) helpText = '';
+
+  @property({ attribute: true, reflect: true }) errorMessage = '';
+
+  /** Maximum number of checkboxes that can be checked. Unchecked boxes are disabled when the limit is reached. */
+  @property({ type: Number, reflect: true }) max: number | undefined;
+
+  /** Minimum selections required for validation. */
+  @property({ type: Number, reflect: true }) min: number | undefined;
+
+  /** Shows a visible border around the fieldset wrapper. */
+  @property({ type: Boolean, reflect: true }) bordered = false;
+
+  /** Legend text displayed at the top of the fieldset when bordered is enabled. */
+  @property({ type: String, reflect: true }) legend = '';
+
+  private get isHorizontal(): boolean {
+    return this.orientation === 'horizontal' || this.labelInline;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.defaultValue = [...this.value];
+    this.setupDocumentListener();
+    this.emit(Nile_Events.NILE_INIT);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.teardownDocumentListener();
+    this.emit(Nile_Events.NILE_DESTROY);
+  }
+
+  private setupDocumentListener() {
+    if (this.for) {
+      this.boundDocumentListener = (event: Event) => {
+        const target = event.target as NileCheckbox;
+        if (
+          target.tagName?.toLowerCase() === 'nile-checkbox' &&
+          target.group === this.for
+        ) {
+          this.handleCheckboxChange(target);
+        }
+      };
+      document.addEventListener(Nile_Events.NILE_CHANGE, this.boundDocumentListener);
+    }
+  }
+
+  private teardownDocumentListener() {
+    if (this.boundDocumentListener) {
+      document.removeEventListener(Nile_Events.NILE_CHANGE, this.boundDocumentListener);
+      this.boundDocumentListener = null;
+    }
+  }
+
+  @watch('for')
+  handleForChange() {
+    this.teardownDocumentListener();
+    this.setupDocumentListener();
+    this.syncCheckboxStates();
+    this.enforceMaxDisabled();
+  }
+
+  private getAllCheckboxes(): NileCheckbox[] {
+    if (this.for) {
+      const root = this.getRootNode() as Document | ShadowRoot;
+      return [...root.querySelectorAll<NileCheckbox>(`nile-checkbox[group="${this.for}"]`)];
+    }
+    return [...this.querySelectorAll<NileCheckbox>('nile-checkbox')];
+  }
+
+  private handleCheckboxClick(event: MouseEvent) {
+    const target = (event.target as HTMLElement).closest<NileCheckbox>('nile-checkbox');
+    if (!target) return;
+    this.handleCheckboxChange(target);
+  }
+
+  private handleChildInput(event: Event) {
+    event.stopPropagation();
+  }
+
+  private handleCheckboxChange(target: NileCheckbox) {
+    if (target.disabled || this.disabled) return;
+
+    const checkboxes = this.getAllCheckboxes();
+    const checkedCount = checkboxes.filter(cb => cb.checked).length;
+
+    if (this.max !== undefined && checkedCount > this.max) {
+      target.checked = false;
+      return;
+    }
+
+    const newValue = checkboxes
+      .filter(cb => cb.checked)
+      .map(cb => String(cb.value));
+
+    const oldValue = this.value;
+    this.value = newValue;
+
+    this.enforceMaxDisabled();
+
+    if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {
+      this.emit(Nile_Events.NILE_CHANGE, { value: this.value });
+    }
+  }
+
+  private enforceMaxDisabled() {
+    if (this.max === undefined) return;
+
+    const checkboxes = this.getAllCheckboxes();
+    const checkedCount = checkboxes.filter(cb => cb.checked).length;
+    const atLimit = checkedCount >= this.max;
+
+    checkboxes.forEach(cb => {
+      if (!cb.checked && !this.disabled) {
+        cb.disabled = atLimit;
+      }
+    });
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('max')) {
+      this.enforceMaxDisabled();
+    }
+  }
+
+  @watch('disabled', { waitUntilFirstUpdate: true })
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.getAllCheckboxes().forEach(cb => {
+        cb.disabled = true;
+      });
+    } else {
+      this.getAllCheckboxes().forEach(cb => {
+        cb.disabled = cb.hasAttribute('disabled');
+      });
+      this.enforceMaxDisabled();
+    }
+  }
+
+  private handleInitialDisabledState() {
+    if (this.disabled) {
+      this.getAllCheckboxes().forEach(cb => {
+        cb.disabled = true;
+      });
+    } else {
+      this.getAllCheckboxes().forEach(cb => {
+        cb.disabled = cb.hasAttribute('disabled') ? true : false;
+      });
+    }
+  }
+
+  private handleLabelClick() {
+    if (this.disabled) return;
+    const checkboxes = this.getAllCheckboxes();
+    const first = checkboxes[0];
+    if (first) {
+      first.focus();
+    }
+  }
+
+  private handleSlotChange() {
+    const checkboxes = this.getAllCheckboxes();
+
+    checkboxes.forEach(cb => {
+      cb.checked = this.value.includes(String(cb.value));
+    });
+
+    this.handleInitialDisabledState();
+    this.enforceMaxDisabled();
+  }
+
+  private syncCheckboxStates() {
+    const checkboxes = this.getAllCheckboxes();
+    checkboxes.forEach(cb => {
+      cb.checked = this.value.includes(String(cb.value));
+    });
+  }
+
+  @watch('value')
+  handleValueChange() {
+    if (this.hasUpdated) {
+      if (this.max !== undefined && this.value.length > this.max) {
+        this.value = this.value.slice(0, this.max);
+      }
+      this.syncCheckboxStates();
+      this.enforceMaxDisabled();
+    }
+  }
+
+  render() {
+    const hasLabelSlot = this.hasSlotController.test('label');
+    const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
+    const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasHelpText = this.helpText ? true : false;
+    const hasErrorMessage = this.errorMessage ? true : false;
+
+    const defaultSlot = html`
+      <slot
+        @click=${this.handleCheckboxClick}
+        @input=${this.handleChildInput}
+        @slotchange=${this.handleSlotChange}
+        role="presentation"
+      ></slot>
+    `;
+
+    return html`
+      <fieldset
+        part="form-control"
+        class=${classMap({
+          'form-control': true,
+          'form-control--medium': true,
+          'form-control--checkbox-group': true,
+          'form-control--has-label': hasLabel,
+          'form-control--has-help-text': hasHelpText,
+          'form-control--bordered': this.bordered,
+        })}
+        role="group"
+        aria-labelledby="label"
+        aria-describedby="help-text"
+        aria-errormessage="error-message"
+      >
+        ${this.legend
+          ? html`<legend part="legend legend-label" class="form-control__legend">${this.legend}</legend>`
+          : ``}
+
+        <label
+          part="form-control-label"
+          id="label"
+          class="form-control__label"
+          aria-hidden=${hasLabel ? 'false' : 'true'}
+          @click=${this.handleLabelClick}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        ${hasLabelSuffixSlot ? html` <slot name="label-suffix"></slot> ` : ``}
+
+        <div part="form-control-input" class="form-control-input" >
+          <div class="visually-hidden" part="validation-hidden">
+            <label class="checkbox-group__validation" part="validation-label" >
+              <input
+                type="text"
+                class="checkbox-group__validation-input"
+                part="validation-input"
+                ?required=${this.required}
+                tabindex="-1"
+                hidden
+              />
+            </label>
+          </div>
+
+          <div part="options-base" class="${this.isHorizontal ? `form-control--inline-checkbox` : ``}">
+            ${defaultSlot}
+          </div>
+        </div>
+
+        ${hasHelpText
+  ? html` <nile-form-help-text id="help-text">${this.helpText}</nile-form-help-text> `
+  : ``}
+
+${hasErrorMessage
+  ? html`
+      <nile-form-error-message id="error-message">${this.errorMessage}</nile-form-error-message>
+            `
+          : ``}
+      </fieldset>
+    `;
+  }
+}
+
+export default NileCheckboxGroup;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-checkbox-group': NileCheckboxGroup;
+  }
+}

package/src/nile-code-editor/nile-code-editor.ts

@@ -586,13 +586,7 @@ export class NileCodeEditor extends NileElement {
   }
 
   getReadOnlyExtension() {
-    if(this.readonly || this.disabled) {
-      return [
-        EditorState.readOnly.of(true),
-        EditorView.editable.of(false),
-      ]
-    }
-    return [];
+    return (this.readonly || this.disabled) ? EditorState.readOnly.of(true) : [];
   }
 
   getSingleLineExtension() {

package/src/nile-icon/icons/svg/arrow-left-small.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNi4xNDM2IDYuOTk4MDNMOC44OTk4NSA5Ljc1NDI4TDguMzU4MDggMTAuMjk2MUw1LjA2MDA2IDYuOTk4MDNMOC4zNTgwOCAzLjcwMDAxTDguODk5ODUgNC4yNDE3OEw2LjE0MzYgNi45OTgwM1oiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/arrow-right-small.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy44MTYzMSA2Ljk5ODAzTDUuMDYwMDYgNC4yNDE3OEw1LjYwMTgzIDMuNzAwMDFMOC44OTk4NSA2Ljk5ODAzTDUuNjAxODMgMTAuMjk2MUw1LjA2MDA2IDkuNzU0MjhMNy44MTYzMSA2Ljk5ODAzWiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/arrow_left_small.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNi4xNDM2IDYuOTk4MDNMOC44OTk4NSA5Ljc1NDI4TDguMzU4MDggMTAuMjk2MUw1LjA2MDA2IDYuOTk4MDNMOC4zNTgwOCAzLjcwMDAxTDguODk5ODUgNC4yNDE3OEw2LjE0MzYgNi45OTgwM1oiIGZpbGw9ImJsYWNrIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/arrow_right_small.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy44MTYzMSA2Ljk5ODAzTDUuMDYwMDYgNC4yNDE3OEw1LjYwMTgzIDMuNzAwMDFMOC44OTk4NSA2Ljk5ODAzTDUuNjAxODMgMTAuMjk2MUw1LjA2MDA2IDkuNzU0MjhMNy44MTYzMSA2Ljk5ODAzWiIgZmlsbD0iYmxhY2siLz48L3N2Zz4=";

package/src/nile-icon/icons/svg/index.ts

@@ -25,8 +25,12 @@ export { default as arrayofinteger } from './array-of-integer';
 export { default as arrayofstring } from './array-of-string';
 export { default as array } from './array';
 export { default as arrayofobject } from './arrayofobject';
+export { default as arrowleftsmall } from './arrow-left-small';
 export { default as arrownarrowleft } from './arrow-narrow-left';
+export { default as arrowrightsmall } from './arrow-right-small';
 export { default as arrow } from './arrow';
+export { default as arrow_left_small } from './arrow_left_small';
+export { default as arrow_right_small } from './arrow_right_small';
 export { default as arrowdown } from './arrowdown';
 export { default as arrowdropdown } from './arrowdropdown';
 export { default as arrowdropup } from './arrowdropup';

package/src/nile-link/nile-link.ts

@@ -5,14 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LitElement, html, CSSResultArray, TemplateResult} from 'lit';
+import { LitElement, html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
 import { customElement, state, property } from 'lit/decorators.js';
 import {styles} from './nile-link.css';
 import { HasSlotController } from '../slot';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
-import NileElement from '../internal/nile-element';
+import NileElement, { setupA11yMetadata } from '../internal/nile-element';
 import { watch } from '../internal/watch';
+import { A11yProperty } from '../internal/accessibility/a11y.property.enum';
+import { Role } from '../internal/accessibility/role.enum';
+import { A11yCustomValue } from '../internal/accessibility/a11y.custom-value.enum';
+import { A11yRole } from '../internal/accessibility/a11y.role.enum';
+import { A11yState } from '../internal/accessibility/a11y.state.enum';
 
 /**
  * Nile icon component.
@@ -51,6 +56,20 @@ export class NileLink extends NileElement {
     this.handleHostClick = this.handleHostClick.bind(this);
     this.addEventListener('click', this.handleHostClick);
     this.emit('nile-init');
+
+    setupA11yMetadata(this, {
+      [Role.Role]: A11yRole.Link,
+      [A11yProperty.AriaLabel]: this.textContent?.trim() || A11yCustomValue.Link,
+    });
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    super.updated(_changedProperties);
+    if (_changedProperties.has('disabled')) {
+      setupA11yMetadata(this, {
+        [A11yState.AriaDisabled]: this.disabled,
+      });
+    }
   }
 
   disconnectedCallback() {

package/src/nile-menu-item/nile-menu-item.css.ts

@@ -39,7 +39,6 @@ export const styles = css`
   .menu-item {
     position: relative;
     display: flex;
-    border-radius: var(--nile-radius-sm,var(--ng-radius-sm));
     align-items: stretch;
     font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));
     font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));
@@ -54,6 +53,11 @@ export const styles = css`
     padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
 
+  .menu-item.menu-item--active {
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
+  }
+
   .menu-item.menu-item--disabled {
     outline: none;
     opacity: 0.5;
@@ -89,11 +93,16 @@ export const styles = css`
     outline: none;
   }
 
-  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
+  :host(:hover:not([active], [aria-disabled='true'], :focus-visible)) .menu-item {
     background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));
     color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));
   }
 
+  :host([active]:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
+  }
+
   :host(:focus-visible) .menu-item {
     outline: none;
     background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));

package/src/nile-menu-item/nile-menu-item.ts

@@ -65,6 +65,9 @@ export class NileMenuItem extends NileElement {
   /** Draws the menu item in a disabled state, preventing selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  /** Draws the menu item in an active/selected state. */
+  @property({ type: Boolean, reflect: true }) active = false;
+
   /** Draws the item in a checked state. */
   @property({ type: Boolean, reflect: true }) hasSubMenu = false;
 
@@ -152,7 +155,8 @@ export class NileMenuItem extends NileElement {
           'menu-item': true,
           'menu-item--checked': this.checked,
           'menu-item--disabled': this.disabled,
-          'menu-item--has-submenu': this.hasSubMenu, // reserved for future use
+          'menu-item--active': this.active,
+          'menu-item--has-submenu': this.hasSubMenu,
         })}
       >
         ${this.checked

package/src/nile-otp-input/nile-otp-input.test.ts

@@ -92,7 +92,7 @@ describe('NileOtpInput', () => {
 
   it('renders help text when provided', async () => {
     const el = await fixture<NileOtpInput>(
-      html`<nile-otp-input help-text="Enter your code"></nile-otp-input>`
+      html`<nile-otp-input .helpText=${'Enter your code'}></nile-otp-input>`
     );
     const helpText = el.shadowRoot!.querySelector('.form-control__help-text');
     expect(helpText).to.exist;
@@ -101,7 +101,7 @@ describe('NileOtpInput', () => {
 
   it('renders error message when provided', async () => {
     const el = await fixture<NileOtpInput>(
-      html`<nile-otp-input error-message="Invalid code"></nile-otp-input>`
+      html`<nile-otp-input .errorMessage=${'Invalid code'}></nile-otp-input>`
     );
     const errorMsg = el.shadowRoot!.querySelector('.form-control__error-message');
     expect(errorMsg).to.exist;
@@ -110,7 +110,7 @@ describe('NileOtpInput', () => {
 
   it('renders separators with separator-every', async () => {
     const el = await fixture<NileOtpInput>(html`
-      <nile-otp-input separator="-" separator-every="3"></nile-otp-input>
+      <nile-otp-input separator="-" .separatorEvery=${3}></nile-otp-input>
     `);
     const separators = el.shadowRoot!.querySelectorAll('.otp__separator');
     expect(separators.length).to.equal(1);
@@ -305,7 +305,7 @@ describe('NileOtpInput', () => {
     await pressKey(el, 1, 'Delete');
     await aTimeout(0);
 
-    expect(cells[1].value).to.equal('');
+    expect(el.value).to.equal('13');
     expect(el.shadowRoot!.activeElement).to.equal(cells[1]);
   });
 
@@ -713,10 +713,10 @@ describe('NileOtpInput', () => {
     const el = await fixture<NileOtpInput>(html`
       <nile-otp-input
         label="Test"
-        help-text="Help"
-        error-message="Error"
+        .helpText=${'Help'}
+        .errorMessage=${'Error'}
         separator="-"
-        separator-every="3"
+        .separatorEvery=${3}
       ></nile-otp-input>
     `);
 

package/src/nile-pagination/nile-pagination.css.ts

@@ -23,6 +23,13 @@ export const styles = css`
     pointer-events: none;
   }
 
+  :host([disabled]) .range-text,
+  :host([disabled]) .page-size-label,
+  :host([disabled]) .mini-showing-label,
+  :host([disabled]) .mini-of-label {
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
+  }
+
   .pagination-wrapper {
     display: flex;
     align-items: center;
@@ -375,6 +382,12 @@ export const styles = css`
     border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
   }
 
+  .prev-button[disabled]::part(base) {
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-disabled));
+  }
+  .next-button[disabled]::part(base) {
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-disabled));
+  }
 `;
 
 export default [styles];

package/src/nile-radio/nile-radio.css.ts

@@ -128,6 +128,10 @@ export const styles = css`
     border: 1px solid var(--nile-colors-dark-100, var(--ng-colors-border-disabled));
   }
 
+  .radio--disabled .radio__label {
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
+  }
+
   /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
   .radio:not(.radio--checked) svg circle {
     opacity: 0;

package/src/nile-radio-group/nile-radio-group.ts

@@ -8,6 +8,7 @@ import NileElement from '../internal/nile-element';
 import styles from './nile-radio-group.css';
 import type { CSSResultGroup, PropertyValues } from 'lit';
 import type NileRadio from '../nile-radio/nile-radio';
+import { Nile_Events } from '../internal/enum';
 
 /**
  * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
@@ -111,9 +112,13 @@ export class NileRadioGroup extends NileElement {
     if (!this.allowUncheckGroup && this.value !== oldValue) {
       this.emit('change', { value: this.value});
       this.emit('input');
+      this.emit(Nile_Events.NILE_CHANGE, { value: this.value});
+      this.emit(Nile_Events.NILE_INPUT, { value: this.value});
     } else if (this.allowUncheckGroup) { 
       this.emit('change', { value: this.value , checked: target.checked});
       this.emit('input');
+      this.emit(Nile_Events.NILE_CHANGE, { value: this.value , checked: target.checked});
+      this.emit(Nile_Events.NILE_INPUT, { value: this.value , checked: target.checked});
     }
   }
 
@@ -183,6 +188,8 @@ export class NileRadioGroup extends NileElement {
     if (this.value !== oldValue) {
       this.emit('change');
       this.emit('input');
+      this.emit(Nile_Events.NILE_CHANGE, { value: this.value});
+      this.emit(Nile_Events.NILE_INPUT, { value: this.value});
     }
 
     event.preventDefault();

package/src/nile-rich-text-editor/nile-rich-text-editor.css.ts

@@ -2,7 +2,8 @@
 import { css } from 'lit';
 
 export const styles = css`
-  .editor { all: revert; }
+  .editor { all: revert;
+  -webkit-user-modify: read-write; }
 
   nile-rich-text-editor {
     position: relative;
@@ -59,9 +60,10 @@ export const styles = css`
 
   nile-rich-text-editor[disabled] .rte-container .editor {
     background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
-    pointer-events: none ;
+    pointer-events: none;
     user-select: none;
     -webkit-user-select: none;
+    -webkit-user-modify: read-only;
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
     color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
   }
@@ -155,10 +157,10 @@ nile-rte-preview {
   }
  
   .editor ul,
-.editor ol {
-  list-style-position: inside;  
-  padding: 0px;
-}
+  .editor ol {
+    list-style-position: outside;
+    padding-inline-start: 24px;
+  }