@aquera/nile-elements 0.1.40-beta-2.2 → 0.1.40-beta-2.5

package/package.json

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

package/src/nile-icon/icons/svg/index.ts

@@ -294,6 +294,7 @@ export { default as ngdropdown } from './ng-dropdown';
 export { default as ngedit02 } from './ng-edit-02';
 export { default as ngedit05 } from './ng-edit-05';
 export { default as ngexpand06 } from './ng-expand-06';
+export { default as ngfile02 } from './ng-file-02';
 export { default as ngfilecheck02 } from './ng-file-check-02';
 export { default as ngfilequestion03 } from './ng-file-question-03';
 export { default as ngfilterlines } from './ng-filter-lines';

package/src/nile-icon/icons/svg/ng-file-02.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuNjY2NyA5LjE2NjVINi42NjY3MU04LjMzMzM3IDEyLjQ5OThINi42NjY3MU0xMy4zMzM0IDUuODMzMTdINi42NjY3MU0xNi42NjY3IDUuNjY2NVYxNC4zMzMyQzE2LjY2NjcgMTUuNzMzMyAxNi42NjY3IDE2LjQzMzQgMTYuMzk0MiAxNi45NjgxQzE2LjE1NDUgMTcuNDM4NiAxNS43NzIxIDE3LjgyMSAxNS4zMDE3IDE4LjA2MDdDMTQuNzY2OSAxOC4zMzMyIDE0LjA2NjggMTguMzMzMiAxMi42NjY3IDE4LjMzMzJINy4zMzMzN0M1LjkzMzI0IDE4LjMzMzIgNS4yMzMxOCAxOC4zMzMyIDQuNjk4NCAxOC4wNjA3QzQuMjI3OTkgMTcuODIxIDMuODQ1NTQgMTcuNDM4NiAzLjYwNTg2IDE2Ljk2ODFDMy4zMzMzNyAxNi40MzM0IDMuMzMzMzcgMTUuNzMzMyAzLjMzMzM3IDE0LjMzMzJWNS42NjY1QzMuMzMzMzcgNC4yNjYzNyAzLjMzMzM3IDMuNTY2MzEgMy42MDU4NiAzLjAzMTUzQzMuODQ1NTQgMi41NjExMiA0LjIyNzk5IDIuMTc4NjcgNC42OTg0IDEuOTM4OTlDNS4yMzMxOCAxLjY2NjUgNS45MzMyNCAxLjY2NjUgNy4zMzMzNyAxLjY2NjVIMTIuNjY2N0MxNC4wNjY4IDEuNjY2NSAxNC43NjY5IDEuNjY2NSAxNS4zMDE3IDEuOTM4OTlDMTUuNzcyMSAyLjE3ODY3IDE2LjE1NDUgMi41NjExMiAxNi4zOTQyIDMuMDMxNTNDMTYuNjY2NyAzLjU2NjMxIDE2LjY2NjcgNC4yNjYzNyAxNi42NjY3IDUuNjY2NVoiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=";

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

@@ -118,7 +118,7 @@ export const styles = css`
     overflow: hidden;
     cursor: text;
     transition: 150ms color, 150ms border, 150ms box-shadow,
-      150ms background-color;
+      150ms background-color, 150ms outline;
     box-sizing: border-box;
     color: var(--nile-colors-dark-900);
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
@@ -151,6 +151,11 @@ export const styles = css`
     padding: 0px !important;
   }
 
+  .input--standard.input--error:hover:not(.input--disabled) {
+    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));
+    outline: var(--nile-outline-none, var(--ng-colors-border-error));
+  }
+
   .input--standard.input--focused:not(.input--disabled) {
     background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border-color: var(--nile-colors-primary-500, var(--ng-colors-border-brand));
@@ -158,6 +163,27 @@ export const styles = css`
     outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));
   }
 
+  .input--standard.input--focused.input--warning:not(.input--disabled) {
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-warning));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));
+    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-warning));
+  }
+
+  .input--standard.input--focused.input--success:not(.input--disabled) {
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-success));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));
+    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-success));
+  }
+  
+  .input--standard.input--focused.input--error:not(.input--disabled) {
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-color: var(--nile-colors-primary-500, var(--ng-colors-border-error));
+    box-shadow: var(--nile-input-shadow-standard-focused-not-disabled, var(--ng-box-shadow-2));
+    outline: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-outline-none, var(--ng-colors-border-error));
+  }
+
   .input--standard.input--focused:not(.input--disabled) .input__control {
     color: var(--nile-colors-primary-900);
   }
@@ -175,24 +201,19 @@ export const styles = css`
   }
 
   .input--standard.input--disabled .input__control::placeholder {
-    color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-placeholder));
+    color: var(--nile-input-standard-disabled-placeholder-font-color, var(--ng-colors-text-disabled));
   }
 
   .input--standard.input--warning {
-    border-color: var(--nile-colors-yellow-500);
+    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning-subtle));
   }
 
   .input--standard.input--error {
     border-color: var(--nile-colors-red-500, var(--ng-colors-border-error-subtle));
   }
 
-  .input--standard.input--error:hover:not(.input--disabled) {
-    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));
-    outline: var(--nile-outline-none, var(--ng-colors-border-error));
-  }
-
   .input--standard.input--success {
-    border-color: var(--nile-colors-green-500);
+    border-color: var(--nile-colors-green-500, var(--ng-colors-border-success-subtle));
   }
 
   .input--standard.input--destructive {
@@ -346,7 +367,7 @@ export const styles = css`
 
   .input--small .input__control {
     height: calc(1.875rem);
-    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-10px, var(--ng-spacing-lg));
   }
 
   .input--small .input__clear {

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

@@ -131,7 +131,7 @@ export const styles = css`
     display: inline-block;
     color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
     line-height: var(--nile-type-scale-3, var(--ng-line-height-text-sm));
-    margin-inline-start: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));
     user-select: none;
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
     margin-top: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
@@ -139,6 +139,6 @@ export const styles = css`
   .radio__label_border {
     padding: var(--nile-spacing-lg, var(--ng-spacing-xl));
     border-radius: var(--nile-radius-sm, var(--ng-radius-xl));
-    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
 `;

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

@@ -11,23 +11,23 @@ export default css`
 
   .form-control--inline-radio ::slotted(nile-radio) {
     display: inline-block;
-    margin-right: var(--nile-spacing-2xl);
+    margin-right: var(--nile-spacing-3-xl, var(--ng-spacing-3xl));
   }
 
   .form-control {
     border: none;
-    padding: var(--nile-spacing-none);
-    margin: var(--nile-spacing-none);
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
   }
 
   .form-control__label {
-    padding: var(--nile-spacing-none);
-    font-size: var(--nile-type-scale-3);
-    color: var(--nile-colors-dark-900);
-    font-family: var(--nile-font-family-serif);
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-xsmall);
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-xs));
     letter-spacing: 0.2px;
   }
 
@@ -40,7 +40,7 @@ export default css`
     position: absolute;
     width: 1px;
     height: 1px;
-    padding: var(--nile-spacing-none);
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);