@aquera/nile-elements 0.0.6-10 → 0.0.6-12

package/dist/src/nile-radio-button-group/nile-radio-button-group.js

@@ -1,308 +0,0 @@
-import { __decorate } from "tslib";
-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-radio-button-group.css';
-/**
- * @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.
- *
- * @dependency nile-button-group
- *
- * @slot - The default slot where `<nile-radio>` or `<nile-radio-button>` elements are placed.
- * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
- *  attribute.
- *
- * @event change - Emitted when the radio group's selected value changes.
- * @event input - Emitted when the radio group receives user input.
- * @event invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
- * @csspart button-group - The button group that wraps radio buttons.
- * @csspart button-group__base - The button group's `base` part.
- */
-let NileRadioButtonGroup = class NileRadioButtonGroup extends NileElement {
-    constructor() {
-        super(...arguments);
-        this.hasSlotController = new HasSlotController(this, 'help-text', 'label');
-        this.customValidityMessage = '';
-        this.hasButtonGroup = false;
-        this.defaultValue = '';
-        /**
-         * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
-         * instead.
-         */
-        this.label = '';
-        /** The name of the radio group, submitted as a name/value pair with form data. */
-        this.name = 'option';
-        /** The current value of the radio group, submitted as a name/value pair with form data. */
-        this.value = '';
-        /**
-         * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
-         * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
-         * the same document or shadow root for this to work.
-         */
-        this.form = '';
-        /** Ensures a child radio is checked before allowing the containing form to submit. */
-        this.required = false;
-        /** Used to show radio in inline or not */
-        this.labelInline = false;
-        /** Used to disabled or not */
-        this.disabled = false;
-        this.helpText = '';
-        this.errorMessage = '';
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.defaultValue = this.value;
-        this.handleInitialDisabledState();
-    }
-    getAllRadios() {
-        return [...this.querySelectorAll('nile-radio-button')];
-    }
-    handleRadioClick(event) {
-        const target = event.target.closest('nile-radio-button');
-        const radios = this.getAllRadios();
-        const oldValue = this.value;
-        if (target.disabled) {
-            return;
-        }
-        this.value = target.value;
-        radios.forEach(radio => (radio.checked = radio === target));
-        if (this.value !== oldValue) {
-            this.emit('nile-change', { value: this.value });
-            this.emit('input');
-        }
-    }
-    handleDisabledChange() {
-        this.getAllRadios().forEach(radio => {
-            radio.disabled = this.disabled;
-        });
-    }
-    handleInitialDisabledState() {
-        this.getAllRadios().forEach(radio => {
-            radio.disabled = radio.hasAttribute('disabled')
-                ? radio.disabled
-                : this.disabled;
-        });
-    }
-    handleKeyDown(event) {
-        if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {
-            return;
-        }
-        const radios = this.getAllRadios().filter(radio => !radio.disabled);
-        const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];
-        const incr = event.key === ' '
-            ? 0
-            : ['ArrowUp', 'ArrowLeft'].includes(event.key)
-                ? -1
-                : 1;
-        const oldValue = this.value;
-        let index = radios.indexOf(checkedRadio) + incr;
-        if (index < 0) {
-            index = radios.length - 1;
-        }
-        if (index > radios.length - 1) {
-            index = 0;
-        }
-        this.getAllRadios().forEach(radio => {
-            radio.checked = false;
-            if (!this.hasButtonGroup) {
-                radio.tabIndex = -1;
-            }
-        });
-        this.value = radios[index].value;
-        radios[index].checked = true;
-        if (!this.hasButtonGroup) {
-            radios[index].tabIndex = 0;
-            radios[index].focus();
-        }
-        else {
-            radios[index].shadowRoot.querySelector('button').focus();
-        }
-        if (this.value !== oldValue) {
-            this.emit('change');
-            this.emit('input');
-        }
-        event.preventDefault();
-    }
-    handleLabelClick() {
-        const radios = this.getAllRadios();
-        const checked = radios.find(radio => radio.checked);
-        const radioToFocus = checked || radios[0];
-        // Move focus to the checked radio (or the first one if none are checked) when clicking the label
-        if (radioToFocus) {
-            radioToFocus.focus();
-        }
-    }
-    handleSlotChange() {
-        const radios = this.getAllRadios();
-        radios.forEach(radio => (radio.checked = radio.value === this.value));
-        this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'nile-radio-button');
-        if (!radios.some(radio => radio.checked)) {
-            if (this.hasButtonGroup) {
-                const buttonRadio = radios[0].shadowRoot.querySelector('button');
-                buttonRadio.tabIndex = 0;
-            }
-            else {
-                radios[0].tabIndex = 0;
-            }
-        }
-        if (this.hasButtonGroup) {
-            const buttonGroup = this.shadowRoot?.querySelector('nile-button-group');
-        }
-        const slottedElements = [
-            ...this.defaultSlot.assignedElements({ flatten: true }),
-        ];
-        // console.log(slottedElements);
-        slottedElements.forEach(el => {
-            const index = slottedElements.indexOf(el);
-            const button = this.findButton(el);
-            if (button !== null) {
-                button.classList.toggle('nile-radio-button--first', index === 0);
-                button.classList.toggle('nile-radio-button--inner', index > 0 && index < slottedElements.length - 1);
-                button.classList.toggle('nile-radio-button--last', index === slottedElements.length - 1);
-            }
-        });
-    }
-    findButton(el) {
-        const selector = 'nile-radio-button';
-        return el.closest(selector) ?? el.querySelector(selector);
-    }
-    updateCheckedRadio() {
-        const radios = this.getAllRadios();
-        radios.forEach(radio => (radio.checked = radio.value === this.value));
-    }
-    handleValueChange() {
-        if (this.hasUpdated) {
-            this.updateCheckedRadio();
-        }
-    }
-    render() {
-        const hasLabelSlot = this.hasSlotController.test('label');
-        const hasHelpTextSlot = this.hasSlotController.test('help-text');
-        const hasLabel = this.label ? true : !!hasLabelSlot;
-        const hasHelpText = this.helpText ? true : false;
-        const hasErrorMessage = this.errorMessage ? true : false;
-        const defaultSlot = html `
-      <slot
-        @click=${this.handleRadioClick}
-        @keydown=${this.handleKeyDown}
-        @slotchange=${this.handleSlotChange}
-        role="presentation"
-      ></slot>
-    `;
-        return html `
-      <fieldset
-        part="form-control"
-        class=${classMap({
-            'form-control': true,
-            'form-control--medium': true,
-            'form-control--radio-group': true,
-            'form-control--has-label': hasLabel,
-            'form-control--has-help-text': hasHelpText,
-        })}
-        role="radiogroup"
-        aria-labelledby="label"
-        aria-describedby="help-text"
-        aria-errormessage="error-message"
-      >
-        <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>
-
-        <div part="form-control-input" class="form-control-input">
-          <div class="visually-hidden">
-            <label class="radio-group__validation">
-              <input
-                type="text"
-                class="radio-group__validation-input"
-                ?required=${this.required}
-                tabindex="-1"
-                hidden
-              />
-            </label>
-          </div>
-
-          ${this.hasButtonGroup
-            ? html ` ${defaultSlot} `
-            : html `
-                <div
-                  class="${this.labelInline
-                ? `form-control--inline-radio`
-                : ``}"
-                >
-                  ${defaultSlot}
-                </div>
-              `}
-        </div>
-
-        ${hasHelpText
-            ? html ` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
-            : ``}
-        ${hasErrorMessage
-            ? html `
-              <nile-form-error-message
-                >${this.errorMessage}</nile-form-error-message
-              >
-            `
-            : ``}
-      </fieldset>
-    `;
-    }
-};
-NileRadioButtonGroup.styles = styles;
-__decorate([
-    query('slot:not([name])')
-], NileRadioButtonGroup.prototype, "defaultSlot", void 0);
-__decorate([
-    state()
-], NileRadioButtonGroup.prototype, "hasButtonGroup", void 0);
-__decorate([
-    state()
-], NileRadioButtonGroup.prototype, "defaultValue", void 0);
-__decorate([
-    property()
-], NileRadioButtonGroup.prototype, "label", void 0);
-__decorate([
-    property()
-], NileRadioButtonGroup.prototype, "name", void 0);
-__decorate([
-    property({ reflect: true })
-], NileRadioButtonGroup.prototype, "value", void 0);
-__decorate([
-    property({ reflect: true })
-], NileRadioButtonGroup.prototype, "form", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NileRadioButtonGroup.prototype, "required", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NileRadioButtonGroup.prototype, "labelInline", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NileRadioButtonGroup.prototype, "disabled", void 0);
-__decorate([
-    property({ attribute: 'help-text' })
-], NileRadioButtonGroup.prototype, "helpText", void 0);
-__decorate([
-    property({ attribute: 'error-message' })
-], NileRadioButtonGroup.prototype, "errorMessage", void 0);
-__decorate([
-    watch('disabled', { waitUntilFirstUpdate: true })
-], NileRadioButtonGroup.prototype, "handleDisabledChange", null);
-__decorate([
-    watch('value')
-], NileRadioButtonGroup.prototype, "handleValueChange", null);
-NileRadioButtonGroup = __decorate([
-    customElement('nile-radio-button-group')
-], NileRadioButtonGroup);
-export { NileRadioButtonGroup };
-export default NileRadioButtonGroup;
-//# sourceMappingURL=nile-radio-button-group.js.map

package/dist/src/nile-radio-button-group/nile-radio-button-group.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"nile-radio-button-group.js","sourceRoot":"","sources":["../../../src/nile-radio-button-group/nile-radio-button-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport styles from './nile-radio-button-group.css';\nimport type { CSSResultGroup } from 'lit';\nimport type NileRadioButton from '../nile-radio-button/nile-radio-button';\n\n/**\n * @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.\n *\n * @dependency nile-button-group\n *\n * @slot - The default slot where `<nile-radio>` or `<nile-radio-button>` elements are placed.\n * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`\n *  attribute.\n *\n * @event change - Emitted when the radio group's selected value changes.\n * @event input - Emitted when the radio group receives user input.\n * @event invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n * @csspart button-group - The button group that wraps radio buttons.\n * @csspart button-group__base - The button group's `base` part.\n */\n@customElement('nile-radio-button-group')\nexport class NileRadioButtonGroup extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'help-text',\n    'label'\n  );\n  private customValidityMessage = '';\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n\n  @state() private hasButtonGroup = false;\n\n  @state() defaultValue = '';\n\n  /**\n   * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\n   * instead.\n   */\n  @property() label = '';\n\n  /** The name of the radio group, submitted as a name/value pair with form data. */\n  @property() name = 'option';\n\n  /** The current value of the radio group, submitted as a name/value pair with form data. */\n  @property({ reflect: true }) value = '';\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Ensures a child radio is checked before allowing the containing form to submit. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Used to show radio in inline or not */\n  @property({ type: Boolean, reflect: true }) labelInline = false;\n\n  /** Used to disabled or not */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  @property({ attribute: 'error-message' }) errorMessage = '';\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n    this.handleInitialDisabledState();\n  }\n\n  private getAllRadios() {\n    return [...this.querySelectorAll<NileRadioButton>('nile-radio-button')];\n  }\n\n  private handleRadioClick(event: MouseEvent) {\n    const target = (event.target as HTMLElement).closest<NileRadioButton>(\n      'nile-radio-button'\n    )!;\n    const radios = this.getAllRadios();\n    const oldValue = this.value;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n    radios.forEach(radio => (radio.checked = radio === target));\n\n    if (this.value !== oldValue) {\n      this.emit('nile-change', { value: this.value });\n      this.emit('input');\n    }\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    this.getAllRadios().forEach(radio => {\n      radio.disabled = this.disabled;\n    });\n  }\n\n  private handleInitialDisabledState() {\n    this.getAllRadios().forEach(radio => {\n      radio.disabled = radio.hasAttribute('disabled')\n        ? radio.disabled\n        : this.disabled;\n    });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (\n      !['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(\n        event.key\n      )\n    ) {\n      return;\n    }\n\n    const radios = this.getAllRadios().filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    const incr =\n      event.key === ' '\n        ? 0\n        : ['ArrowUp', 'ArrowLeft'].includes(event.key)\n        ? -1\n        : 1;\n    const oldValue = this.value;\n    let index = radios.indexOf(checkedRadio) + incr;\n\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this.getAllRadios().forEach(radio => {\n      radio.checked = false;\n\n      if (!this.hasButtonGroup) {\n        radio.tabIndex = -1;\n      }\n    });\n\n    this.value = radios[index].value;\n    radios[index].checked = true;\n\n    if (!this.hasButtonGroup) {\n      radios[index].tabIndex = 0;\n      radios[index].focus();\n    } else {\n      radios[index].shadowRoot!.querySelector('button')!.focus();\n    }\n\n    if (this.value !== oldValue) {\n      this.emit('change');\n      this.emit('input');\n    }\n\n    event.preventDefault();\n  }\n\n  private handleLabelClick() {\n    const radios = this.getAllRadios();\n    const checked = radios.find(radio => radio.checked);\n    const radioToFocus = checked || radios[0];\n\n    // Move focus to the checked radio (or the first one if none are checked) when clicking the label\n    if (radioToFocus) {\n      radioToFocus.focus();\n    }\n  }\n\n  private handleSlotChange() {\n    const radios = this.getAllRadios();\n\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n\n    this.hasButtonGroup = radios.some(\n      radio => radio.tagName.toLowerCase() === 'nile-radio-button'\n    );\n\n    if (!radios.some(radio => radio.checked)) {\n      if (this.hasButtonGroup) {\n        const buttonRadio = radios[0].shadowRoot!.querySelector('button')!;\n        buttonRadio.tabIndex = 0;\n      } else {\n        radios[0].tabIndex = 0;\n      }\n    }\n\n    if (this.hasButtonGroup) {\n      const buttonGroup = this.shadowRoot?.querySelector('nile-button-group');\n    }\n\n    const slottedElements = [\n      ...this.defaultSlot.assignedElements({ flatten: true }),\n    ] as HTMLElement[];\n\n    // console.log(slottedElements);\n\n    slottedElements.forEach(el => {\n      const index = slottedElements.indexOf(el);\n      const button = this.findButton(el);\n\n      if (button !== null) {\n        button.classList.toggle('nile-radio-button--first', index === 0);\n        button.classList.toggle(\n          'nile-radio-button--inner',\n          index > 0 && index < slottedElements.length - 1\n        );\n        button.classList.toggle(\n          'nile-radio-button--last',\n          index === slottedElements.length - 1\n        );\n      }\n    });\n  }\n\n  private findButton(el: HTMLElement) {\n    const selector = 'nile-radio-button';\n\n    return el.closest(selector) ?? el.querySelector(selector);\n  }\n\n  private updateCheckedRadio() {\n    const radios = this.getAllRadios();\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n  }\n\n  @watch('value')\n  handleValueChange() {\n    if (this.hasUpdated) {\n      this.updateCheckedRadio();\n    }\n  }\n\n  render() {\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n    const hasHelpText = this.helpText ? true : false;\n    const hasErrorMessage = this.errorMessage ? true : false;\n\n    const defaultSlot = html`\n      <slot\n        @click=${this.handleRadioClick}\n        @keydown=${this.handleKeyDown}\n        @slotchange=${this.handleSlotChange}\n        role=\"presentation\"\n      ></slot>\n    `;\n\n    return html`\n      <fieldset\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--medium': true,\n          'form-control--radio-group': true,\n          'form-control--has-label': hasLabel,\n          'form-control--has-help-text': hasHelpText,\n        })}\n        role=\"radiogroup\"\n        aria-labelledby=\"label\"\n        aria-describedby=\"help-text\"\n        aria-errormessage=\"error-message\"\n      >\n        <label\n          part=\"form-control-label\"\n          id=\"label\"\n          class=\"form-control__label\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n          @click=${this.handleLabelClick}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div part=\"form-control-input\" class=\"form-control-input\">\n          <div class=\"visually-hidden\">\n            <label class=\"radio-group__validation\">\n              <input\n                type=\"text\"\n                class=\"radio-group__validation-input\"\n                ?required=${this.required}\n                tabindex=\"-1\"\n                hidden\n              />\n            </label>\n          </div>\n\n          ${this.hasButtonGroup\n            ? html` ${defaultSlot} `\n            : html`\n                <div\n                  class=\"${this.labelInline\n                    ? `form-control--inline-radio`\n                    : ``}\"\n                >\n                  ${defaultSlot}\n                </div>\n              `}\n        </div>\n\n        ${hasHelpText\n          ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `\n          : ``}\n        ${hasErrorMessage\n          ? html`\n              <nile-form-error-message\n                >${this.errorMessage}</nile-form-error-message\n              >\n            `\n          : ``}\n      </fieldset>\n    `;\n  }\n}\n\nexport default NileRadioButtonGroup;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-radio-button-group': NileRadioButtonGroup;\n  }\n}\n"]}

