@aquera/nile-elements 0.0.1-beta.9 → 0.0.3-1

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-menu-item/nile-menu-item.css.js

@@ -0,0 +1,122 @@
+/**
+ * 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';
+/**
+ * MenuItem CSS
+ */
+export const styles = css `
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    display: block;
+  }
+
+  :host([inert]) {
+    display: none;
+  }
+
+  .menu-item {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.8;
+    letter-spacing: normal;
+    color: hsl(240 5.3% 26.1%);
+    padding: 0.25rem 0.25rem;
+    transition: 150ms fill;
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .menu-item.menu-item--disabled {
+    outline: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .menu-item .menu-item__label {
+    flex: 1 1 auto;
+    display: inline-block;
+    text-align: initial;
+  }
+
+  .menu-item .menu-item__prefix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__prefix::slotted(*) {
+    margin-inline-end: 0.5rem;
+  }
+
+  .menu-item .menu-item__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__suffix::slotted(*) {
+    margin-inline-start: 0.5rem;
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+  }
+
+  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
+    background-color: hsl(240 4.8% 95.9%);
+    color: hsl(0, 0%, 0%);
+  }
+
+  :host(:focus-visible) .menu-item {
+    outline: none;
+    background-color: hsl(200.4 98% 39.4%);
+    color: hsl(0, 0%, 100%);
+    opacity: 1;
+  }
+
+  .menu-item .menu-item__check,
+  .menu-item .menu-item__chevron {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5em;
+    visibility: hidden;
+  }
+
+  .menu-item--checked .menu-item__check,
+  .menu-item--has-submenu .menu-item__chevron {
+    visibility: visible;
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .menu-item,
+    :host(:focus-visible) .menu-item {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-menu-item.css.js.map

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-menu-item/nile-menu-item.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6GxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * MenuItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  :host([inert]) {\n    display: none;\n  }\n\n  .menu-item {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.8;\n    letter-spacing: normal;\n    color: hsl(240 5.3% 26.1%);\n    padding: 0.25rem 0.25rem;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n  }\n\n  .menu-item.menu-item--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .menu-item .menu-item__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    text-align: initial;\n  }\n\n  .menu-item .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .menu-item .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: 0.5rem;\n  }\n\n  :host(:focus-visible) {\n    outline: none;\n  }\n\n  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n    background-color: hsl(240 4.8% 95.9%);\n    color: hsl(0, 0%, 0%);\n  }\n\n  :host(:focus-visible) .menu-item {\n    outline: none;\n    background-color: hsl(200.4 98% 39.4%);\n    color: hsl(0, 0%, 100%);\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__check,\n  .menu-item .menu-item__chevron {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5em;\n    visibility: hidden;\n  }\n\n  .menu-item--checked .menu-item__check,\n  .menu-item--has-submenu .menu-item__chevron {\n    visibility: visible;\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .menu-item,\n    :host(:focus-visible) .menu-item {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-radio/nile-radio.css.js

@@ -0,0 +1,123 @@
+/**
+* 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';
+/**
+ * Radio CSS
+ */
+export const styles = css `
+
+
+  :host {
+    display: block;
+  }
+
+  :host(:focus-visible) {
+    outline: 0px;
+  }
+
+  .radio {
+    display: inline-flex;
+    align-items: top;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--nile-colors-dark-900);
+    vertical-align: middle;
+    cursor: pointer;
+    margin: 10px 0;
+    align-items: center;
+  }
+
+  .radio--medium {
+    --toggle-size: 14px;
+    font-size: 14px;
+  }
+
+  .radio__checked-icon {
+    display: inline-flex;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background: var(--nile-colors-primary-600);
+  }
+
+  .radio__control {
+    flex: 0 0 auto;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--nile-type-scale-3);
+    height: var(--nile-type-scale-3);
+    border: solid 1px var(--nile-colors-neutral-700);
+    border-radius: 50%;
+    background-color: var(--nile-colors-white-base);
+    color: transparent;
+    transition: var(--nile-transition-duration-default) border-color, var(--nile-transition-duration-default) background-color,
+    var(--nile-transition-duration-default) color, var(--nile-transition-duration-default) box-shadow;
+  }
+
+  .radio__input {
+    position: absolute;
+    opacity: 0;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* Hover */
+  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
+    border: 1px solid var(--nile-colors-primary-600);
+    background: var(--nile-colors-primary-100);
+  }
+
+  /* Checked */
+  .radio--checked .radio__control {
+    color: var(--nile-colors-primary-600);
+    border: 1px solid var(--nile-colors-primary-600);
+    background-color: var(--nile-colors-white-base);
+  }
+
+  /* Checked + hover */
+  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
+    border: 1px solid var(--nile-colors-primary-900);
+    background-color: var(--nile-colors-white-base);
+  }
+
+  /* Checked + hover */
+  .radio__checked-icon:hover {
+    background-color: var(--nile-colors-primary-900);
+  }
+
+  /* Checked + focus */
+  :host(:focus-visible) .radio__control {
+    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
+    outline-offset: 1px;
+  }
+
+  /* Disabled */
+  .radio--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    border-color: 1px solid var(--nile-colors-neutral-500);
+  }
+
+  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
+  .radio:not(.radio--checked) svg circle {
+    opacity: 0;
+  }
+
+  .radio__label {
+    display: inline-block;
+    color: var(--nile-colors-dark-900);
+    line-height: var(--nile-type-scale-3);
+    margin-inline-start: 0.5em;
+    user-select: none;
+    font-size: var(--nile-type-scale-3);
+    margin-top: 2px;
+  }
+`;
+//# sourceMappingURL=nile-radio.css.js.map

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-radio/nile-radio.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-radio.css.js","sourceRoot":"","sources":["../../../src/nile-radio/nile-radio.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GxB,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit-element';\n\n/**\n * Radio CSS\n */\nexport const styles = css`\n\n\n  :host {\n    display: block;\n  }\n\n  :host(:focus-visible) {\n    outline: 0px;\n  }\n\n  .radio {\n    display: inline-flex;\n    align-items: top;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--nile-colors-dark-900);\n    vertical-align: middle;\n    cursor: pointer;\n    margin: 10px 0;\n    align-items: center;\n  }\n\n  .radio--medium {\n    --toggle-size: 14px;\n    font-size: 14px;\n  }\n\n  .radio__checked-icon {\n    display: inline-flex;\n    width: 9px;\n    height: 9px;\n    border-radius: 50%;\n    background: var(--nile-colors-primary-600);\n  }\n\n  .radio__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-type-scale-3);\n    height: var(--nile-type-scale-3);\n    border: solid 1px var(--nile-colors-neutral-700);\n    border-radius: 50%;\n    background-color: var(--nile-colors-white-base);\n    color: transparent;\n    transition: var(--nile-transition-duration-default) border-color, var(--nile-transition-duration-default) background-color,\n    var(--nile-transition-duration-default) color, var(--nile-transition-duration-default) box-shadow;\n  }\n\n  .radio__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* Hover */\n  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n    border: 1px solid var(--nile-colors-primary-600);\n    background: var(--nile-colors-primary-100);\n  }\n\n  /* Checked */\n  .radio--checked .radio__control {\n    color: var(--nile-colors-primary-600);\n    border: 1px solid var(--nile-colors-primary-600);\n    background-color: var(--nile-colors-white-base);\n  }\n\n  /* Checked + hover */\n  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n    border: 1px solid var(--nile-colors-primary-900);\n    background-color: var(--nile-colors-white-base);\n  }\n\n  /* Checked + hover */\n  .radio__checked-icon:hover {\n    background-color: var(--nile-colors-primary-900);\n  }\n\n  /* Checked + focus */\n  :host(:focus-visible) .radio__control {\n    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n    outline-offset: 1px;\n  }\n\n  /* Disabled */\n  .radio--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    border-color: 1px solid var(--nile-colors-neutral-500);\n  }\n\n  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */\n  .radio:not(.radio--checked) svg circle {\n    opacity: 0;\n  }\n\n  .radio__label {\n    display: inline-block;\n    color: var(--nile-colors-dark-900);\n    line-height: var(--nile-type-scale-3);\n    margin-inline-start: 0.5em;\n    user-select: none;\n    font-size: var(--nile-type-scale-3);\n    margin-top: 2px;\n  }\n`;\n"]}

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-radio-group/nile-radio-group.d.ts

@@ -0,0 +1,66 @@
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @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.
+ */
+export declare class NileRadioGroup extends NileElement {
+    static styles: CSSResultGroup;
+    private readonly hasSlotController;
+    private customValidityMessage;
+    defaultSlot: HTMLSlotElement;
+    private hasButtonGroup;
+    private errorMessage;
+    defaultValue: string;
+    /**
+     * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
+     * instead.
+     */
+    label: string;
+    /** The radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */
+    helpText: string;
+    /** The name of the radio group, submitted as a name/value pair with form data. */
+    name: string;
+    /** The current value of the radio group, submitted as a name/value pair with form data. */
+    value: string;
+    /**
+     * 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.
+     */
+    form: string;
+    /** Ensures a child radio is checked before allowing the containing form to submit. */
+    required: boolean;
+    /** Used to show radio in inline or not */
+    labelInline: boolean;
+    /** Used to disabled or not */
+    disabled: boolean;
+    connectedCallback(): void;
+    private getAllRadios;
+    private handleRadioClick;
+    handleDisabledChange(): void;
+    private handleInitialDisabledState;
+    private handleKeyDown;
+    private handleLabelClick;
+    private handleSlotChange;
+    private updateCheckedRadio;
+    handleValueChange(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default NileRadioGroup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-radio-group': NileRadioGroup;
+    }
+}

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-radio-group/nile-radio-group.js

@@ -0,0 +1,280 @@
+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-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 NileRadioGroup = class NileRadioGroup extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.hasSlotController = new HasSlotController(this, 'help-text', 'label');
+        this.customValidityMessage = '';
+        this.hasButtonGroup = false;
+        this.errorMessage = '';
+        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 radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */
+        this.helpText = '';
+        /** 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;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.defaultValue = this.value;
+        this.handleInitialDisabledState();
+    }
+    getAllRadios() {
+        return [...this.querySelectorAll('nile-radio')];
+    }
+    handleRadioClick(event) {
+        const target = event.target.closest('nile-radio');
+        const radios = this.getAllRadios();
+        const oldValue = this.value;
+        if (target.disabled || this.disabled) {
+            return;
+        }
+        this.value = target.value;
+        radios.forEach(radio => (radio.checked = radio === target));
+        if (this.value !== oldValue) {
+            this.emit('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');
+        }
+    }
+    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 : !!hasHelpTextSlot;
+        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">
+            <div id="error-message" aria-live="assertive">${this.errorMessage}</div>
+            <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>
+
+        <slot
+          name="help-text"
+          part="form-control-help-text"
+          id="help-text"
+          class="form-control__help-text"
+          aria-hidden=${hasHelpText ? 'false' : 'true'}
+        >
+          ${this.helpText}
+        </slot>
+      </fieldset>
+    `;
+    }
+};
+NileRadioGroup.styles = styles;
+__decorate([
+    query('slot:not([name])')
+], NileRadioGroup.prototype, "defaultSlot", void 0);
+__decorate([
+    state()
+], NileRadioGroup.prototype, "hasButtonGroup", void 0);
+__decorate([
+    state()
+], NileRadioGroup.prototype, "errorMessage", void 0);
+__decorate([
+    state()
+], NileRadioGroup.prototype, "defaultValue", void 0);
+__decorate([
+    property()
+], NileRadioGroup.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'help-text' })
+], NileRadioGroup.prototype, "helpText", void 0);
+__decorate([
+    property()
+], NileRadioGroup.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], NileRadioGroup.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+], NileRadioGroup.prototype, "form", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileRadioGroup.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileRadioGroup.prototype, "labelInline", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileRadioGroup.prototype, "disabled", void 0);
+__decorate([
+    watch('disabled', { waitUntilFirstUpdate: true })
+], NileRadioGroup.prototype, "handleDisabledChange", null);
+__decorate([
+    watch('value')
+], NileRadioGroup.prototype, "handleValueChange", null);
+NileRadioGroup = __decorate([
+    customElement('nile-radio-group')
+], NileRadioGroup);
+export { NileRadioGroup };
+export default NileRadioGroup;
+//# sourceMappingURL=nile-radio-group.js.map

