@aquera/nile-elements 0.0.6 → 0.0.7-1

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

@@ -263,11 +263,11 @@ export const styles = css`
   }
 
   .select--medium .select__combobox {
-    border-radius: 0.25rem;
-    font-size: 1rem;
-    min-height: 2.5rem;
-    padding-block: 0;
-    padding-inline: 0.75rem;
+    border-radius: 4px;
+    font-size: 14px;
+    padding: 12px;
+    height: 38px;
+    box-sizing: border-box;
   }
 
   .select--medium .select__clear {

package/src/nile-select/nile-select.ts

@@ -865,9 +865,15 @@ export class NileSelect extends NileElement implements NileFormControl {
     this.displayInput.blur();
   }
 
+  onInputChange(event: Event) {
+    // This will stop the event from bubbling up to the parent `nile-select` component
+    event.stopPropagation();
+  }
+
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
+    const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasClearIcon =
       this.clearable && !this.disabled && this.value.length > 0;
@@ -898,6 +904,8 @@ export class NileSelect extends NileElement implements NileFormControl {
           <slot name="label">${this.label}</slot>
         </label>
 
+        ${hasLabelSuffixSlot ? html` <slot name="label-suffix"></slot> ` : ``}
+
         <div part="form-control-input" class="form-control-input">
           <nile-popup
             class=${classMap({
@@ -921,6 +929,7 @@ export class NileSelect extends NileElement implements NileFormControl {
             })}
             placement=${this.placement}
             strategy=${this.hoist ? 'fixed' : 'absolute'}
+            distance="6"
             flip
             shift
             sync="width"
@@ -1068,7 +1077,6 @@ export class NileSelect extends NileElement implements NileFormControl {
               @mouseup=${this.handleOptionClick}
               @slotchange=${this.handleDefaultSlotChange}
             >
-
               ${this.optionsLoading
                 ? html`
                     <span class="select__loader">
