npm - @aquera/nile-elements - Versions diffs - 0.1.59 → 0.1.60-beta-1.0 - Mend

@aquera/nile-elements 0.1.59 → 0.1.60-beta-1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1598) hide show

package/dist/src/nile-calendar/nile-calendar.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgSxB,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';\n\n/\n DatePicker CSS\n /\nexport const styles = css`\n :host {\n }\n\n .base {\n background-color: white;\n border-radius: 8px;\n width: 300px;\n box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);\n box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100);\n }\n\n .calendar-container {\n font-family: var(--nile-font-family-serif);\n width: 100%;\n height: auto;\n text-align: center;\n background: white;\n border-radius: 8px;\n }\n\n .calendar-wrapper {\n background: white;\n display: flex;\n justify-content: space-between;\n width: 100%;\n border-radius: 8px;\n }\n\n .calendar-header {\n display: flex;\n justify-content: space-between;\n padding: 10px;\n padding: 22px 20px;\n font-size: 14px;\n font-weight: 600;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .calendar-header__month-navigation {\n cursor: pointer;\n }\n\n / Date CSS_START /\n\n .days_container {\n\t\tdisplay: grid;\n padding: 0 12px 12px 12px;\n\t\tgrid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n\t\tgrid-row-gap: var(--nile-spacing-spacing-xs, 3px);\n }\n\n .day_date ,.day_name{\n\t\tfont-family: var( --nile-font-family-serif);\n\t\tfont-style: normal;\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\ttext-align: center;\n\n\t\t/ width: 40px;\n\t\theight: 30px; /\n\t\tpadding: 5px 8px;\n\t\tdisplay:grid;\n\t\tplace-items:center;\n }\n\n .day_name{\n font-weight:500;\n }\n\n .day_date{\n font-weight:400;\n user-select:none;\n }\n\n\t.current__date__dot{\n\t\tbackground-color:white;\n\t\tposition:absolute;\n\t\tborder-radius:50%;\n\t\theight:5px;\n\t\twidth:5px;\n\t\tleft:25%;\n\t\ttop:90%;\n\t}\n\n .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot{\n\t\tbackground-color:var(--nile-colors-primary-600);\n }\n\n\n .day_date:hover {\n background-color: var(--nile-colors-neutral-100);\n }\n\n .filler {\n color: var(--nile-colors-dark-500);\n pointer-events: none;\n }\n\n .selected-date {\n color: white;\n border-radius: 4px;\n background: var(--nile-colors-primary-600);\n }\n\n .selected-date:hover {\n background: var(--nile-colors-primary-600);\n }\n\n .selected-date,\n .range-start,\n .range-end {\n border-radius: 4px;\n background: var(--nile-colors-primary-600);\n color: white;\n }\n\n .selected-date:hover,\n .range-start:hover,\n .range-end:hover,\n .day_date.in-range:hover {\n background: var(--nile-colors-primary-700);\n }\n\n .range-start.in-range {\n background: var(--nile-colors-primary-600);\n border-radius: 4px 0 0 4px;\n color: white;\n }\n\n .range-end {\n background: var(--nile-colors-primary-600);\n border-radius: 0 4px 4px 0;\n color: white;\n }\n\n .range-middle {\n background: var(--nile-colors-primary-600);\n color: white;\n border-radius: 0;\n }\n\n .day_date.selected {\n background: var(--nile-colors-primary-600);\n color: white;\n border-radius: 4px;\n }\n\n .day_date.in-range:not(.range-start,.range-end, .selected-date) {\n background: var(--nile-colors-neutral-400);\n }\n\n .selected-date {\n color: white;\n border-radius: 4px;\n background: var(--nile-colors-primary-600);\n }\n\n .not-allowed{\n color: var(--nile-colors-dark-500);\n pointer-events: none;\n }\n\n / Date CSS_END */\n\n .calender-input {\n box-sizing:border-box;\n padding: 0 16px;\n width:100%;\n justify-content: space-between;\n display: flex;\n gap:8px;\n flex-wrap: wrap;\n }\n\n .from {\n display: flex;\n justify-content: space-between;\n gap: 8px;\n width: auto;\n }\n\n .manual-input-label {\n color: var(--nile-colors-dark-500);\n font-family: Colfax-regular;\n font-size: 12px;\n font-weight: 500;\n line-height: 12px;\n letter-spacing: 0.2px;\n }\n\n .button-container {\n width: 100%;\n display:flex;\n justify-content: end;\n gap:10px;\n padding: 12px 16px 16px 16px;\n box-sizing: border-box;\n }\n\n .calendar-config {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .calendar-switcher {\n width: 100%;\n margin: 0 12px;\n margin-top: 16px;\n }\n\n .units-wrapper{\n width:min-content;\n margin:auto;\n }\n\n .unit-container{\n display:grid;\n grid-template-columns: auto auto;\n row-gap:var(--nile-spacing-spacing-2xl);\n column-gap: var(--nile-spacing-spacing-sm);\n padding: 16px;\n padding-bottom: 0;\n }\n \n .duration-name{\n display:flex;\n align-items:center;\n font-family: var( --nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px; \n }\n \n .duration-units{\n display:flex;\n font-family: var( --nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n }\n\n .duration__value{\n display: grid;\n place-items:center;\n width: 34px;\n height: 34px;\n cursor: pointer;\n border-radius: 4px;\n }\n\n .duration__value:hover{\n background: var(--nile-colors-neutral-100);\n }\n\n .duration__value--selected{\n background-color:var(--nile-colors-primary-600);\n color: white;\n }\n\n .duration__value--selected:hover{\n background:var(--nile-colors-primary-700);\n }\n\n nile-input::part(input)::-webkit-inner-spin-button,\n nile-input::part(input)::-webkit-outer-spin-button {\n -webkit-appearance: none;\n }\n\n .hidden {\n display: none !important;\n }\n\n .unit-input-container {\n display: flex;\n justify-content: space-between;\n gap: 8px;\n padding: 0 16px;\n padding-top: 16px;\n }\n\n .duration-input,.time-input,.manual-input {\n width: 125px;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiSxB,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';\n\n/\n DatePicker CSS\n /\nexport const styles = css`\n\n .base {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n width: 300px;\n box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);\n box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100, var(--ng-colors-effects-shadow-xl-01));\n border: var(--nile-spacing-spacing-none, 1px solid var(--ng-colors-border-secondary-alt));\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n .calendar-container {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n width: 100%;\n height: auto;\n text-align: center;\n background: white;\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n }\n\n .calendar-wrapper {\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n display: flex;\n justify-content: space-between;\n width: 100%;\n border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n }\n\n .calendar-header {\n display: flex;\n justify-content: space-between;\n padding: var(--nile-spacing-22px, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .calendar-header__month-navigation {\n cursor: pointer;\n }\n\n / Date CSS_START /\n\n .days_container {\n\t\tdisplay: grid;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n\t\tgrid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n\t\tgrid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n .day_date ,.day_name{\n\t\tfont-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n\t\tfont-style: normal;\n\t\tfont-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\t\tline-height: var(--nile-line-height-20px, var(--ng-line-height-text-sm));\n\t\ttext-align: center;\n\n\t\t/ width: 40px;\n\t\theight: 30px; /\n\t\tpadding: 5px 8px;\n\t\tdisplay:grid;\n\t\tplace-items:center;\n }\n\n .day_name{\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n }\n\n .day_date{\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n user-select:none;\n }\n\n\t.current__date__dot{\n\t\tbackground-color:white;\n\t\tposition:absolute;\n\t\tborder-radius:50%;\n\t\theight:5px;\n\t\twidth:5px;\n\t\tleft:25%;\n\t\ttop:90%;\n\t}\n\n .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot{\n\t\tbackground-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n\n .day_date:hover {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));\n }\n\n .filler {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n .selected-date {\n color: white;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .selected-date:hover {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .selected-date,\n .range-start,\n .range-end {\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: white;\n }\n\n .selected-date:hover,\n .range-start:hover,\n .range-end:hover,\n .day_date.in-range:hover {\n background: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n }\n\n .range-start.in-range {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .range-end {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n .range-middle {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n }\n\n .day_date.selected {\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .day_date.in-range:not(.range-start,.range-end, .selected-date) {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-active));\n }\n\n .selected-date {\n color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n }\n\n .not-allowed{\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n / Date CSS_END */\n\n .calender-input {\n box-sizing:border-box;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n width:100%;\n justify-content: space-between;\n display: flex;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n flex-wrap: wrap;\n }\n\n .from {\n display: flex;\n justify-content: space-between;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n width: auto;\n }\n\n .manual-input-label {\n color: var(--nile-colors-dark-500);\n font-family: Colfax-regular;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: 12px;\n letter-spacing: 0.2px;\n } \n\n .button-container {\n width: 100%;\n display:flex;\n justify-content: end;\n gap: var(--nile-spacing-10px, var(--ng-spacing-lg));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));\n box-sizing: border-box;\n }\n\n .calendar-config {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .calendar-switcher {\n width: 100%;\n margin: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .units-wrapper{\n width:min-content;\n margin:auto;\n }\n\n .unit-container{\n display:grid;\n grid-template-columns: auto auto;\n row-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-2xl));\n column-gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-sm));\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n padding-bottom: var(--nile-spacing-none, var(--ng-spacing-none));\n }\n\n .duration-name{\n display:flex;\n align-items:center;\n font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm)); \n }\n \n .duration-units{\n display:flex;\n font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n }\n\n .duration__value{\n display: grid;\n place-items:center;\n width: 34px;\n height: 34px;\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .duration__value:hover{\n background: var(--nile-colors-neutral-100);\n }\n\n .duration__value--selected{\n background-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .duration__value--selected:hover{\n background:var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n }\n\n nile-input::part(input)::-webkit-inner-spin-button,\n nile-input::part(input)::-webkit-outer-spin-button {\n -webkit-appearance: none;\n }\n\n .hidden {\n display: none !important;\n }\n\n .unit-input-container {\n display: flex;\n justify-content: space-between;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n padding: var(--nile-spacing-none, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n padding-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .duration-input,.time-input,.manual-input {\n width: 125px;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-card/nile-card.css.js CHANGED Viewed

@@ -11,6 +11,9 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     box-sizing: border-box;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
   :host *,
@@ -24,34 +27,35 @@ export const styles = css `
   }
   :host {
-    --border-color: var(--nile-card-color-border);
-    --border-radius: 8px;
-    --border-width: 0.5px;
-    --padding: 18px;
+    --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));
+    --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));
+    --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
     display: inline-block;
   }
   .card {
     display: flex;
     flex-direction: column;
-    justify-items: strecth;
-    background-color: var(--nile-colors-white-base);
-    outline: solid var(--border-width) var(--border-color);
+    justify-items: stretch;
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    outline: solid var(--nile-outline-0-5px) var(--border-color);
+    border: solid  var(--ng-outline-1px) var(--border-color);
     border-radius: var(--border-radius);
     min-width: 273px;
     max-width: 350px;
     overflow: hidden;
+    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));
   }
   .body__wrapper {
     display: flex;
     flex-direction: column;
-    gap: 12px;
-    padding: 12px 16px 0 16px;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
   .body__wrapper_nf {
-    padding: 12px 16px 16px 16px;
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
   .card__header {
     display: block;
@@ -62,25 +66,68 @@ export const styles = css `
   }
   .card__footer {
-    margin-top: 12px;
+    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));
     display: block;
     box-sizing: border-box;
     align-content: center;
     align-items: center;
-    padding: 8px 16px;
-    background-color: var(--nile-colors-neutral-100);
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
+    border-top: var(--nile-border-style-none, 1px solid var(--ng-colors-border-secondary));
     height: 40px;
   }
-  .card:not(.card--has-footer) .card__footer {
+.card:active {
+  border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);
+  background: var(--ng-colors-bg-brand-primary);
+  box-shadow: var(--ng-shadow-xs);
+}
+.card:active .card__footer {
+  background: var(--ng-colors-bg-brand-primary);
+  box-shadow: var(--ng-shadow-xs);
+}
+.card:not(.card--has-footer) .card__footer {
     display: none;
   }
-  .card:hover {
-    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
-      0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-    outline: solid 1px var(--border-color);
-  }
+.card--active {
+  border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);
+  background: var(--ng-colors-bg-brand-primary);
+  box-shadow: var(--ng-shadow-xs);
+}
+.card--active .card__footer {
+  background: var(--ng-colors-bg-brand-primary);
+  box-shadow: var(--ng-shadow-xs);
+}
+.card:not(.card--active):not(:active):hover {
+  box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));
+  outline: solid 1px var(--border-color);
+  background-color: var(--ng-colors-bg-primary-hover);
+}
+.card:not(.card--active):not(:active):hover .card__footer {
+  background-color: var(--ng-colors-bg-primary-hover);
+  box-shadow: var(--ng-shadow-sm);
+}
+.card--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.card--disabled .card__footer {
+  pointer-events: none;
+}
 `;
 export default [styles];
 //# sourceMappingURL=nile-card.css.js.map

package/dist/src/nile-card/nile-card.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-card.css.js","sourceRoot":"","sources":["../../../src/nile-card/nile-card.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyExB~~,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';\n\n/\n Card 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 --border-color: var(--nile-card-color-border);\n --border-radius: ~~8px;\n~~ --~~border~~-~~width:~~ ~~0.5px~~;\n --padding: ~~18px~~;\n display: inline-block;\n }\n\n .card {\n display: flex;\n flex-direction: column;\n justify-items: ~~strecth~~;\n background-color: var(--nile-colors-white-base);\n outline: solid var(--border-~~width~~) var(--border-color);\n border-radius: var(--border-radius);\n min-width: 273px;\n max-width: 350px;\n overflow: hidden;\n }\n\n .body__wrapper {\n display: flex;\n flex-direction: column;\n gap: ~~12px~~;\n padding: ~~12px~~ ~~16px~~ 0 ~~16px~~;\n }\n\n .body__wrapper_nf {\n padding: ~~12px~~ ~~16px~~ ~~16px~~ ~~16px~~;\n }\n .card__header {\n display: block;\n }\n\n .card__body {\n display: block;\n }\n\n .card__footer {\n margin-top: ~~12px~~;\n display: block;\n box-sizing: border-box;\n align-content: center;\n align-items: center;\n padding: ~~8px~~ ~~16px~~;\n background-color: var(--nile-colors-neutral-100);\n height: 40px;\n }\n\n .card:not(.card--has-footer) .card__footer {\n display: none;\n }\n\n .card~~:hover~~ {\n ~~box-shadow~~: ~~0px~~ ~~4px~~ ~~8px~~ -~~2px~~ ~~rgba~~(~~16,~~ ~~24,~~ ~~40,~~ ~~0.1~~),\n ~~0px~~ ~~2px~~ ~~4px~~ -~~2px~~ ~~rgba~~(16, ~~24, 40, 0.06~~);\n outline: solid 1px var(--border-color);\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-card.css.js","sourceRoot":"","sources":["../../../src/nile-card/nile-card.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwHxB,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';\n\n/\n Card CSS\n /\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\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 --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));\n --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));\n --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n display: inline-block;\n }\n\n .card {\n display: flex;\n flex-direction: column;\n justify-items: stretch;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n outline: solid var(--nile-outline-0-5px) var(--border-color);\n border: solid var(--ng-outline-1px) var(--border-color);\n border-radius: var(--border-radius);\n min-width: 273px;\n max-width: 350px;\n overflow: hidden;\n box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n }\n\n .body__wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .body__wrapper_nf {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n .card__header {\n display: block;\n }\n\n .card__body {\n display: block;\n }\n\n .card__footer {\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n display: block;\n box-sizing: border-box;\n align-content: center;\n align-items: center;\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n border-top: var(--nile-border-style-none, 1px solid var(--ng-colors-border-secondary));\n height: 40px;\n }\n\n \n.card:active {\n border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n} \n\n \n.card:active .card__footer {\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n\n.card:not(.card--has-footer) .card__footer {\n display: none;\n }\n\n.card--active {\n border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n.card--active .card__footer {\n background: var(--ng-colors-bg-brand-primary);\n box-shadow: var(--ng-shadow-xs);\n}\n\n \n.card:not(.card--active):not(:active):hover {\n box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));\n outline: solid 1px var(--border-color);\n background-color: var(--ng-colors-bg-primary-hover);\n}\n\n.card:not(.card--active):not(:active):hover .card__footer {\n background-color: var(--ng-colors-bg-primary-hover);\n box-shadow: var(--ng-shadow-sm);\n}\n\n \n.card--disabled {\n pointer-events: none;\n opacity: 0.5;\n}\n\n.card--disabled .card__footer {\n pointer-events: none;\n}\n\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-card/nile-card.d.ts CHANGED Viewed

@@ -16,6 +16,8 @@ import { CSSResultGroup } from 'lit';
 export declare class NileCard extends NileElements {
     static styles: CSSResultGroup;
     private readonly hasSlotController;
+    active: boolean;
+    disabled: boolean;
     render(): TemplateResult<1>;
 }
 export default NileCard;

package/dist/src/nile-card/nile-card.js CHANGED Viewed

@@ -6,7 +6,7 @@
  */
 import { __decorate } from "tslib";
 import { html, } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-card.css';
 import { classMap } from 'lit/directives/class-map.js';
 import { HasSlotController } from '../internal/slot';
@@ -21,6 +21,8 @@ let NileCard = class NileCard extends NileElements {
     constructor() {
         super(...arguments);
         this.hasSlotController = new HasSlotController(this, 'footer');
+        this.active = false;
+        this.disabled = false;
     }
     render() {
         return html `
@@ -29,6 +31,8 @@ let NileCard = class NileCard extends NileElements {
         class=${classMap({
             card: true,
             'card--has-footer': this.hasSlotController.test('footer'),
+            'card--active': this.active,
+            'card--disabled': this.disabled,
         })}
       >
         <div class="body__wrapper" part="body__wrapper"
@@ -52,6 +56,12 @@ let NileCard = class NileCard extends NileElements {
     }
 };
 NileCard.styles = styles;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileCard.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileCard.prototype, "disabled", void 0);
 NileCard = __decorate([
     customElement('nile-card')
 ], NileCard);

package/dist/src/nile-card/nile-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-card.js","sourceRoot":"","sources":["../../../src/nile-card/nile-card.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,~~EAAY~~,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAGpD;;;;;GAKG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QAGY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;~~IA8B7E~~,CAAC;~~IA5BC~~,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,IAAI,EAAE,IAAI;YACV,kBAAkB,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;~~SAC1D~~,CAAC;;;gBAGM,QAAQ,CAAC;YACf,eAAe,EAAC,IAAI;YACpB,kBAAkB,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC3D,CAAC;;;;;;;;;qBASW,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;KAItD,CAAC;IACJ,CAAC;;~~AA/BM~~,eAAM,GAAmB,MAAM,AAAzB,CAA0B;~~AAD5B~~,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,~~CAiCpB~~;;AAED,eAAe,QAAQ,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 {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-card.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElements from '../internal/nile-element';\nimport { CSSResultGroup } from 'lit';\n\n/\n Nile icon component.\n \n @tag nile-card\n \n /\n@customElement('nile-card')\nexport class NileCard extends NileElements {\n static styles: CSSResultGroup = styles;\n\n private readonly hasSlotController = new HasSlotController(this, 'footer');\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n card: true,\n 'card--has-footer': this.hasSlotController.test('footer'),\n })}\n >\n <div class=\"body__wrapper\" part=\"body__wrapper\"\n class=${classMap({\n 'body__wrapper':true,\n 'body__wrapper_nf': !this.hasSlotController.test('footer')\n })}\n >\n <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n <slot part=\"body\" class=\"card__body\"></slot>\n </div>\n\n <slot\n name=\"footer\"\n part=\"footer\"\n ?hidden=\"${!this.hasSlotController.test('footer')}\"\n class=\"card__footer\"\n ></slot>\n </div>\n `;\n }\n}\n\nexport default NileCard;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-card': NileCard;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-card.js","sourceRoot":"","sources":["../../../src/nile-card/nile-card.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAGpD;;;;;GAKG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QAGY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAEhC,WAAM,GAAG,KAAK,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;IAgC/D,CAAC;IA9BC,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,IAAI,EAAE,IAAI;YACV,kBAAkB,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;YACzD,cAAc,EAAE,IAAI,CAAC,MAAM;YAC3B,gBAAgB,EAAE,IAAI,CAAC,QAAQ;SAChC,CAAC;;;gBAGM,QAAQ,CAAC;YACf,eAAe,EAAC,IAAI;YACpB,kBAAkB,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC3D,CAAC;;;;;;;;;qBASW,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;KAItD,CAAC;IACJ,CAAC;;AApCM,eAAM,GAAmB,MAAM,AAAzB,CAA0B;AAII;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAe;AACd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AANlD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAsCpB;;AAED,eAAe,QAAQ,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 {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-card.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElements from '../internal/nile-element';\nimport { CSSResultGroup } from 'lit';\n\n/\n Nile icon component.\n \n @tag nile-card\n \n /\n@customElement('nile-card')\nexport class NileCard extends NileElements {\n static styles: CSSResultGroup = styles;\n\n private readonly hasSlotController = new HasSlotController(this, 'footer');\n\n @property({ type: Boolean, reflect: true })active = false;\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n render() {\n return html`\n <div\n part=\"base\"\n class=${classMap({\n card: true,\n 'card--has-footer': this.hasSlotController.test('footer'),\n 'card--active': this.active,\n 'card--disabled': this.disabled,\n })}\n >\n <div class=\"body__wrapper\" part=\"body__wrapper\"\n class=${classMap({\n 'body__wrapper':true,\n 'body__wrapper_nf': !this.hasSlotController.test('footer')\n })}\n >\n <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n <slot part=\"body\" class=\"card__body\"></slot>\n </div>\n\n <slot\n name=\"footer\"\n part=\"footer\"\n ?hidden=\"${!this.hasSlotController.test('footer')}\"\n class=\"card__footer\"\n ></slot>\n </div>\n `;\n }\n}\n\nexport default NileCard;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-card': NileCard;\n }\n}\n"]}