package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-radio-group/nile-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-radio-group.js","sourceRoot":"","sources":["../../../src/nile-radio-group/nile-radio-group.ts"],"names":[],"mappings":"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","sourcesContent":["\nimport { 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-group.css';\nimport type { CSSResultGroup } from 'lit';\nimport type NileRadio from '../nile-radio/nile-radio';\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-group')\nexport class NileRadioGroup extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n  private customValidityMessage = '';\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n\n  @state() private hasButtonGroup = false;\n  @state() private errorMessage = '';\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 radio groups's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\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\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  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n    this.handleInitialDisabledState();\n  }\n\n  private getAllRadios() {\n    return [...this.querySelectorAll<NileRadio>('nile-radio')];\n  }\n\n  private handleRadioClick(event: MouseEvent) {\n    const target = (event.target as HTMLElement).closest<NileRadio>('nile-radio')!;\n    const radios = this.getAllRadios();\n    const oldValue = this.value;\n\n    if (target.disabled || this.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('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') ? radio.disabled : this.disabled;\n    });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' '].includes(event.key)) {\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 = event.key === ' ' ? 0 : ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 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(radio => radio.tagName.toLowerCase() === 'nile-radio-button');\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\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 : !!hasHelpTextSlot;\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            <div id=\"error-message\" aria-live=\"assertive\">${this.errorMessage}</div>\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`\n            ${defaultSlot}\n              `\n            :  html`\n            <div class=\"${this.labelInline ? `form-control--inline-radio`:``}\"> ${defaultSlot}</div> `}\n        </div>\n\n        <slot\n          name=\"help-text\"\n          part=\"form-control-help-text\"\n          id=\"help-text\"\n          class=\"form-control__help-text\"\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n        >\n          ${this.helpText}\n        </slot>\n      </fieldset>\n    `;\n  }\n}\n\nexport default NileRadioGroup;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-radio-group': NileRadioGroup;\n  }\n}\n"]}