@@ -1079,7 +1087,6 @@ export class NileSelect extends NileElement implements NileFormControl {
                     </span>
                   `
                 : ''}
-
               ${this.searchEnabled
                 ? html` <div class="select__search">
                     <nile-input
@@ -1090,6 +1097,7 @@ export class NileSelect extends NileElement implements NileFormControl {
                       @nile-input=${this.handleSearchChange}
                       @nile-focus=${this.handleSearchFocus}
                       @nile-blur=${this.handleSearchBlur}
+                      @nile-change="${this.onInputChange}"
                     >
                       <nile-icon name="search" slot="suffix"> </nile-icon>
                     </nile-input>
@@ -1122,9 +1130,13 @@ export class NileSelect extends NileElement implements NileFormControl {
                         &nbsp; Show Selected</nile-checkbox
                       >
                     </span>
-                    <span class="select__clear" @click="${this.unSlectAll}"
-                      >clear all</span
-                    >
+                    ${this.selectedOptions.length !== 0
+                      ? html` <span
+                          class="select__clear"
+                          @click="${this.unSlectAll}"
+                          >clear all</span
+                        >`
+                      : ``}
                   </div>`
                 : ``}
             </div>

package/src/nile-slide-toggle/nile-slide-toggle.css.ts

@@ -17,7 +17,7 @@ export default css`
   }
 
   .nile-slide-toggle__label {
-    margin-left: 2px;
+    margin-right: 6px;
     font-size: 14px;
     color: var(--nile-colors-dark-900);
     font-family: Colfax-regular;

package/src/nile-slide-toggle/nile-slide-toggle.ts

@@ -39,6 +39,9 @@ export class NileSlideToggle extends NileElement {
 
     return html`
     <div class="nile-slide-toggle">
+    <span class="nile-slide-toggle__label">
+        ${this.label}
+      </span>
       <label class="nile-slide-toggle__switch">
         <input
           type="checkbox"
@@ -47,9 +50,6 @@ export class NileSlideToggle extends NileElement {
         />
         <span class="nile-slide-toggle__slider"></span>
       </label>
-      <span class="nile-slide-toggle__label">
-        <slot>${this.label}</slot>
-      </span>
     </div>
     ${
           hasHelpText

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

@@ -32,6 +32,11 @@ export const styles = css`
     align-items: flex-start;
     padding-top: 10px;
   }
+
+  nile-radio {
+    display: inline-block;
+    padding-right: 10px;
+  }
 `;
 
 export default [styles];

package/src/nile-switcher/nile-switcher.ts

@@ -24,23 +24,52 @@ import { classMap } from 'lit/directives/class-map.js';
  *
  
  * @event nile-change - Emitted when the control's value changes.
+ * @event nile-switch - Emitted when the nile component is being switched.
+  
  */
 
 export interface switchconfig {
+  [key: string]: any;
   toggleSwitch: boolean;
+  disable?: boolean;
   defaultInput: switchInputType;
   switchInput: switchInputType;
 }
 
 export interface switchInputType {
-  inputType: 'dropdown' | 'text' | 'checkbox' | 'text-area';
+  inputType:
+    | INPUT_TYPE_NAMES.DROPDOWN
+    | INPUT_TYPE_NAMES.TEXT
+    | INPUT_TYPE_NAMES.CHECKBOX
+    | INPUT_TYPE_NAMES.TEXTAREA
+    | INPUT_TYPE_NAMES.RADIO
+    | INPUT_TYPE_NAMES.CONTENTEDITOR;
   value?: String | boolean;
   label?: String;
+  type: string;
   placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  error?: boolean;
+  errorMessage?: string;
   options?: Array<any>;
   multiple?: boolean;
 }
 
+export enum INPUT_TYPE {
+  DEFAULT = 'defaultInput',
+  SWITCH = 'switchInput',
+}
+
+export enum INPUT_TYPE_NAMES {
+  DROPDOWN = 'dropdown',
+  TEXT = 'text',
+  CHECKBOX = 'checkbox',
+  TEXTAREA = 'text-area',
+  RADIO = 'radio',
+  CONTENTEDITOR = 'content-editor',
+}
+
 @customElement('nile-switcher')
 export class NileSwitcher extends NileElement {
   /**
@@ -48,7 +77,7 @@ export class NileSwitcher extends NileElement {
    * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
    */
   static styles: CSSResultGroup = styles;
-  @property() nileSwitchConfig: switchconfig;
+  @property({ type: Object }) nileSwitchConfig: switchconfig;
 
   connectedCallback() {
     super.connectedCallback();
@@ -60,54 +89,123 @@ export class NileSwitcher extends NileElement {
     this.emit('nile-destroy');
   }
 
-  renderNileText(defaultInput: switchInputType) {
-    const { value, label, placeholder } = defaultInput;
+  renderNileText(Input: switchInputType, inputType: string) {
+    const {
+      value,
+      label,
+      placeholder,
+      disabled,
+      required,
+      errorMessage,
+      inputType: inputTypeName,
+    } = Input;
     return html`<nile-input
       .value=${value}
       .label=${label}
+      .disabled=${disabled}
+      .required=${required}
+      .errorMessage=${errorMessage}
       .placeholder=${placeholder}
-      @nile-input=${this.handleChange}
+      .error=${true}
+      @nile-input=${(e: CustomEvent) => {
+        this.handleChange(e, inputType, inputTypeName);
+      }}
     ></nile-input>`;
   }
 
-  renderNileTextArea(switchInput: switchInputType) {
-    const { value } = switchInput;
+  renderDropdown(Input: switchInputType, inputType: string) {
+    const {
+      options,
+      multiple,
+      placeholder,
+      disabled,
+      inputType: inputTypeName,
+    } = Input;
+    return html`<nile-select
+      .placeholder=${placeholder}
+      .disabled="${disabled}"
+      .multiple="${multiple}"
+      @nile-change=${(e: CustomEvent) => {
+        this.handleChange(e, inputType, inputTypeName);
+      }}
+    >
+      ${options?.map((option: any) => {
+        return html`<nile-option .value="${option}">${option} </nile-option>`;
+      })}
+    </nile-select>`;
+  }
+
+  renderNileTextArea(Input: switchInputType, inputType: string) {
+    const { value, disabled, inputType: inputTypeName } = Input;
     return html`<nile-textarea
       .value=${value}
-      @nile-input=${this.handleChange}
+      .disabled=${disabled}
+      @nile-input=${(e: CustomEvent) => {
+        this.handleChange(e, inputType, inputTypeName);
+      }}
     ></nile-textarea>`;
   }
 
-  renderNileCheckBox(defaultInput: switchInputType) {
-    const { value, label } = defaultInput;
+  renderNileCheckBox(Input: switchInputType, inputType: string) {
+    const { value, label, disabled, inputType: inputTypeName } = Input;
 
     return html`<nile-checkbox
       .checked=${value}
       .label=${label}
-      @valueChange="${this.handleChangeCheckbox}"
+      .disabled=${disabled}
+      @valueChange=${(e: CustomEvent) => {
+        this.handleChange(e, inputType, inputTypeName);
+      }}
     ></nile-checkbox>`;
   }
 
-  handleChange(event: CustomEvent) {
-    this.emit('nile-change', { value: event.detail.value });
-  }
-
-  handleChangeCheckbox(event: CustomEvent) {
-    this.emit('nile-change', { value: event.detail.checked });
-  }
+  renderNileRadio(Input: switchInputType, inputType: string) {
+    const { options, value, disabled, inputType: inputTypeName } = Input;
 
-  renderDropdown(defaultInput: switchInputType) {
-    const { options, multiple, placeholder } = defaultInput;
-    return html`<nile-select
-      .placeholder=${placeholder}
-      .multiple="${multiple}"
-      @nile-change="${this.handleChange}"
+    return html`<nile-radio-group
+      .value=${value}
+      .disabled=${disabled}
+      @change=${(e: CustomEvent) => {
+        this.handleChange(e, inputType, inputTypeName);
+      }}
     >
       ${options &&
       options.map((option: any) => {
-        return html`<nile-option .value="${option}">${option} </nile-option>`;
+        return html`<nile-radio .value="${option}">${option} </nile-radio>`;
       })}
-    </nile-select>`;
+    </nile-radio-group>`;
+  }
+
+  renderContentEditor(Input: switchInputType, inputType: string) {
+    const {
+      value,
+      options,
+      inputType: inputTypeName,
+      errorMessage,
+      type,
+    } = Input;
+    return html`<nile-content-editor
+       .value=${value}
+       .options=${options}
+       .type =${type}
+       .errorMessage=${errorMessage}
+       @nile-change=${(e: CustomEvent) => {
+         this.handleChange(e, inputType, inputTypeName);
+       }}
+     >
+     </nile-radio-group>`;
+  }
+
+  handleChange(event: CustomEvent, inputType: string, inputTypeName: string) {
+    if (inputTypeName === INPUT_TYPE_NAMES.CHECKBOX) {
+      this.nileSwitchConfig[inputType as keyof switchconfig].value =
+        event.detail.checked;
+    } else {
+      this.nileSwitchConfig[inputType as keyof switchconfig].value =
+        event.detail.value;
+    }
+    event.stopPropagation();
+    this.emit('nile-change', { config: this.nileSwitchConfig });
   }
 
   renderIcon() {
@@ -131,12 +229,14 @@ export class NileSwitcher extends NileElement {
       ...this.nileSwitchConfig,
       toggleSwitch: !this.nileSwitchConfig.toggleSwitch,
     };
+    this.emit('nile-switch', { config: this.nileSwitchConfig });
   }
 
   singleFieldSwitcher(
     defaultInput: switchInputType,
     switchInput: switchInputType,
-    toggleField: boolean
+    toggleField: boolean,
+    disable: boolean
   ) {
     const defaultInputType = defaultInput.inputType;
     const switchInputType = switchInput.inputType;
@@ -145,22 +245,61 @@ export class NileSwitcher extends NileElement {
         ? choose(
             defaultInputType,
             [
-              ['text', () => this.renderNileText(defaultInput)],
-              ['checkbox', () => this.renderNileCheckBox(defaultInput)],
               [
-                'dropdown',
-                () => this.renderDropdown(this.nileSwitchConfig.defaultInput),
+                INPUT_TYPE_NAMES.TEXT,
+                () => this.renderNileText(defaultInput, INPUT_TYPE.DEFAULT),
+              ],
+              [
+                INPUT_TYPE_NAMES.CHECKBOX,
+                () => this.renderNileCheckBox(defaultInput, INPUT_TYPE.DEFAULT),
+              ],
+              [
+                INPUT_TYPE_NAMES.TEXTAREA,
+                () => this.renderNileTextArea(defaultInput, INPUT_TYPE.DEFAULT),
+              ],
+              [
+                INPUT_TYPE_NAMES.RADIO,
+                () => this.renderNileRadio(defaultInput, INPUT_TYPE.DEFAULT),
+              ],
+              [
+                INPUT_TYPE_NAMES.DROPDOWN,
+                () =>
+                  this.renderDropdown(
+                    this.nileSwitchConfig.defaultInput,
+                    INPUT_TYPE.DEFAULT
+                  ),
+              ],
+              [
+                INPUT_TYPE_NAMES.CONTENTEDITOR,
+                () =>
+                  this.renderContentEditor(
+                    this.nileSwitchConfig.defaultInput,
+                    INPUT_TYPE.DEFAULT
+                  ),
               ],
             ],
-            () => this.renderNileText(defaultInput)
+            () => this.renderNileText(defaultInput, INPUT_TYPE.DEFAULT)
           )
         : choose(
             switchInputType,
-            [['text-area', () => this.renderNileTextArea(switchInput)]],
+            [
+              [
+                INPUT_TYPE_NAMES.TEXTAREA,
+                () => this.renderNileTextArea(switchInput, INPUT_TYPE.SWITCH),
+              ],
+              [
+                INPUT_TYPE_NAMES.TEXT,
+                () => this.renderNileText(switchInput, INPUT_TYPE.SWITCH),
+              ],
+              [
+                INPUT_TYPE_NAMES.CONTENTEDITOR,
+                () => this.renderContentEditor(switchInput, INPUT_TYPE.SWITCH),
+              ],
+            ],
 
-            () => this.renderNileTextArea(switchInput)
+            () => this.renderNileTextArea(switchInput, INPUT_TYPE.SWITCH)
           )}
-      ${this.renderIcon()}
+      ${!disable ? this.renderIcon() : ''}
     `;
   }
   public render(): TemplateResult {
@@ -168,10 +307,16 @@ export class NileSwitcher extends NileElement {
       toggleSwitch: toggleField,
       defaultInput,
       switchInput,
+      disable,
     } = this.nileSwitchConfig;
 
     return html`<div class="input-container">
-      ${this.singleFieldSwitcher(defaultInput, switchInput, toggleField)}
+      ${this.singleFieldSwitcher(
+        defaultInput,
+        switchInput,
+        toggleField,
+        !!disable
+      )}
     </div>`;
   }
 }

package/src/nile-textarea/nile-textarea.ts

@@ -149,6 +149,8 @@ export class NileTextarea extends NileElement  {
   /** The default value of the form control. Primarily used for resetting the form control. */
   @defaultValue() defaultValue = '';
 
+  @property({ type: Boolean, reflect: true }) fullHeight = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
@@ -157,12 +159,26 @@ export class NileTextarea extends NileElement  {
       this.setTextareaHeight();
       this.resizeObserver.observe(this.input);
     });
+
+    if(this.fullHeight){
+    requestAnimationFrame(() => {
+      let parentHeight = this.parentElement?.getBoundingClientRect().height;
+
+      if (parentHeight) {
+        parentHeight = parentHeight - 65;
+        this.shadowRoot?.querySelector('textarea')?.style.setProperty('height', `${parentHeight}px`);
+      }
+    });
+    }
+
     this.emit('nile-init');
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.resizeObserver.unobserve(this.input);
+    if(this.input) {
+          this.resizeObserver.unobserve(this.input);
+    }
     this.emit('nile-destroy');
   }
 

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

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

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