package/src/nile-radio-button/index.ts

@@ -1 +0,0 @@
-export { NileRadioButton } from './nile-radio-button';

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

@@ -1,175 +0,0 @@
-/**
- * Copyright Aquera Inc 2023
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { css } from 'lit-element';
-
-/**
- * RadioButton CSS
- */
-export const styles = css`
-  :host {
-  }
-
-  .button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    color: var(--color-text-default, #000);
-    text-align: center;
-    border-radius: 4px;
-    font-family: Colfax-regular;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 14px; /* 100% */
-    letter-spacing: 0.2px;
-    text-decoration: none;
-    user-select: none;
-    white-space: nowrap;
-    vertical-align: middle;
-    padding: 12px;
-    cursor: pointer;
-    gap: 10px;
-  }
-
-  .button::-moz-focus-inner {
-    border: 0;
-  }
-
-  .button:focus {
-    outline: none;
-  }
-
-  .button:focus-visible {
-    outline: var(--nile-focus-ring);
-    outline-offset: var(--nile-focus-ring-offset);
-  }
-
-  .button--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* When disabled, prevent mouse events from bubbling up from children */
-  .button--disabled * {
-    pointer-events: none;
-  }
-
-  .button__prefix,
-  .button__suffix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    pointer-events: none;
-  }
-
-  .button__label {
-    display: inline-block;
-  }
-
-  .button__label::slotted(nile-icon) {
-    vertical-align: -2px;
-  }
-
-  /* Default */
-  .button--default {
-    border: 1px solid #c7ced4;
-    background: #fff;
-    color: black;
-  }
-
-  .button--default:hover:not(.button--disabled) {
-    border: 1px solid #c7ced4;
-    background: #e5e9eb;
-  }
-
-  .button--default:active:not(.button--disabled) {
-    border: 1px solid #c7ced4;
-    background: #e5e9eb;
-  }
-
-  .button--checked {
-    border: 1px solid #c7ced4;
-    background: #e5e9eb;
-  }
-
-  .button--has-label.button--medium .button__label {
-    padding: 0 var(--nile-spacing-medium);
-  }
-
-  .button--has-prefix.button--medium {
-    padding-inline-start: var(--nile-spacing-small);
-  }
-
-  .button--has-prefix.button--medium .button__label {
-    padding-inline-start: var(--nile-spacing-small);
-  }
-
-  .button--has-suffix.button--medium,
-  .button--caret.button--medium {
-    padding-inline-end: var(--nile-spacing-small);
-  }
-
-  .button--has-suffix.button--medium .button__label,
-  .button--caret.button--medium .button__label {
-    padding-inline-end: var(--nile-spacing-small);
-  }
-
-  .nile-radio-button--first {
-    background-color: red;
-  }
-
-  :host(.nile-radio-button--first:not(.nile-radio-button--last)) .button {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host(.nile-group-button--inner) .button {
-    border-radius: 0;
-  }
-
-  :host(.nile-radio-button--last:not(.nile-radio-button--first)) .button {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-
-  /* All except the first */
-  :host(.nile-radio-button__button:not(.nile-radio-button__button--first)) {
-    margin-inline-start: calc(-1 * var(--nile-input-border-width));
-  }
-
-  :host(.nile-radio-button--inner) .button {
-    border-radius: 0;
-    border-left: 0;
-    border-right: 0;
-  }
-
-  .button__prefix,
-  .button__suffix,
-  .button__label {
-    display: inline-flex;
-    position: relative;
-    align-items: center;
-  }
-
-  /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.
-    We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */
-  .hidden-input {
-    all: unset;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    outline: dotted 1px red;
-    opacity: 0;
-    z-index: -1;
-  }
-`;
-
-export default [styles];

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

