@aquera/nile-elements 0.0.74 → 0.0.75

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.74",
+  "version": "0.0.75",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -67,6 +67,14 @@ export const styles = css`
     align-items: center;
     gap: 4px 7px;
   }
+  
+  @media not all and (min-resolution: .001dpcm) { 
+    @supports (-webkit-appearance:none) 
+    { .day-names, .days {
+       column-gap: 6px; 
+      } 
+    } 
+  }
 
   .days {
     height: auto;

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

@@ -38,7 +38,7 @@ export const styles = css`
     flex-direction: column;
     justify-items: strecth;
     background-color: var(--nile-colors-white-base);
-    border: solid var(--border-width) var(--border-color);
+    outline: solid var(--border-width) var(--border-color);
     border-radius: var(--border-radius);
     min-width: 273px;
     max-width: 350px;
@@ -81,7 +81,7 @@ export const styles = css`
   .card:hover {
     box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
       0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-    border: solid 1px var(--border-color);
+    outline: solid 1px var(--border-color);
   }
 `;
 

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

@@ -4,9 +4,9 @@
  * 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';
-
+ 
 /**
  * Checkbox CSS
  */
@@ -14,25 +14,26 @@ export const styles = css`
   :host {
     display: inline-block;
   }
-
+ 
   :host(.full-width) {
     width: 100%;
   }
-
+ 
   .checkbox {
     position: relative;
     display: inline-flex;
-    align-items: stretch;
+    align-items: top;
     font-weight: 400;
     color: var(--nile-colors-dark-900);
     vertical-align: middle;
     cursor: pointer;
   }
-
-  .checkbox--only__subtitle{
-    align-items: center;
+ 
+  .checkbox--medium {
+    --toggle-size: var(--nile-type-scale-3);
+    font-size: var(--nile-type-scale-3);
   }
-
+ 
   .checkbox__control {
     flex: 0 0 auto;
     position: relative;
@@ -43,13 +44,13 @@ export const styles = css`
     height: var(--nile-type-scale-3);
     border: solid 1px var(--nile-checkbox-color-border-standard);
     background-color: var(--nile-checkbox-color-background-standard);
-    border-radius: 3px;
+    border-radius: 4px;
     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);
   }
-
+ 
   .checkbox__input {
     position: absolute;
     opacity: 0;
@@ -57,11 +58,11 @@ export const styles = css`
     margin: 0;
     pointer-events: none;
   }
-
+ 
   /* svg {
       display:none !important;
   } */
-
+ 
   /* Hover */
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
     .checkbox__control:hover {
@@ -69,7 +70,7 @@ export const styles = css`
     border: 1px solid var(--nile-checkbox-color-border-hover);
     border-radius: 4px;
   }
-
+ 
   /* Focus */
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
     .checkbox__input:focus-visible
@@ -77,14 +78,14 @@ export const styles = css`
     outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
     outline-offset: 1px;
   }
-
+ 
   /* Checked/indeterminate */
   .checkbox--checked .checkbox__control,
   .checkbox--indeterminate .checkbox__control {
     border-color: var(--nile-checkbox-color-border-checked-standard);
     background-color: var(--nile-checkbox-color-background-checked-standard);
   }
-
+ 
   /* Checked/indeterminate + hover */
   .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
@@ -92,7 +93,7 @@ export const styles = css`
     background: var(--nile-checkbox-color-background-checked-hover);
     border: 1px solid var(--nile-checkbox-color-border-checked-hover);
   }
-
+ 
   /* Checked/indeterminate + focus */
   .checkbox.checkbox--checked:not(.checkbox--disabled)
     .checkbox__input:focus-visible
@@ -103,64 +104,46 @@ export const styles = css`
     outline: solid 3px var(--nile-checkbox-color-outline-standard);
     outline-offset: 1px;
   }
-
+ 
   /* Disabled */
   .checkbox--disabled {
     opacity: 0.3;
     cursor: not-allowed;
   }
-
+ 
+ 
   .checkbox__label {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    font-family: var(--nile-font-family-serif);
-    margin-left: 8px;
+    display: inline-block;
+    line-height: 14px;
+    font-size: 14px;
+    margin-inline-start: 0.5em;
     user-select: none;
+    margin-top: 2px;
     color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
     font-style: normal;
-    letter-spacing: 0.2px;
-    box-sizing: border-box;
-  }
-
-  .checkbox__icon__container{
-    display:flex;
-    align-items:center;
-  }
-
-  .checkbox__label__text {
-    display: block;
-    font-size: 14px;
-    font-weight: 500;
-    color: #344054;
-  }
-
-  .checkbox__sublabel__text {
-    display: block;
-    font-size: 14px;
     font-weight: 400;
-    line-height: 20px;
-    color: #475467;
+    letter-spacing: 0.2px;
   }
-
+ 
   :host([required]) .checkbox__label::after {
     content: '*';
     margin-inline-start: -2px;
   }
-
+ 
   .checkbox__checked-icon {
     --nile-svg-stroke: white;
   }
-
+ 
   .checkbox__indeterminate-icon {
     --nile-svg-stroke: white;
   }
-
+ 
   .checkbox__helptext-icon {
     float: right;
     cursor: pointer;
     margin-right: 12px;
   }
 `;