package/dist/src/nile-checkbox/nile-checkbox.css.js CHANGED Viewed

@@ -11,44 +11,53 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: inline-block;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
   :host(.full-width) {
     width: 100%;
   }
   .checkbox {
     position: relative;
     display: inline-flex;
-    align-items: top;
-    font-weight: 400;
-    color: var(--nile-colors-dark-900);
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
     vertical-align: middle;
     cursor: pointer;
   }
   .checkbox--medium {
-    --toggle-size: var(--nile-type-scale-3);
-    font-size: var(--nile-type-scale-3);
+    --toggle-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
   }
   .checkbox__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-checkbox-color-border-standard);
-    background-color: var(--nile-checkbox-color-background-standard);
-    border-radius: 4px;
+    width: var(--nile-type-scale-3, var(--ng-width-4));
+    height: var(--nile-type-scale-3, var(--ng-height-16px));
+    border: solid 1px
+      var(
+        --nile-checkbox-color-border-standard,
+        var(--ng-colors-border-primary)
+      );
+    background-color: var(
+      --nile-checkbox-color-background-standard,
+      var(--ng-colors-bg-primary)
+    );
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
     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;
@@ -56,19 +65,32 @@ export const styles = css `
     margin: 0;
     pointer-events: none;
   }
   /* svg {
       display:none !important;
   } */
   /* Hover */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(
+      .checkbox--indeterminate
+    )
     .checkbox__control:hover {
-    background: var(--nile-checkbox-color-background-hover);
-    border: 1px solid var(--nile-checkbox-color-border-hover);
-    border-radius: 4px;
+    background: var(
+      --nile-checkbox-color-background-hover,
+      var(--ng-colors-bg-primary)
+    );
+    border: 1px solid
+      var(--nile-checkbox-color-border-hover, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
+  }
+  /* Disabled */
+  .checkbox--disabled {
+    opacity: var(--nile-opacity-30, var(--ng-opacity-100));
+    cursor: not-allowed;
   }
   /* Focus */
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
     .checkbox__input:focus-visible
@@ -76,71 +98,111 @@ 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);
-  }
+    border-color: var(
+      --nile-checkbox-color-border-checked-standard,
+      var(--ng-colors-bg-brand-solid)
+    );
+    background-color: var(
+      --nile-checkbox-color-background-checked-standard,
+      var(--ng-colors-bg-brand-solid)
+    );
+  }
   /* Checked/indeterminate + hover */
   .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
     .checkbox__control:hover {
-    background: var(--nile-checkbox-color-background-checked-hover);
-    border: 1px solid var(--nile-checkbox-color-border-checked-hover);
-  }
+    background: var(
+      --nile-checkbox-color-background-checked-hover,
+      var(--ng-colors-bg-brand-solid)
+    );
+    /* border: 1px solid var(--nile-checkbox-color-border-checked-hover),
+      var(--ng-colors-border-border-disabled); */
+    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
+  }
+  /* .checkbox.checkbox--indeterminate .checkbox_control:hover {
+    border: none;
+  } */
   /* Checked/indeterminate + focus */
-  .checkbox.checkbox--checked:not(.checkbox--disabled)
-    .checkbox__input:focus-visible
-    ~ .checkbox__control,
-  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
-    .checkbox__input:focus-visible
-    ~ .checkbox__control {
-    outline: solid 3px var(--nile-checkbox-color-outline-standard);
-    outline-offset: 1px;
-  }
-  /* Disabled */
-  .checkbox--disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
+  .checkbox--disabled .checkbox__control {
+    background-color: var(
+      --nile-checkbox-color-border-checked-standard,
+      var(--ng-colors-bg-disabled-subtle)
+    );
+    border-color: var(
+      --nile-checkbox-color-border-standard,
+      var(--ng-colors-border-disabled)
+    );
+  }
+.checkbox--disabled.checkbox--checked .checkbox__control,
+.checkbox--disabled.checkbox--indeterminate .checkbox__control {
+  background-color: var(
+    --nile-checkbox-color-background-checked-standard,
+    var(--ng-colors-bg-disabled-subtle)
+  );
+  border-color: var(
+    --nile-checkbox-color-border-checked-standard,
+    var(--ng-colors-border-disabled)
+  );
+}
+.checkbox--disabled:not(.checkbox--checked):not(.checkbox--indeterminate) .checkbox__control {
+  background-color: transparent;
+  border-color: var(
+    --nile-checkbox-color-border-standard,
+    var(--ng-colors-border-disabled)
+  );
+}
   .checkbox__label {
     display: inline-block;
-    line-height: 14px;
-    font-size: 14px;
+    line-height: var(--nile-type-scale-3, var(--ng-line-height-text-sm));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     margin-inline-start: 0.5em;
     user-select: none;
-    margin-top: 2px;
-    color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
+    margin-top: var(--nile-spacing-xxs);
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-style: normal;
-    font-weight: 400;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
     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--disabled .checkbox__checked-icon,
+  .checkbox--disabled .checkbox__indeterminate-icon {
+    --nile-svg-stroke: var(
+       --nile-checkbox-color-border-standard,
+      var(--ng-colors-fg-disabled-subtle)
+    );
+  }
   .checkbox__helptext-icon {
     float: right;
     cursor: pointer;
-    margin-right: 12px;
+    margin-right: var(--nile-spacing-lg);
   }
 `;
 export default [styles];