@@ -1,2 +0,0 @@
-export { NileRadioButton } from './nile-radio-button';
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-radio-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { NileRadioButton } from './nile-radio-button';\n"]}

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

@@ -1,173 +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];
-//# sourceMappingURL=nile-radio-button.css.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"nile-radio-button.css.js","sourceRoot":"","sources":["../../../src/nile-radio-button/nile-radio-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgKxB,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 * RadioButton CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    color: var(--color-text-default, #000);\n    text-align: center;\n    border-radius: 4px;\n    font-family: Colfax-regular;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 14px; /* 100% */\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    padding: 12px;\n    cursor: pointer;\n    gap: 10px;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--nile-focus-ring);\n    outline-offset: var(--nile-focus-ring-offset);\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  /* When disabled, prevent mouse events from bubbling up from children */\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  .button__prefix,\n  .button__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    pointer-events: none;\n  }\n\n  .button__label {\n    display: inline-block;\n  }\n\n  .button__label::slotted(nile-icon) {\n    vertical-align: -2px;\n  }\n\n  /* Default */\n  .button--default {\n    border: 1px solid #c7ced4;\n    background: #fff;\n    color: black;\n  }\n\n  .button--default:hover:not(.button--disabled) {\n    border: 1px solid #c7ced4;\n    background: #e5e9eb;\n  }\n\n  .button--default:active:not(.button--disabled) {\n    border: 1px solid #c7ced4;\n    background: #e5e9eb;\n  }\n\n  .button--checked {\n    border: 1px solid #c7ced4;\n    background: #e5e9eb;\n  }\n\n  .button--has-label.button--medium .button__label {\n    padding: 0 var(--nile-spacing-medium);\n  }\n\n  .button--has-prefix.button--medium {\n    padding-inline-start: var(--nile-spacing-small);\n  }\n\n  .button--has-prefix.button--medium .button__label {\n    padding-inline-start: var(--nile-spacing-small);\n  }\n\n  .button--has-suffix.button--medium,\n  .button--caret.button--medium {\n    padding-inline-end: var(--nile-spacing-small);\n  }\n\n  .button--has-suffix.button--medium .button__label,\n  .button--caret.button--medium .button__label {\n    padding-inline-end: var(--nile-spacing-small);\n  }\n\n  .nile-radio-button--first {\n    background-color: red;\n  }\n\n  :host(.nile-radio-button--first:not(.nile-radio-button--last)) .button {\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  :host(.nile-group-button--inner) .button {\n    border-radius: 0;\n  }\n\n  :host(.nile-radio-button--last:not(.nile-radio-button--first)) .button {\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  /* All except the first */\n  :host(.nile-radio-button__button:not(.nile-radio-button__button--first)) {\n    margin-inline-start: calc(-1 * var(--nile-input-border-width));\n  }\n\n  :host(.nile-radio-button--inner) .button {\n    border-radius: 0;\n    border-left: 0;\n    border-right: 0;\n  }\n\n  .button__prefix,\n  .button__suffix,\n  .button__label {\n    display: inline-flex;\n    position: relative;\n    align-items: center;\n  }\n\n  /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.\n    We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */\n  .hidden-input {\n    all: unset;\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n    outline: dotted 1px red;\n    opacity: 0;\n    z-index: -1;\n  }\n`;\n\nexport default [styles];\n"]}