-
-export default [styles];
+ 
+export default [styles];

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

@@ -4,18 +4,17 @@
  * 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,
-  nothing,
   CSSResultArray,
   TemplateResult,
 } from 'lit-element';
 import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-checkbox.css';
-
+ 
 import { classMap } from 'lit/directives/class-map.js';
 import { query, state } from 'lit/decorators.js';
 import { defaultValue } from '../internal/default-value';
@@ -24,7 +23,7 @@ import { live } from 'lit/directives/live.js';
 import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
 import type { CSSResultGroup } from 'lit';
-
+ 
 /**
  * @summary Checkboxes allow the user to toggle an option on or off.
  *
@@ -36,6 +35,7 @@ import type { CSSResultGroup } from 'lit';
  * @event nile-change - Emitted when the checked state changes.
  * @event nile-focus - Emitted when the checkbox gains focus.
  * @event nile-input - Emitted when the checkbox receives input.
+ * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
  *
  * @csspart base - The component's base wrapper.
  * @csspart control - The square container that wraps the checkbox's checked state.
@@ -45,7 +45,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart indeterminate-icon - The indeterminate icon, an `<nile-icon>` element.
  * @csspart label - The container that wraps the checkbox's label.
  */
-
+ 
 /**
  * Nile icon component.
  *
@@ -57,65 +57,63 @@ export class NileCheckbox extends NileElement {
   constructor() {
     super();
   }
-
+ 
   static styles: CSSResultGroup = styles;
-
+ 
   @query('input[type="checkbox"]') input: HTMLInputElement;
-
+ 
   @state() private hasFocus = false;
-
+ 
   @property() title = ''; // make reactive to pass through
-
+ 
   /** The name of the checkbox, submitted as a name/value pair with form data. */
   @property() name = '';
-
+ 
   /** The current value of the checkbox, submitted as a name/value pair with form data. */
   @property() value: boolean;
-
+ 
   /** The checkbox's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
-
+ 
   /** Disables the checkbox. */
   @property({ type: Boolean, reflect: true }) disabled = false;
-
+ 
   /** Draws the checkbox in a checked state. */
   @property({ type: Boolean, reflect: true }) checked = false;
-
+ 
   /** Label, declared this property for backward compatibility of old component  */
   @property({ type: String, reflect: true }) label = '';
-
-  /** Sublabel, declared this property for backward compatibility of old component  */
-  @property({ type: String, reflect: true, attribute: 'sub-label' }) subLabel = '';
-
+ 
   /**
    * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
    * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
    */
   @property({ type: Boolean, reflect: true }) indeterminate = false;
-
+ 
   /** The default value of the form control. Primarily used for resetting the form control. */
   @defaultValue('checked') defaultChecked = false;
-
+ 
   @property({ attribute: 'help-text', reflect: true }) helpText = '';
-
+ 
   @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
-
+ 
   @property({ type: Boolean }) showHelpText = false;
-
+ 
+ 
   /**
    * 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.
    */
   @property({ reflect: true }) form = '';
-
+ 
   /** Makes the checkbox a required field. */
   @property({ type: Boolean, reflect: true }) required = false;
-
-  @query('.checkbox__label__text') labelContainer:HTMLElement;
-
-  @query('div.checkbox__icon__container') checkboxIconContainer:HTMLElement;
-
+ 
+  private toggleHelpText() {
+    this.showHelpText = !this.showHelpText;
+  }
+ 
   private handleClick() {
     this.checked = !this.checked;
     this.indeterminate = false;
@@ -129,61 +127,60 @@ export class NileCheckbox extends NileElement {
       })
     );
   }
-
+ 
   private handleBlur() {
     this.hasFocus = false;
     this.emit('blur');
   }
-
+ 
   private handleInput() {
     this.emit('input');
   }
-
+ 
   private handleFocus() {
     this.hasFocus = true;
     this.emit('focus');
   }
-
+ 
   @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })
   handleStateChange() {
     this.input.checked = this.checked; // force a sync update
     this.input.indeterminate = this.indeterminate; // force a sync update
   }
-
+ 
   /** Simulates a click on the checkbox. */
   click() {
     this.input.click();
   }
-
+ 
   /** Sets focus on the checkbox. */
   focus(options?: FocusOptions) {
     this.input.focus(options);
   }
-
+ 
   /** Removes focus from the checkbox. */
   blur() {
     this.input.blur();
   }
-
+ 
   connectedCallback() {
     super.connectedCallback();
     this.updateHostClass();
     this.emit('nile-init');
   }
-
+ 
   disconnectedCallback() {
     super.disconnectedCallback();
     this.emit('nile-destroy');
   }
-
+ 
   updated(changedProperties: Map<string | number | symbol, unknown>) {
     super.updated(changedProperties);
     if (changedProperties.has('helpText')) {
       this.updateHostClass();
     }
-    this.checkboxIconContainer.style.height=this.labelContainer.scrollHeight+'px';
   }
