@dile/ui 2.28.0 → 3.0.1

package/components/button/src/DileButtonIcon.js

@@ -19,6 +19,7 @@ export class DileButtonIcon extends DileButton {
           --dile-icon-color: var(--dile-button-icon-color, var(--dile-on-primary-color, #ffffff));
         }
         dile-icon {
+          --dile-icon-size: var(--dile-button-icon-size, calc(var(--dile-button-font-size, 1rem) * 1.125));
           margin-right: var(--dile-button-icon-separation, 0.3rem);
         }
         button:hover {

package/components/color-picker/src/DileColorPicker.js

@@ -3,7 +3,7 @@ import { DileEmmitChange } from '../../../mixins/form/index.js';
 import { DileOverlay } from '../../../mixins/overlay/index.js';
 import { DileCloseDocumentClick } from '../../../mixins/close-document-click/index.js';
 import { DileCloseOnEscPressed } from '../../../mixins/close-on-esc-pressed/index.js';
-import { messageStyles } from '../../input/index.js';
+import { labelStyles, messageStyles } from '../../input/index.js';
 import { normalizeHex, hexToHsv, hsvToHex } from '../../../lib/color/colorConversion.js';
 
 export class DileColorPicker extends DileOverlay(
@@ -133,6 +133,7 @@ export class DileColorPicker extends DileOverlay(
 
   static get styles() {
     return [
+      labelStyles,
       messageStyles,
       css`
         * {
@@ -142,13 +143,6 @@ export class DileColorPicker extends DileOverlay(
           display: inline-block;
           margin-bottom: 10px;
         }
-        label {
-          display: block;
-          margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-          font-size: var(--dile-input-label-font-size, 1em);
-          color: var(--dile-input-label-color, #59e);
-          font-weight: var(--dile-input-label-font-weight, normal);
-        }
         #trigger {
           padding: 0;
           width: var(--dile-color-picker-swatch-size, 2em);
@@ -167,7 +161,7 @@ export class DileColorPicker extends DileOverlay(
         #trigger:focus-visible {
           outline: none;
           border-width: var(--dile-color-picker-swatch-focus-border-width, 3px);
-          border-color: var(--dile-input-focus-border-color, #6af);
+          border-color: var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
         }
         #overlay {
           display: none;
@@ -198,7 +192,7 @@ export class DileColorPicker extends DileOverlay(
           cursor: crosshair;
         }
         #sv-square:focus-visible {
-          outline: 2px solid var(--dile-input-focus-border-color, #6af);
+          outline: 2px solid var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
           outline-offset: 2px;
         }
         .sv-thumb {
@@ -288,7 +282,7 @@ export class DileColorPicker extends DileOverlay(
         }
         .hex-input:focus {
           outline: none;
-          border-color: var(--dile-input-focus-border-color, #6af);
+          border-color: var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
         }
         .hex-input.errored {
           border-color: var(--dile-color-picker-error-border-color, #c00);

package/components/drop-file/src/DileDropFile.js

@@ -1,11 +1,13 @@
 import { LitElement, html, css } from 'lit';
 import '../file-preview.js';
 import '../../button/button.js';
+import { labelStyles } from '../../input/src/label-styles.js';
 import { messageStyles } from '../../input/src/message-styles.js';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 
 export class DileDropFile extends DileEmmitChange(LitElement) {
   static styles = [
+    labelStyles,
     messageStyles,
     css`
       * { box-sizing: border-box; }
@@ -41,13 +43,6 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
         display: none;
       }
 
-      label {
-        display: block;
-        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-        font-size: var(--dile-input-label-font-size, 1em);
-        color: var(--dile-input-label-color, #59e);
-        font-weight: var(--dile-input-label-font-weight, normal);
-      }
       main {
         width: var(--dile-input-section-width, 100%);
       }

package/components/input/index.js

@@ -5,5 +5,6 @@ export { DileInputMoney } from './src/DileInputMoney.js';
 export { DileInputNumberMask } from './src/DileInputNumberMask.js';
 export { DileInputPercentage } from './src/DileInputPercentage.js';
 export { DileInputSearch } from './src/DileInputSearch.js';
+export { labelStyles } from './src/label-styles.js';
 export { messageStyles } from './src/message-styles.js';
 export { Mask } from './src/Mask.js';

package/components/input/src/DileInput.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
+import { labelStyles } from './label-styles.js';
 import { messageStyles } from './message-styles.js';
 
 export class DileInput extends DileEmmitChange(LitElement) {
@@ -76,7 +77,7 @@ export class DileInput extends DileEmmitChange(LitElement) {
         this.disableAutocomplete = false;
         this.name = '';
         this.type = 'text';
-        this.types = ['text', 'password', 'email', 'number', 'tel', 'url', 'search', 'date', 'time', 'datetime', 'datetime-local', 'month', 'week'];     
+        this.types = ['text', 'password', 'email', 'number', 'tel', 'url', 'search', 'date', 'time', 'datetime', 'datetime-local', 'month', 'week'];
         this.internals = this.attachInternals();
     }
 
@@ -95,6 +96,7 @@ export class DileInput extends DileEmmitChange(LitElement) {
 
     static get styles() {
         return [
+          labelStyles,
           messageStyles,
           css`
             * {
@@ -110,13 +112,6 @@ export class DileInput extends DileEmmitChange(LitElement) {
             main {
               width: var(--dile-input-section-width, 100%);
             }
-            label {
-              display: block;
-              margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-              font-size: var(--dile-input-label-font-size, 1em);
-              color: var(--dile-input-label-color, #59e);
-              font-weight: var(--dile-input-label-font-weight, normal);
-            }
             input {
               box-sizing: border-box;
               border-radius: var(--dile-input-border-radius, 5px);
@@ -131,8 +126,9 @@ export class DileInput extends DileEmmitChange(LitElement) {
               flex-grow: 1;
             }
             input:focus {
-              outline: none;
-              border-color: var(--dile-input-focus-border-color, #6af)
+              outline: var(--dile-input-focus-ring-width, 3px) solid var(--dile-input-focus-ring-color, rgba(102, 170, 255, 0.5));
+              outline-offset: calc(-1 * var(--dile-input-focus-ring-width, 3px));
+              border-color: var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
             }
             input::placeholder {
               color: var(--dile-input-placeholder-color, #ccc);
@@ -152,13 +148,13 @@ export class DileInput extends DileEmmitChange(LitElement) {
             }
             .labelright {
               margin-left: var(--dile-input-label-right-margin-left, 10px);
-              color: var(--dile-input-label-color, #59e);
+              color: var(--dile-input-label-color, var(--dile-on-background-color, #59e));
               font-size: var(--dile-input-label-right-font-size, 1.2em);
             }
           `
         ];
     }
-    
+
     render() {
         return html`
           <main>
@@ -180,8 +176,8 @@ export class DileInput extends DileEmmitChange(LitElement) {
                 @input="${this._input}"
                 @blur="${this.doBlur}"
                 @focus="${this.doFocus}"
-              /> 
-              ${this.labelRight 
+              />
+              ${this.labelRight
                 ? html`<span class="labelright">${this.labelRight}</span>`
                 : ''
               }
@@ -193,7 +189,7 @@ export class DileInput extends DileEmmitChange(LitElement) {
 
     get messageTemplate() {
       return html`
-        ${this.message 
+        ${this.message
           ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
           : ''
         }
@@ -212,10 +208,10 @@ export class DileInput extends DileEmmitChange(LitElement) {
     _input(e) {
         this.value = e.target.value;
         if (this.hideErrorOnInput && this.errored) {
-          this.clearError();  
+          this.clearError();
         }
     }
-    
+
     clearError() {
       this.errored = false;
       this.message = '';
@@ -249,4 +245,4 @@ export class DileInput extends DileEmmitChange(LitElement) {
     focus() {
       this.el.focus();
     }
-}
+}

package/components/input/src/DileInputSearch.js

@@ -18,7 +18,7 @@ export class DileInputSearch extends LitElement {
                 background-color: var(--dile-input-background-color, #fff);
             }
             div:focus-within {
-                border-color: var(--dile-input-focus-border-color, #6af);
+                border-color: var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
             }
             input {
                 flex-grow: 1;

package/components/input/src/label-styles.js

@@ -0,0 +1,11 @@
+import { css } from 'lit';
+
+export const labelStyles = css`
+  label, .label {
+    display: block;
+    margin-bottom: var(--dile-input-label-margin-bottom, 4px);
+    font-size: var(--dile-input-label-font-size, 1em);
+    color: var(--dile-input-label-color, var(--dile-on-background-color, #59e));
+    font-weight: var(--dile-input-label-font-weight, normal);
+  }
+`;

package/components/number-picker/src/DileNumberPicker.js

@@ -1,10 +1,12 @@
 import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 import '../number-picker-element.js';
+import { labelStyles } from '../../input/src/label-styles.js';
 import { messageStyles } from '../../input/src/message-styles.js';
 
 export class DileNumberPicker extends DileEmmitChange(LitElement) {
   static styles = [
+      labelStyles,
       messageStyles,
       css`
       :host {
@@ -14,13 +16,6 @@ export class DileNumberPicker extends DileEmmitChange(LitElement) {
       * {
         box-sizing: border-box;
       }
-      label {
-        display: block;
-        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-        font-size: var(--dile-input-label-font-size, 1em);
-        color: var(--dile-input-label-color, #59e);
-        font-weight: var(--dile-input-label-font-weight, normal);
-      }
   `
   ];
 

package/components/otp-input/src/DileOtpInput.js

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
-import { messageStyles } from '../../input/index.js';
+import { labelStyles, messageStyles } from '../../input/index.js';
 import { sanitizeOtpValue } from '../../../lib/otp/sanitizeOtpValue.js';
 
 export class DileOtpInput extends DileEmmitChange(LitElement) {
@@ -106,6 +106,7 @@ export class DileOtpInput extends DileEmmitChange(LitElement) {
 
   static get styles() {
     return [
+      labelStyles,
       messageStyles,
       css`
         * {
@@ -118,13 +119,6 @@ export class DileOtpInput extends DileEmmitChange(LitElement) {
         main {
           width: var(--dile-otp-input-section-width, auto);
         }
-        label {
-          display: block;
-          margin-bottom: var(--dile-otp-input-label-margin-bottom, 4px);
-          font-size: var(--dile-otp-input-label-font-size, 1em);
-          color: var(--dile-otp-input-label-color, #59e);
-          font-weight: var(--dile-otp-input-label-font-weight, normal);
-        }
         section.for-input {
           display: flex;
           gap: var(--dile-otp-input-gap, 8px);
@@ -143,7 +137,7 @@ export class DileOtpInput extends DileEmmitChange(LitElement) {
         }
         input:focus {
           outline: none;
-          border-color: var(--dile-otp-input-focus-border-color, #6af);
+          border-color: var(--dile-otp-input-focus-border-color, var(--dile-link-color, #6af));
         }
         input:disabled {
           background-color: #f5f5f5;

package/components/radio-group/src/DileRadioGroup.js

@@ -2,21 +2,16 @@ import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 import '../radio.js';
 import '../../input/input-message.js';
+import { labelStyles } from '../../input/index.js';
 
 export class DileRadioGroup extends DileEmmitChange(LitElement) {
   static styles = [
+    labelStyles,
     css`
       :host {
         display: block;
         margin-bottom: 10px;
       }
-      .label {
-        display: block;
-        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-        font-size: var(--dile-input-label-font-size, 1em);
-        color: var(--dile-input-label-color, #59e);
-        font-weight: var(--dile-input-label-font-weight, normal);
-      }
       :host([disabled]) {
         --dile-radio-icon-color: var(--dile-radio-disabled-icon-color, #ccc);
       }

package/components/range/src/DileRange.js

@@ -1,11 +1,14 @@
 import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 import '../../input/input-message.js';
+import { labelStyles } from '../../input/index.js';
 
 export class DileRange extends DileEmmitChange(LitElement) {
 
   static get styles() {
-    return css`
+    return [
+      labelStyles,
+      css`
       :host {
         display: block;
         margin-bottom: 10px;
@@ -15,14 +18,6 @@ export class DileRange extends DileEmmitChange(LitElement) {
         --dile-range-line-color: var(--dile-range-line-errored-color, #c00);
       }
 
-      label {
-        display: block;
-        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-        font-size: var(--dile-input-label-font-size, 1em);
-        color: var(--dile-input-label-color, #59e);
-        font-weight: var(--dile-input-label-font-weight, normal);
-      }
-
       /*********** Baseline, reset styles ***********/
       input[type="range"] {
         -webkit-appearance: none;
@@ -87,7 +82,8 @@ export class DileRange extends DileEmmitChange(LitElement) {
       }
 
 
-    `;
+    `
+    ];
   }
 
   static get formAssociated() {

package/components/select/src/DileSelect.js

@@ -1,10 +1,11 @@
 import { html, css, LitElement } from "lit";
 import { DileEmmitChange } from '../../../mixins/form/index.js';
-import { messageStyles } from '../../input/index.js';
+import { labelStyles, messageStyles } from '../../input/index.js';
 
 export class DileSelect extends DileEmmitChange(LitElement) {
   static get styles() {
     return [
+      labelStyles,
       messageStyles,
       css`
       :host {
@@ -14,13 +15,6 @@ export class DileSelect extends DileEmmitChange(LitElement) {
       * {
         box-sizing: border-box;
       }
-      label {
-        display: block;
-        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-        font-size: var(--dile-input-label-font-size, 1em);
-        color: var(--dile-input-label-color, #59e);
-        font-weight: var(--dile-input-label-font-weight, normal);
-      }
       ::slotted(select) {
         box-sizing: border-box;
         width: var(--dile-input-width, 100%);
@@ -42,9 +36,10 @@ export class DileSelect extends DileEmmitChange(LitElement) {
       ::slotted(select.dark) {
         background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A");
       }
-      ::slotted(select):focus {
-        outline: none;
-        border-color: var(--dile-input-focus-border-color, #6af);
+      :host(:focus-within) ::slotted(select) {
+        outline: var(--dile-input-focus-ring-width, 3px) solid var(--dile-input-focus-ring-color, rgba(102, 170, 255, 0.5));
+        outline-offset: calc(-1 * var(--dile-input-focus-ring-width, 3px));
+        border-color: var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
       }
       ::slotted(select.errored) {
         border-color: var(--dile-input-error-border-color, #c00);

package/components/select/src/DileSelectAjax.js

@@ -3,6 +3,7 @@ import '../../input/input-search.js';
 import '../../spinner/spinner-horizontal.js';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 import '../select.js';
+import { labelStyles } from '../../input/src/label-styles.js';
 import { messageStyles } from '../../input/src/message-styles.js';
 
 
@@ -10,6 +11,7 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
 
   static get styles() {
     return [
+      labelStyles,
       messageStyles,
       css`
       * {
@@ -23,13 +25,6 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
       #result {
           margin-bottom: 0.5rem;
       }
-      label {
-        display: block;
-        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-        font-size: var(--dile-input-label-font-size, 1em);
-        color: var(--dile-input-label-color, #59e);
-        font-weight: var(--dile-input-label-font-weight, normal);
-      }
       .anchor {
         margin-top: 0.5rem;
         position: relative;

package/components/textarea/src/DileTextarea.js

@@ -1,23 +1,18 @@
 import { LitElement, html, css } from 'lit';
-import { messageStyles } from '../../input/index.js';
+import { labelStyles, messageStyles } from '../../input/index.js';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 
 export class DileTextarea extends DileEmmitChange(LitElement) {
 
   static get styles() {
     return [
-      messageStyles, 
+      labelStyles,
+      messageStyles,
       css`
       :host {
         display: block;
         margin-bottom: 10px;
       }
-      label {
-        margin-bottom: var(--dile-textarea-label-margin-bottom, 4px);
-        color: var(--dile-textarea-label-color, #59e);
-        font-size: var(--dile-textarea-label-font-size, 1em);
-        font-weight: var(--dile-textarea-label-font-weight, normal);
-      }
 
       textarea {
         border: var(--dile-textarea-border, 1px solid #888);
@@ -32,6 +27,12 @@ export class DileTextarea extends DileEmmitChange(LitElement) {
         line-height: 1.5rem;
       }
 
+      textarea:focus {
+        outline: var(--dile-input-focus-ring-width, 3px) solid var(--dile-input-focus-ring-color, rgba(102, 170, 255, 0.5));
+        outline-offset: calc(-1 * var(--dile-input-focus-ring-width, 3px));
+        border-color: var(--dile-input-focus-border-color, var(--dile-link-color, #6af));
+      }
+
       textarea::placeholder {
         color: var(--dile-textarea-placeholder-color, #999);
       }

package/components/time-picker/src/DileTimePicker.js

@@ -1,23 +1,18 @@
 import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 import '../../number-picker/number-picker-element.js';
+import { labelStyles } from '../../input/src/label-styles.js';
 import { messageStyles } from '../../input/src/message-styles.js';
 
 export class DileTimePicker extends DileEmmitChange(LitElement) {
   static styles = [
+    labelStyles,
     messageStyles,
     css`
       :host {
         display: block;
         margin-bottom: 10px;
       }
-      label {
-        display: block;
-        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
-        font-size: var(--dile-input-label-font-size, 1em);
-        color: var(--dile-input-label-color, #59e);
-        font-weight: var(--dile-input-label-font-weight, normal);
-      }
       section {
         display: flex;
         gap: 0.5rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.28.0",
+  "version": "3.0.1",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -27,5 +27,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d90ac8ac1b524d3591fc65ac57a6156131a940bb"
+  "gitHead": "46b1b4d084b5e7d6433f41928f195ff11df59af3"
 }