package/dist/src/nile-checkbox/nile-checkbox.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsIxB~~,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';\n \n/\n Checkbox CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n }\n \n :host(.full-width) {\n width: 100%;\n }\n \n .checkbox {\n position: relative;\n display: inline-flex;\n ~~align~~-~~items~~: ~~top;\n~~ font-weight: ~~400~~;\n color: var(--nile-colors-dark-900);\n vertical-align: middle;\n cursor: pointer;\n }\n \n .checkbox--medium {\n --toggle-size: var(--nile-type-scale-3);\n font-size: var(--nile-type-scale-3);\n }\n \n .checkbox__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-checkbox-color-border-standard);\n background-color: var(--nile-checkbox-color-background-standard);\n border-radius: ~~4px~~;\n transition: var(--nile-transition-duration-default border-color),\n var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default box-shadow);\n }\n \n .checkbox__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n \n / svg {\n display:none !important;\n } /\n \n / Hover /\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-checkbox-color-background-hover);\n border: 1px solid var(--nile-checkbox-color-border-hover);\n border-radius: ~~4px~~;\n }\n \n / Focus /\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n outline-offset: 1px;\n }\n \n / Checked/indeterminate /\n .checkbox--checked .checkbox__control,\n .checkbox--indeterminate .checkbox__control {\n border-color: var(--nile-checkbox-color-border-checked-standard);\n background-color: var(--nile-checkbox-color-background-checked-standard);\n }\n \n / Checked/indeterminate + hover /\n .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(--nile-checkbox-color-background-checked-hover);\n border: 1px solid var(--nile-checkbox-color-border-checked-hover);\n }\n \n / Checked/indeterminate + focus /\n .checkbox.checkbox--checked~~:not~~(~~.checkbox~~--disabled)\n ~~.checkbox__input~~:~~focus~~-~~visible~~\n ~ ~~.checkbox__control,\~~n .checkbox.checkbox--~~indeterminate:not(~~.checkbox--disabled~~)\n~~ .~~checkbox__input:focus-visible\n ~~~ .checkbox__control {\n ~~outline~~: ~~solid 3px~~ var(--nile-checkbox-color-~~outline~~-standard);\n ~~outline~~-~~offset~~: ~~1px~~;\n }\n \n / ~~Disabled /\~~n .checkbox--disabled {\n ~~opacity~~: ~~0.3~~;\n ~~cursor~~: ~~not~~-~~allowed~~;\n }\n \n \n .checkbox__label {\n display: inline-block;\n line-height: ~~14px~~;\n font-size: ~~14px~~;\n margin-inline-start: 0.5em;\n user-select: none;\n margin-top: ~~2px~~;\n color: var(--nile-colors-dark-900);\n font-family: ~~Colfax~~-~~regular~~;\n font-style: normal;\n font-weight: ~~400~~;\n letter-spacing: 0.2px;\n }\n \n :host([required]) .checkbox__label::after {\n content: '';\n margin-inline-start: -2px;\n }\n \n .checkbox__checked-icon {\n --nile-svg-stroke: white;\n }\n \n .checkbox__indeterminate-icon {\n --nile-svg-stroke: white;\n }\n \n .checkbox__helptext-icon {\n float: right;\n cursor: pointer;\n margin-right: ~~12px~~;\n }\n`;\n \nexport default [styles];"]}
1	+ {"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoMxB,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';\n\n/\n Checkbox CSS\n /\nexport const styles = css`\n :host {\n display: inline-block;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host(.full-width) {\n width: 100%;\n }\n\n .checkbox {\n position: relative;\n display: inline-flex;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n vertical-align: middle;\n cursor: pointer;\n }\n\n .checkbox--medium {\n --toggle-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n .checkbox__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, var(--ng-width-4));\n height: var(--nile-type-scale-3, var(--ng-height-16px));\n border: solid 1px\n var(\n --nile-checkbox-color-border-standard,\n var(--ng-colors-border-primary)\n );\n background-color: var(\n --nile-checkbox-color-background-standard,\n var(--ng-colors-bg-primary)\n );\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n transition: var(--nile-transition-duration-default border-color),\n var(--nile-transition-duration-default) background-color,\n var(--nile-transition-duration-default) color,\n var(--nile-transition-duration-default box-shadow);\n }\n\n .checkbox__input {\n position: absolute;\n opacity: 0;\n padding: 0;\n margin: 0;\n pointer-events: none;\n }\n\n / svg {\n display:none !important;\n } /\n\n / Hover /\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(\n .checkbox--indeterminate\n )\n .checkbox__control:hover {\n background: var(\n --nile-checkbox-color-background-hover,\n var(--ng-colors-bg-primary)\n );\n border: 1px solid\n var(--nile-checkbox-color-border-hover, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\n }\n\n / Disabled /\n .checkbox--disabled {\n opacity: var(--nile-opacity-30, var(--ng-opacity-100));\n cursor: not-allowed;\n }\n\n / Focus /\n .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n .checkbox__input:focus-visible\n ~ .checkbox__control {\n outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n outline-offset: 1px;\n }\n\n / Checked/indeterminate /\n .checkbox--checked .checkbox__control,\n .checkbox--indeterminate .checkbox__control {\n border-color: var(\n --nile-checkbox-color-border-checked-standard,\n var(--ng-colors-bg-brand-solid)\n );\n background-color: var(\n --nile-checkbox-color-background-checked-standard,\n var(--ng-colors-bg-brand-solid)\n );\n }\n\n / Checked/indeterminate + hover /\n .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n .checkbox__control:hover {\n background: var(\n --nile-checkbox-color-background-checked-hover,\n var(--ng-colors-bg-brand-solid)\n );\n / border: 1px solid var(--nile-checkbox-color-border-checked-hover),\n var(--ng-colors-border-border-disabled); /\n box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\n }\n\n / .checkbox.checkbox--indeterminate .checkbox_control:hover {\n border: none;\n } /\n\n / Checked/indeterminate + focus /\n \n\n .checkbox--disabled .checkbox__control {\n background-color: var(\n --nile-checkbox-color-border-checked-standard,\n var(--ng-colors-bg-disabled-subtle)\n );\n border-color: var(\n --nile-checkbox-color-border-standard,\n var(--ng-colors-border-disabled)\n );\n }\n \n.checkbox--disabled.checkbox--checked .checkbox__control,\n.checkbox--disabled.checkbox--indeterminate .checkbox__control {\n background-color: var(\n --nile-checkbox-color-background-checked-standard,\n var(--ng-colors-bg-disabled-subtle)\n );\n border-color: var(\n --nile-checkbox-color-border-checked-standard,\n var(--ng-colors-border-disabled)\n );\n}\n\n \n.checkbox--disabled:not(.checkbox--checked):not(.checkbox--indeterminate) .checkbox__control {\n background-color: transparent;\n border-color: var(\n --nile-checkbox-color-border-standard,\n var(--ng-colors-border-disabled)\n );\n}\n\n .checkbox__label {\n display: inline-block;\n line-height: var(--nile-type-scale-3, var(--ng-line-height-text-sm));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n margin-inline-start: 0.5em;\n user-select: none;\n margin-top: var(--nile-spacing-xxs);\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n letter-spacing: 0.2px;\n }\n\n :host([required]) .checkbox__label::after {\n content: '';\n margin-inline-start: -2px;\n }\n\n .checkbox__checked-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox__indeterminate-icon {\n --nile-svg-stroke: white;\n }\n\n .checkbox--disabled .checkbox__checked-icon,\n .checkbox--disabled .checkbox__indeterminate-icon {\n --nile-svg-stroke: var(\n --nile-checkbox-color-border-standard,\n var(--ng-colors-fg-disabled-subtle)\n );\n }\n\n .checkbox__helptext-icon {\n float: right;\n cursor: pointer;\n margin-right: var(--nile-spacing-lg);\n }\n`;\n\nexport default [styles];\n"]}