-
+ 
   private updateHostClass() {
     if (this.helpText) {
       this.classList.add('full-width');
@@ -191,11 +188,11 @@ export class NileCheckbox extends NileElement {
       this.classList.remove('full-width');
     }
   }
-
+ 
   render() {
     const hasHelpText = this.helpText ? true : false;
     const hasErrorMessage = this.errorMessage ? true : false;
-
+ 
     return html`
       <label
         part="base"
@@ -204,68 +201,69 @@ export class NileCheckbox extends NileElement {
           'checkbox--checked': this.checked,
           'checkbox--disabled': this.disabled,
           'checkbox--focused': this.hasFocus,
-          'checkbox--indeterminate': this.indeterminate
-        })} 
+          'checkbox--indeterminate': this.indeterminate,
+          'checkbox--medium': this.size === 'medium',
+        })}
       >
-        <div class="checkbox__icon__container">
-          <span
-            part="control${this.checked ? ' control--checked' : ''}${this
-              .indeterminate
-              ? ' control--indeterminate'
-              : ''}"
-            class="checkbox__control"
-          >
-            <!-- An empty title prevents browser validation tooltips from appearing on hover -->
-            <input
-              class="checkbox__input"
-              type="checkbox"
-              title=${ this.title }
-              name=${this.name}
-              value=${ifDefined(this.value)}
-              .indeterminate=${live(this.indeterminate)}
-              .checked=${live(this.checked)}
-              .disabled=${this.disabled}
-              .required=${this.required}
-              aria-checked=${this.checked ? 'true' : 'false'}
-              @click=${this.handleClick}
-              @input=${this.handleInput}
-              @blur=${this.handleBlur}
-              @focus=${this.handleFocus}
-            />
-            ${this.checked
-              ? html`
-                  <nile-icon
-                    part="checked-icon"
-                    class="checkbox__checked-icon"
-                    color="white"
-                    library="system"
-                    name="tick"
-                    size="12"
-                  ></nile-icon>
-                `
-              : ''}
-            ${!this.checked && this.indeterminate
-              ? html`
-                  <nile-icon
-                    part="indeterminate-icon"
-                    class="checkbox__indeterminate-icon"
-                    library="system"
-                    color="white"
-                    name="minus"
-                    size="12"
-                  ></nile-icon>
-                `
-              : ''}
-          </span>
-        </div>
-
-        <div part="label" class="checkbox__label" style="${!this.label && !this.subLabel?'margin-left:0;':''}">
-          ${this.label ? html`<span class="checkbox__label__text">${this.label}</span>` : ``}
-          ${this.subLabel ? html`<span class="checkbox__sublabel__text">${this.subLabel}</span>` : ``}
+        <input
+          class="checkbox__input"
+          type="checkbox"
+          title=${
+            this
+              .title /* An empty title prevents browser validation tooltips from appearing on hover */
+          }
+          name=${this.name}
+          value=${ifDefined(this.value)}
+          .indeterminate=${live(this.indeterminate)}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          aria-checked=${this.checked ? 'true' : 'false'}
+          @click=${this.handleClick}
+          @input=${this.handleInput}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+        />
+ 
+        <span
+          part="control${this.checked ? ' control--checked' : ''}${this
+            .indeterminate
+            ? ' control--indeterminate'
+            : ''}"
+          class="checkbox__control"
+        >
+          ${this.checked
+            ? html`
+                <nile-icon
+                  part="checked-icon"
+                  class="checkbox__checked-icon"
+                  color="white"
+                  library="system"
+                  name="tick"
+                  size="12"
+                ></nile-icon>
+              `
+            : ''}
+          ${!this.checked && this.indeterminate
+            ? html`
+                <nile-icon
+                  part="indeterminate-icon"
+                  class="checkbox__indeterminate-icon"
+                  library="system"
+                  color="white"
+                  name="minus"
+                  size="12"
+                ></nile-icon>
+              `
+            : ''}
+        </span>
+ 
+        <div part="label" class="checkbox__label">
+          ${typeof this.label === 'boolean' ? '' : this.label}
           <slot></slot>
         </div>
       </label>
-
+ 
       ${hasHelpText
         ? html`
             <nile-tooltip content="${this.helpText}" placement="bottom">
@@ -275,18 +273,23 @@ export class NileCheckbox extends NileElement {
               ></nile-icon>
             </nile-tooltip>
           `
-        : nothing}
+        : ``}
+ 
       ${hasErrorMessage
-        ? html`<nile-form-error-message>${this.errorMessage}</nile-form-error-message>`
-        : nothing}
+        ? html`
+            <nile-form-error-message
+              >${this.errorMessage}</nile-form-error-message
+            >
+          `
+        : ``}
     `;
   }
 }
-
+ 
 export default NileCheckbox;
-
+ 
 declare global {
   interface HTMLElementTagNameMap {
     'nile-checkbox': NileCheckbox;
   }
-}
+}