@aquera/nile-elements 0.1.63-beta-1.1 → 1.0.1-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.
- package/README.md +3 -0
- package/dist/index.js +9 -4
- package/dist/nile-checkbox/nile-checkbox.css.cjs.js +1 -1
- package/dist/nile-checkbox/nile-checkbox.css.cjs.js.map +1 -1
- package/dist/nile-checkbox/nile-checkbox.css.esm.js +4 -4
- package/dist/nile-radio/nile-radio.css.cjs.js +1 -1
- package/dist/nile-radio/nile-radio.css.cjs.js.map +1 -1
- package/dist/nile-radio/nile-radio.css.esm.js +5 -0
- package/dist/src/nile-checkbox/nile-checkbox.css.js +4 -4
- package/dist/src/nile-checkbox/nile-checkbox.css.js.map +1 -1
- package/dist/src/nile-radio/nile-radio.css.js +5 -0
- package/dist/src/nile-radio/nile-radio.css.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-checkbox/nile-checkbox.css.ts +4 -4
- package/src/nile-radio/nile-radio.css.ts +5 -0
package/README.md
CHANGED
|
@@ -79,6 +79,9 @@ To run a local development server that serves the basic demo located in `demo/in
|
|
|
79
79
|
|
|
80
80
|
In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
|
|
81
81
|
|
|
82
|
+
#### Version 1.0.1-beta-1.0
|
|
83
|
+
- Nile Tokenization: Ng nxt defect fix
|
|
84
|
+
|
|
82
85
|
#### Version 0.1.63-beta-1.1
|
|
83
86
|
- Nile Tokenization: Ng nxt defect fix[UIF-922]
|
|
84
87
|
|
package/dist/index.js
CHANGED
|
@@ -2414,7 +2414,6 @@ const Ze=e=>e??B;function Ve(e,t){const M={waitUntilFirstUpdate:!1,...t};return(
|
|
|
2414
2414
|
border: 1px solid
|
|
2415
2415
|
var(--nile-checkbox-color-border-hover, var(--ng-colors-border-primary));
|
|
2416
2416
|
border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
|
|
2417
|
-
box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
|
|
2418
2417
|
}
|
|
2419
2418
|
|
|
2420
2419
|
/* Disabled */
|
|
@@ -2431,6 +2430,10 @@ const Ze=e=>e??B;function Ve(e,t){const M={waitUntilFirstUpdate:!1,...t};return(
|
|
|
2431
2430
|
outline-offset: 1px;
|
|
2432
2431
|
}
|
|
2433
2432
|
|
|
2433
|
+
.checkbox--focused .checkbox__control {
|
|
2434
|
+
box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
|
|
2435
|
+
}
|
|
2436
|
+
|
|
2434
2437
|
/* Checked/indeterminate */
|
|
2435
2438
|
.checkbox--checked .checkbox__control,
|
|
2436
2439
|
.checkbox--indeterminate .checkbox__control {
|
|
@@ -2452,9 +2455,6 @@ const Ze=e=>e??B;function Ve(e,t){const M={waitUntilFirstUpdate:!1,...t};return(
|
|
|
2452
2455
|
--nile-checkbox-color-background-checked-hover,
|
|
2453
2456
|
var(--ng-colors-bg-brand-solid)
|
|
2454
2457
|
);
|
|
2455
|
-
/* border: 1px solid var(--nile-checkbox-color-border-checked-hover),
|
|
2456
|
-
var(--ng-colors-border-border-disabled); */
|
|
2457
|
-
box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
|
|
2458
2458
|
}
|
|
2459
2459
|
|
|
2460
2460
|
/* .checkbox.checkbox--indeterminate .checkbox_control:hover {
|
|
@@ -2694,6 +2694,11 @@ const Ze=e=>e??B;function Ve(e,t){const M={waitUntilFirstUpdate:!1,...t};return(
|
|
|
2694
2694
|
outline-offset: 2px;
|
|
2695
2695
|
}
|
|
2696
2696
|
|
|
2697
|
+
.radio--focused .radio__control {
|
|
2698
|
+
outline: solid var(--nile-outline-none, var(--ng-outline-2px)) var(--nile-outline-none, var(--ng-colors-bg-brand-solid));
|
|
2699
|
+
outline-offset: 1px;
|
|
2700
|
+
}
|
|
2701
|
+
|
|
2697
2702
|
/* Disabled */
|
|
2698
2703
|
.radio--disabled {
|
|
2699
2704
|
opacity: 0.5;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",e=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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
|
|
1
|
+
System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",e=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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 }\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 .checkbox--focused .checkbox__control {\n box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\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 }\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"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-checkbox.css.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-checkbox.css.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"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
|
|
1
|
+
{"version":3,"file":"nile-checkbox.css.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"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 }\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 .checkbox--focused .checkbox__control {\n box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\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 }\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"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -72,7 +72,6 @@ import{css as o}from"lit";const e=o`
|
|
|
72
72
|
border: 1px solid
|
|
73
73
|
var(--nile-checkbox-color-border-hover, var(--ng-colors-border-primary));
|
|
74
74
|
border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
|
|
75
|
-
box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
|
|
76
75
|
}
|
|
77
76
|
|
|
78
77
|
/* Disabled */
|
|
@@ -89,6 +88,10 @@ import{css as o}from"lit";const e=o`
|
|
|
89
88
|
outline-offset: 1px;
|
|
90
89
|
}
|
|
91
90
|
|
|
91
|
+
.checkbox--focused .checkbox__control {
|
|
92
|
+
box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
|
|
93
|
+
}
|
|
94
|
+
|
|
92
95
|
/* Checked/indeterminate */
|
|
93
96
|
.checkbox--checked .checkbox__control,
|
|
94
97
|
.checkbox--indeterminate .checkbox__control {
|
|
@@ -110,9 +113,6 @@ import{css as o}from"lit";const e=o`
|
|
|
110
113
|
--nile-checkbox-color-background-checked-hover,
|
|
111
114
|
var(--ng-colors-bg-brand-solid)
|
|
112
115
|
);
|
|
113
|
-
/* border: 1px solid var(--nile-checkbox-color-border-checked-hover),
|
|
114
|
-
var(--ng-colors-border-border-disabled); */
|
|
115
|
-
box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
|
|
116
116
|
}
|
|
117
117
|
|
|
118
118
|
/* .checkbox.checkbox--indeterminate .checkbox_control:hover {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",o=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: 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(:focus-visible) {\n outline: 0px;\n }\n\n .radio {\n display: inline-flex;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n vertical-align: middle;\n cursor: pointer;\n margin: var(--nile-spacing-10px, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none));\n align-items: center;\n }\n\n .radio--medium {\n --toggle-size: 14px;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md))\n }\n\n .radio__checked-icon {\n display: var(--nile-display-inline-flex, var(--ng-display-block));\n width: var(--nile-radio-inner-width, var(--ng-width-2));\n height: var(--nile-radio-inner-width, var(--ng-height-8px));\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n background: var(--nile-radio-checked-icon-background, var(--ng-colors-bg-primary));\n }\n\n .radio__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-radio-outer-width, var(--ng-width-4));\n height: var(--nile-radio-outer-height, var(--ng-height-16px));\n border: solid 1px var(--nile-radio-outer-border-color, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n background-color: var(--nile-radio-outer-background-color, var(--ng-colors-bg-primary));\n color: transparent;\n transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border-color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n }\n\n .radio__input {\n position: absolute;\n opacity: 0;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n pointer-events: none;\n }\n\n /* Hover */\n .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n border: 1px solid var(--nile-radio-hover-border-color, var(--ng-colors-border-disabled-subtle));\n background: var(--nile-radio-hover-background-color, var(--ng-colors-bg-primary));\n }\n\n /* Checked */\n .radio--checked .radio__control {\n color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n border: 1px solid var(--nile-radio-checked-border-color, var(--ng-colors-border-brand));\n background-color: var(--nile-radio-checked-background-color,var(--ng-colors-bg-brand-solid));\n }\n\n /* Checked + hover */\n .radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n border: 1px solid var(--nile-radio-checked-hover-border-color, var(--ng-colors-border-brand-alt));\n background-color: var(--nile-radio-checked-hover-background-color, var(--ng-colors-bg-brand-solid));\n }\n\n /* Checked + hover */\n .radio__checked-icon:hover {\n background-color: var(--nile-radio-checked-hover-icon-background-color, var(--ng-colors-bg-primary));\n }\n\n /* Checked + focus */\n :host(:focus-visible) .radio__control {\n outline: solid var(--nile-outline-3px, var(--ng-outline-2px)) var(--nile-box-shadow-12, var(--ng-colors-bg-brand-solid));\n outline-offset: 1px;\n }\n\n .radio__control:focus-visible {\n outline: solid var(--nile-outline-3px, var(--ng-outline-2px)) var(--nile-box-shadow-12, var(--ng-colors-bg-brand-solid));\n outline-offset: 2px;\n }\n\n /* Disabled */\n .radio--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .radio--disabled .radio__checked-icon {\n background-color:var(--nile-colors-neutral-500, var(--ng-colors-bg-disabled-subtle)); // for v2\n }\n\n .radio--disabled .radio__control {\n background-color:var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-disabled-subtle));\n }\n\n /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */\n .radio:not(.radio--checked) svg circle {\n opacity: 0;\n }\n\n .radio__label {\n display: inline-block;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n line-height: var(--nile-type-scale-3, var(--ng-line-height-text-sm));\n margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n user-select: none;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n margin-top: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n }\n .radio__label_border {\n padding: var(--nile-spacing-lg, var(--ng-spacing-xl));\n border-radius: var(--nile-radius-sm, var(--ng-radius-xl));\n border: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n"]))));}};});
|
|
1
|
+
System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",o=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: 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(:focus-visible) {\n outline: 0px;\n }\n\n .radio {\n display: inline-flex;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n vertical-align: middle;\n cursor: pointer;\n margin: var(--nile-spacing-10px, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none));\n align-items: center;\n }\n\n .radio--medium {\n --toggle-size: 14px;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md))\n }\n\n .radio__checked-icon {\n display: var(--nile-display-inline-flex, var(--ng-display-block));\n width: var(--nile-radio-inner-width, var(--ng-width-2));\n height: var(--nile-radio-inner-width, var(--ng-height-8px));\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n background: var(--nile-radio-checked-icon-background, var(--ng-colors-bg-primary));\n }\n\n .radio__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-radio-outer-width, var(--ng-width-4));\n height: var(--nile-radio-outer-height, var(--ng-height-16px));\n border: solid 1px var(--nile-radio-outer-border-color, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n background-color: var(--nile-radio-outer-background-color, var(--ng-colors-bg-primary));\n color: transparent;\n transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border-color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n }\n\n .radio__input {\n position: absolute;\n opacity: 0;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n pointer-events: none;\n }\n\n /* Hover */\n .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n border: 1px solid var(--nile-radio-hover-border-color, var(--ng-colors-border-disabled-subtle));\n background: var(--nile-radio-hover-background-color, var(--ng-colors-bg-primary));\n }\n\n /* Checked */\n .radio--checked .radio__control {\n color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n border: 1px solid var(--nile-radio-checked-border-color, var(--ng-colors-border-brand));\n background-color: var(--nile-radio-checked-background-color,var(--ng-colors-bg-brand-solid));\n }\n\n /* Checked + hover */\n .radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n border: 1px solid var(--nile-radio-checked-hover-border-color, var(--ng-colors-border-brand-alt));\n background-color: var(--nile-radio-checked-hover-background-color, var(--ng-colors-bg-brand-solid));\n }\n\n /* Checked + hover */\n .radio__checked-icon:hover {\n background-color: var(--nile-radio-checked-hover-icon-background-color, var(--ng-colors-bg-primary));\n }\n\n /* Checked + focus */\n :host(:focus-visible) .radio__control {\n outline: solid var(--nile-outline-3px, var(--ng-outline-2px)) var(--nile-box-shadow-12, var(--ng-colors-bg-brand-solid));\n outline-offset: 1px;\n }\n\n .radio__control:focus-visible {\n outline: solid var(--nile-outline-3px, var(--ng-outline-2px)) var(--nile-box-shadow-12, var(--ng-colors-bg-brand-solid));\n outline-offset: 2px;\n }\n\n .radio--focused .radio__control {\n outline: solid var(--nile-outline-none, var(--ng-outline-2px)) var(--nile-outline-none, var(--ng-colors-bg-brand-solid));\n outline-offset: 1px;\n }\n\n /* Disabled */\n .radio--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .radio--disabled .radio__checked-icon {\n background-color:var(--nile-colors-neutral-500, var(--ng-colors-bg-disabled-subtle)); // for v2\n }\n\n .radio--disabled .radio__control {\n background-color:var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-disabled-subtle));\n }\n\n /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */\n .radio:not(.radio--checked) svg circle {\n opacity: 0;\n }\n\n .radio__label {\n display: inline-block;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n line-height: var(--nile-type-scale-3, var(--ng-line-height-text-sm));\n margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n user-select: none;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n margin-top: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n }\n .radio__label_border {\n padding: var(--nile-spacing-lg, var(--ng-spacing-xl));\n border-radius: var(--nile-radius-sm, var(--ng-radius-xl));\n border: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-radio.css.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-radio.css.cjs.js","sources":["../../../src/nile-radio/nile-radio.css.ts"],"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 * Radio CSS\n */\nexport const styles = css`\n :host {\n display: 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(:focus-visible) {\n outline: 0px;\n }\n\n .radio {\n display: inline-flex;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n vertical-align: middle;\n cursor: pointer;\n margin: var(--nile-spacing-10px, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none));\n align-items: center;\n }\n\n .radio--medium {\n --toggle-size: 14px;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md))\n }\n\n .radio__checked-icon {\n display: var(--nile-display-inline-flex, var(--ng-display-block));\n width: var(--nile-radio-inner-width, var(--ng-width-2));\n height: var(--nile-radio-inner-width, var(--ng-height-8px));\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n background: var(--nile-radio-checked-icon-background, var(--ng-colors-bg-primary));\n }\n\n .radio__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-radio-outer-width, var(--ng-width-4));\n height: var(--nile-radio-outer-height, var(--ng-height-16px));\n border: solid 1px var(--nile-radio-outer-border-color, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n background-color: var(--nile-radio-outer-background-color, var(--ng-colors-bg-primary));\n color: transparent;\n transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border-color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n }\n\n .radio__input {\n position: absolute;\n opacity: 0;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n pointer-events: none;\n }\n\n /* Hover */\n .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n border: 1px solid var(--nile-radio-hover-border-color, var(--ng-colors-border-disabled-subtle));\n background: var(--nile-radio-hover-background-color, var(--ng-colors-bg-primary));\n }\n\n /* Checked */\n .radio--checked .radio__control {\n color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n border: 1px solid var(--nile-radio-checked-border-color, var(--ng-colors-border-brand));\n background-color: var(--nile-radio-checked-background-color,var(--ng-colors-bg-brand-solid));\n }\n\n /* Checked + hover */\n .radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n border: 1px solid var(--nile-radio-checked-hover-border-color, var(--ng-colors-border-brand-alt));\n background-color: var(--nile-radio-checked-hover-background-color, var(--ng-colors-bg-brand-solid));\n }\n\n /* Checked + hover */\n .radio__checked-icon:hover {\n background-color: var(--nile-radio-checked-hover-icon-background-color, var(--ng-colors-bg-primary));\n }\n\n /* Checked + focus */\n :host(:focus-visible) .radio__control {\n outline: solid var(--nile-outline-3px, var(--ng-outline-2px)) var(--nile-box-shadow-12, var(--ng-colors-bg-brand-solid));\n outline-offset: 1px;\n }\n\n .radio__control:focus-visible {\n outline: solid var(--nile-outline-3px, var(--ng-outline-2px)) var(--nile-box-shadow-12, var(--ng-colors-bg-brand-solid));\n outline-offset: 2px;\n }\n\n /* Disabled */\n .radio--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .radio--disabled .radio__checked-icon {\n background-color:var(--nile-colors-neutral-500, var(--ng-colors-bg-disabled-subtle)); // for v2\n }\n\n .radio--disabled .radio__control {\n background-color:var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-disabled-subtle));\n }\n\n /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */\n .radio:not(.radio--checked) svg circle {\n opacity: 0;\n }\n\n .radio__label {\n display: inline-block;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n line-height: var(--nile-type-scale-3, var(--ng-line-height-text-sm));\n margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n user-select: none;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n margin-top: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n }\n .radio__label_border {\n padding: var(--nile-spacing-lg, var(--ng-spacing-xl));\n border-radius: var(--nile-radius-sm, var(--ng-radius-xl));\n border: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
1
|
+
{"version":3,"file":"nile-radio.css.cjs.js","sources":["../../../src/nile-radio/nile-radio.css.ts"],"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 * Radio CSS\n */\nexport const styles = css`\n :host {\n display: 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(:focus-visible) {\n outline: 0px;\n }\n\n .radio {\n display: inline-flex;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n vertical-align: middle;\n cursor: pointer;\n margin: var(--nile-spacing-10px, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none));\n align-items: center;\n }\n\n .radio--medium {\n --toggle-size: 14px;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md))\n }\n\n .radio__checked-icon {\n display: var(--nile-display-inline-flex, var(--ng-display-block));\n width: var(--nile-radio-inner-width, var(--ng-width-2));\n height: var(--nile-radio-inner-width, var(--ng-height-8px));\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n background: var(--nile-radio-checked-icon-background, var(--ng-colors-bg-primary));\n }\n\n .radio__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-radio-outer-width, var(--ng-width-4));\n height: var(--nile-radio-outer-height, var(--ng-height-16px));\n border: solid 1px var(--nile-radio-outer-border-color, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n background-color: var(--nile-radio-outer-background-color, var(--ng-colors-bg-primary));\n color: transparent;\n transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border-color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n }\n\n .radio__input {\n position: absolute;\n opacity: 0;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n pointer-events: none;\n }\n\n /* Hover */\n .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n border: 1px solid var(--nile-radio-hover-border-color, var(--ng-colors-border-disabled-subtle));\n background: var(--nile-radio-hover-background-color, var(--ng-colors-bg-primary));\n }\n\n /* Checked */\n .radio--checked .radio__control {\n color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n border: 1px solid var(--nile-radio-checked-border-color, var(--ng-colors-border-brand));\n background-color: var(--nile-radio-checked-background-color,var(--ng-colors-bg-brand-solid));\n }\n\n /* Checked + hover */\n .radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n border: 1px solid var(--nile-radio-checked-hover-border-color, var(--ng-colors-border-brand-alt));\n background-color: var(--nile-radio-checked-hover-background-color, var(--ng-colors-bg-brand-solid));\n }\n\n /* Checked + hover */\n .radio__checked-icon:hover {\n background-color: var(--nile-radio-checked-hover-icon-background-color, var(--ng-colors-bg-primary));\n }\n\n /* Checked + focus */\n :host(:focus-visible) .radio__control {\n outline: solid var(--nile-outline-3px, var(--ng-outline-2px)) var(--nile-box-shadow-12, var(--ng-colors-bg-brand-solid));\n outline-offset: 1px;\n }\n\n .radio__control:focus-visible {\n outline: solid var(--nile-outline-3px, var(--ng-outline-2px)) var(--nile-box-shadow-12, var(--ng-colors-bg-brand-solid));\n outline-offset: 2px;\n }\n\n .radio--focused .radio__control {\n outline: solid var(--nile-outline-none, var(--ng-outline-2px)) var(--nile-outline-none, var(--ng-colors-bg-brand-solid));\n outline-offset: 1px;\n }\n\n /* Disabled */\n .radio--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .radio--disabled .radio__checked-icon {\n background-color:var(--nile-colors-neutral-500, var(--ng-colors-bg-disabled-subtle)); // for v2\n }\n\n .radio--disabled .radio__control {\n background-color:var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-disabled-subtle));\n }\n\n /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */\n .radio:not(.radio--checked) svg circle {\n opacity: 0;\n }\n\n .radio__label {\n display: inline-block;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n line-height: var(--nile-type-scale-3, var(--ng-line-height-text-sm));\n margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n user-select: none;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n margin-top: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n }\n .radio__label_border {\n padding: var(--nile-spacing-lg, var(--ng-spacing-xl));\n border-radius: var(--nile-radius-sm, var(--ng-radius-xl));\n border: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -95,6 +95,11 @@ import{css as r}from"lit";const o=r`
|
|
|
95
95
|
outline-offset: 2px;
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
+
.radio--focused .radio__control {
|
|
99
|
+
outline: solid var(--nile-outline-none, var(--ng-outline-2px)) var(--nile-outline-none, var(--ng-colors-bg-brand-solid));
|
|
100
|
+
outline-offset: 1px;
|
|
101
|
+
}
|
|
102
|
+
|
|
98
103
|
/* Disabled */
|
|
99
104
|
.radio--disabled {
|
|
100
105
|
opacity: 0.5;
|
|
@@ -82,7 +82,6 @@ export const styles = css `
|
|
|
82
82
|
border: 1px solid
|
|
83
83
|
var(--nile-checkbox-color-border-hover, var(--ng-colors-border-primary));
|
|
84
84
|
border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
|
|
85
|
-
box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
|
|
86
85
|
}
|
|
87
86
|
|
|
88
87
|
/* Disabled */
|
|
@@ -99,6 +98,10 @@ export const styles = css `
|
|
|
99
98
|
outline-offset: 1px;
|
|
100
99
|
}
|
|
101
100
|
|
|
101
|
+
.checkbox--focused .checkbox__control {
|
|
102
|
+
box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
|
|
103
|
+
}
|
|
104
|
+
|
|
102
105
|
/* Checked/indeterminate */
|
|
103
106
|
.checkbox--checked .checkbox__control,
|
|
104
107
|
.checkbox--indeterminate .checkbox__control {
|
|
@@ -120,9 +123,6 @@ export const styles = css `
|
|
|
120
123
|
--nile-checkbox-color-background-checked-hover,
|
|
121
124
|
var(--ng-colors-bg-brand-solid)
|
|
122
125
|
);
|
|
123
|
-
/* border: 1px solid var(--nile-checkbox-color-border-checked-hover),
|
|
124
|
-
var(--ng-colors-border-border-disabled); */
|
|
125
|
-
box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
|
|
126
126
|
}
|
|
127
127
|
|
|
128
128
|
/* .checkbox.checkbox--indeterminate .checkbox_control:hover {
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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
|
|
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 }\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 .checkbox--focused .checkbox__control {\n box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\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 }\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"]}
|
|
@@ -105,6 +105,11 @@ export const styles = css `
|
|
|
105
105
|
outline-offset: 2px;
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
+
.radio--focused .radio__control {
|
|
109
|
+
outline: solid var(--nile-outline-none, var(--ng-outline-2px)) var(--nile-outline-none, var(--ng-colors-bg-brand-solid));
|
|
110
|
+
outline-offset: 1px;
|
|
111
|
+
}
|
|
112
|
+
|
|
108
113
|
/* Disabled */
|
|
109
114
|
.radio--disabled {
|
|
110
115
|
opacity: 0.5;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-radio.css.js","sourceRoot":"","sources":["../../../src/nile-radio/nile-radio.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-radio.css.js","sourceRoot":"","sources":["../../../src/nile-radio/nile-radio.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIxB,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 * Radio CSS\n */\nexport const styles = css`\n :host {\n display: 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(:focus-visible) {\n outline: 0px;\n }\n\n .radio {\n display: inline-flex;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n vertical-align: middle;\n cursor: pointer;\n margin: var(--nile-spacing-10px, var(--ng-spacing-lg)) var(--nile-spacing-none, var(--ng-spacing-none));\n align-items: center;\n }\n\n .radio--medium {\n --toggle-size: 14px;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md))\n }\n\n .radio__checked-icon {\n display: var(--nile-display-inline-flex, var(--ng-display-block));\n width: var(--nile-radio-inner-width, var(--ng-width-2));\n height: var(--nile-radio-inner-width, var(--ng-height-8px));\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n background: var(--nile-radio-checked-icon-background, var(--ng-colors-bg-primary));\n }\n\n .radio__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-radio-outer-width, var(--ng-width-4));\n height: var(--nile-radio-outer-height, var(--ng-height-16px));\n border: solid 1px var(--nile-radio-outer-border-color, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-full, var(--ng-radius-full));\n background-color: var(--nile-radio-outer-background-color, var(--ng-colors-bg-primary));\n color: transparent;\n transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border-color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n }\n\n .radio__input {\n position: absolute;\n opacity: 0;\n padding: var(--nile-spacing-none, var(--ng-spacing-none));\n margin: var(--nile-spacing-none, var(--ng-spacing-none));\n pointer-events: none;\n }\n\n /* Hover */\n .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n border: 1px solid var(--nile-radio-hover-border-color, var(--ng-colors-border-disabled-subtle));\n background: var(--nile-radio-hover-background-color, var(--ng-colors-bg-primary));\n }\n\n /* Checked */\n .radio--checked .radio__control {\n color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));\n border: 1px solid var(--nile-radio-checked-border-color, var(--ng-colors-border-brand));\n background-color: var(--nile-radio-checked-background-color,var(--ng-colors-bg-brand-solid));\n }\n\n /* Checked + hover */\n .radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n border: 1px solid var(--nile-radio-checked-hover-border-color, var(--ng-colors-border-brand-alt));\n background-color: var(--nile-radio-checked-hover-background-color, var(--ng-colors-bg-brand-solid));\n }\n\n /* Checked + hover */\n .radio__checked-icon:hover {\n background-color: var(--nile-radio-checked-hover-icon-background-color, var(--ng-colors-bg-primary));\n }\n\n /* Checked + focus */\n :host(:focus-visible) .radio__control {\n outline: solid var(--nile-outline-3px, var(--ng-outline-2px)) var(--nile-box-shadow-12, var(--ng-colors-bg-brand-solid));\n outline-offset: 1px;\n }\n\n .radio__control:focus-visible {\n outline: solid var(--nile-outline-3px, var(--ng-outline-2px)) var(--nile-box-shadow-12, var(--ng-colors-bg-brand-solid));\n outline-offset: 2px;\n }\n\n .radio--focused .radio__control {\n outline: solid var(--nile-outline-none, var(--ng-outline-2px)) var(--nile-outline-none, var(--ng-colors-bg-brand-solid));\n outline-offset: 1px;\n }\n\n /* Disabled */\n .radio--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .radio--disabled .radio__checked-icon {\n background-color:var(--nile-colors-neutral-500, var(--ng-colors-bg-disabled-subtle)); // for v2\n }\n\n .radio--disabled .radio__control {\n background-color:var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-disabled-subtle));\n }\n\n /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */\n .radio:not(.radio--checked) svg circle {\n opacity: 0;\n }\n\n .radio__label {\n display: inline-block;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n line-height: var(--nile-type-scale-3, var(--ng-line-height-text-sm));\n margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));\n user-select: none;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n margin-top: var(--nile-spacing-xxs, var(--ng-spacing-xxs));\n }\n .radio__label_border {\n padding: var(--nile-spacing-lg, var(--ng-spacing-xl));\n border-radius: var(--nile-radius-sm, var(--ng-radius-xl));\n border: var(--nile-border-width-1, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n`;\n"]}
|