@@ -1,151 +0,0 @@
-/**
- * Copyright Aquera Inc 2023
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import {
-  LitElement,
-  html,
-  property,
-  CSSResultArray,
-  TemplateResult,
-} from 'lit-element';
-import { customElement, query, state } from 'lit/decorators.js';
-import { styles } from './nile-radio-button.css';
-import NileElement from '../internal/nile-element';
-import { HasSlotController } from '../slot';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { watch } from '../internal/watch';
-
-/**
- * Nile icon component.
- *
- * @tag nile-radio-button
- *
- */
-@customElement('nile-radio-button')
-export class NileRadioButton extends NileElement {
-  /**
-   * The styles for RadioButton
-   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-   */
-  public static get styles(): CSSResultArray {
-    return [styles];
-  }
-  private readonly hasSlotController = new HasSlotController(
-    this,
-    '[default]',
-    'prefix',
-    'suffix'
-  );
-
-  @query('.button') input: HTMLInputElement;
-  @query('.hidden-input') hiddenInput: HTMLInputElement;
-
-  @state() protected hasFocus = false;
-
-  /**
-   * @internal The radio button's checked state. This is exposed as an "internal" attribute so we can reflect it, making
-   * it easier to style in button groups.
-   */
-  @property({ type: Boolean, reflect: true }) checked = false;
-
-  /** The radio's value. When selected, the radio group will receive this value. */
-  @property() value: string;
-
-  /** Disables the radio button. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /**
-   * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
-   * this attribute can typically be omitted.
-   */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
-
-  /** Draws a pill-style radio button with rounded edges. */
-  @property({ type: Boolean, reflect: true }) pill = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute('role', 'presentation');
-  }
-
-  private handleBlur() {
-    this.hasFocus = false;
-    this.emit('nile-blur');
-  }
-
-  private handleClick(e: MouseEvent) {
-    if (this.disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-      return;
-    }
-
-    this.checked = true;
-  }
-
-  private handleFocus() {
-    this.hasFocus = true;
-    this.emit('nile-focus');
-  }
-
-  @watch('disabled', { waitUntilFirstUpdate: true })
-  handleDisabledChange() {
-    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
-  }
-
-  /** Sets focus on the radio button. */
-  focus(options?: FocusOptions) {
-    this.input.focus(options);
-  }
-
-  /** Removes focus from the radio button. */
-  blur() {
-    this.input.blur();
-  }
-
-  render() {
-    return html`
-      <div part="base" role="presentation">
-        <button
-          part="${`button${this.checked ? ' button--checked' : ''}`}"
-          role="radio"
-          aria-checked="${this.checked}"
-          class=${classMap({
-            button: true,
-            'button--default': true,
-            'button--checked': this.checked,
-            'button--disabled': this.disabled,
-            'button--focused': this.hasFocus,
-            'button--has-label': this.hasSlotController.test('[default]'),
-            'button--has-prefix': this.hasSlotController.test('prefix'),
-            'button--has-suffix': this.hasSlotController.test('suffix'),
-          })}
-          aria-disabled=${this.disabled}
-          type="button"
-          value=${ifDefined(this.value)}
-          tabindex="${this.checked ? '0' : '-1'}"
-          @blur=${this.handleBlur}
-          @focus=${this.handleFocus}
-          @click=${this.handleClick}
-        >
-          <slot name="prefix" part="prefix" class="button__prefix"></slot>
-          <slot part="label" class="button__label"></slot>
-          <slot name="suffix" part="suffix" class="button__suffix"></slot>
-        </button>
-      </div>
-    `;
-  }
-}
-
-export default NileRadioButton;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-radio-button': NileRadioButton;
-  }
-}

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

@@ -1 +0,0 @@
-export { NileRadioButtonGroup } from './nile-radio-button-group';