@aquera/nile-elements 0.1.49-beta-1.0 → 0.1.49-beta-1.1

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 (214) hide show
  1. package/README.md +3 -0
  2. package/dist/index.js +67 -67
  3. package/dist/nile-accordion/nile-accordion.css.cjs.js +1 -1
  4. package/dist/nile-accordion/nile-accordion.css.cjs.js.map +1 -1
  5. package/dist/nile-accordion/nile-accordion.css.esm.js +1 -1
  6. package/dist/nile-avatar/nile-avatar.css.cjs.js +1 -1
  7. package/dist/nile-avatar/nile-avatar.css.cjs.js.map +1 -1
  8. package/dist/nile-avatar/nile-avatar.css.esm.js +1 -1
  9. package/dist/nile-breadcrumb-item/nile-breadcrumb-item.css.cjs.js +1 -1
  10. package/dist/nile-breadcrumb-item/nile-breadcrumb-item.css.cjs.js.map +1 -1
  11. package/dist/nile-breadcrumb-item/nile-breadcrumb-item.css.esm.js +1 -1
  12. package/dist/nile-button/nile-button.css.cjs.js +1 -1
  13. package/dist/nile-button/nile-button.css.cjs.js.map +1 -1
  14. package/dist/nile-button/nile-button.css.esm.js +1 -1
  15. package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js +1 -1
  16. package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js.map +1 -1
  17. package/dist/nile-button-toggle/nile-button-toggle.css.esm.js +1 -1
  18. package/dist/nile-calendar/nile-calendar.css.cjs.js +1 -1
  19. package/dist/nile-calendar/nile-calendar.css.cjs.js.map +1 -1
  20. package/dist/nile-calendar/nile-calendar.css.esm.js +1 -1
  21. package/dist/nile-checkbox/nile-checkbox.css.cjs.js +1 -1
  22. package/dist/nile-checkbox/nile-checkbox.css.cjs.js.map +1 -1
  23. package/dist/nile-checkbox/nile-checkbox.css.esm.js +2 -2
  24. package/dist/nile-chip/nile-chip.css.cjs.js +1 -1
  25. package/dist/nile-chip/nile-chip.css.cjs.js.map +1 -1
  26. package/dist/nile-chip/nile-chip.css.esm.js +1 -1
  27. package/dist/nile-dialog/nile-dialog.css.cjs.js +1 -1
  28. package/dist/nile-dialog/nile-dialog.css.cjs.js.map +1 -1
  29. package/dist/nile-dialog/nile-dialog.css.esm.js +4 -4
  30. package/dist/nile-divider/nile-divider.css.cjs.js +1 -1
  31. package/dist/nile-divider/nile-divider.css.cjs.js.map +1 -1
  32. package/dist/nile-divider/nile-divider.css.esm.js +1 -1
  33. package/dist/nile-dropdown/nile-dropdown.css.cjs.js +1 -1
  34. package/dist/nile-dropdown/nile-dropdown.css.cjs.js.map +1 -1
  35. package/dist/nile-dropdown/nile-dropdown.css.esm.js +1 -1
  36. package/dist/nile-empty-state/nile-empty-state.css.cjs.js +1 -1
  37. package/dist/nile-empty-state/nile-empty-state.css.cjs.js.map +1 -1
  38. package/dist/nile-empty-state/nile-empty-state.css.esm.js +2 -2
  39. package/dist/nile-error-message/nile-error-message.css.cjs.js +1 -1
  40. package/dist/nile-error-message/nile-error-message.css.cjs.js.map +1 -1
  41. package/dist/nile-error-message/nile-error-message.css.esm.js +1 -1
  42. package/dist/nile-error-notification/nile-error-notification.css.cjs.js +1 -1
  43. package/dist/nile-error-notification/nile-error-notification.css.cjs.js.map +1 -1
  44. package/dist/nile-error-notification/nile-error-notification.css.esm.js +3 -3
  45. package/dist/nile-file-preview/nile-file-preview.css.cjs.js +1 -1
  46. package/dist/nile-file-preview/nile-file-preview.css.cjs.js.map +1 -1
  47. package/dist/nile-file-preview/nile-file-preview.css.esm.js +13 -13
  48. package/dist/nile-file-upload/nile-file-upload.css.cjs.js +1 -1
  49. package/dist/nile-file-upload/nile-file-upload.css.cjs.js.map +1 -1
  50. package/dist/nile-file-upload/nile-file-upload.css.esm.js +3 -3
  51. package/dist/nile-form-group/nile-form-group.cjs.js +1 -1
  52. package/dist/nile-form-group/nile-form-group.cjs.js.map +1 -1
  53. package/dist/nile-form-group/nile-form-group.css.cjs.js +1 -1
  54. package/dist/nile-form-group/nile-form-group.css.cjs.js.map +1 -1
  55. package/dist/nile-form-group/nile-form-group.css.esm.js +2 -2
  56. package/dist/nile-form-group/nile-form-group.esm.js +6 -6
  57. package/dist/nile-form-help-text/nile-form-help-text.css.cjs.js +1 -1
  58. package/dist/nile-form-help-text/nile-form-help-text.css.cjs.js.map +1 -1
  59. package/dist/nile-form-help-text/nile-form-help-text.css.esm.js +1 -1
  60. package/dist/nile-inline-edit/nile-inline-edit.css.cjs.js +1 -1
  61. package/dist/nile-inline-edit/nile-inline-edit.css.cjs.js.map +1 -1
  62. package/dist/nile-inline-edit/nile-inline-edit.css.esm.js +2 -2
  63. package/dist/nile-input/nile-input.css.cjs.js +1 -1
  64. package/dist/nile-input/nile-input.css.cjs.js.map +1 -1
  65. package/dist/nile-input/nile-input.css.esm.js +3 -3
  66. package/dist/nile-link/nile-link.css.cjs.js +1 -1
  67. package/dist/nile-link/nile-link.css.cjs.js.map +1 -1
  68. package/dist/nile-link/nile-link.css.esm.js +1 -1
  69. package/dist/nile-loader/nile-loader.css.cjs.js +1 -1
  70. package/dist/nile-loader/nile-loader.css.cjs.js.map +1 -1
  71. package/dist/nile-loader/nile-loader.css.esm.js +1 -1
  72. package/dist/nile-menu-item/nile-menu-item.css.cjs.js +1 -1
  73. package/dist/nile-menu-item/nile-menu-item.css.cjs.js.map +1 -1
  74. package/dist/nile-menu-item/nile-menu-item.css.esm.js +1 -1
  75. package/dist/nile-option/nile-option.css.cjs.js +1 -1
  76. package/dist/nile-option/nile-option.css.cjs.js.map +1 -1
  77. package/dist/nile-option/nile-option.css.esm.js +1 -1
  78. package/dist/nile-popover/nile-popover.css.cjs.js +1 -1
  79. package/dist/nile-popover/nile-popover.css.cjs.js.map +1 -1
  80. package/dist/nile-popover/nile-popover.css.esm.js +1 -1
  81. package/dist/nile-section-message/nile-section-message.css.cjs.js +1 -1
  82. package/dist/nile-section-message/nile-section-message.css.cjs.js.map +1 -1
  83. package/dist/nile-section-message/nile-section-message.css.esm.js +3 -3
  84. package/dist/nile-select/nile-select.css.cjs.js +1 -1
  85. package/dist/nile-select/nile-select.css.cjs.js.map +1 -1
  86. package/dist/nile-select/nile-select.css.esm.js +3 -3
  87. package/dist/nile-slide-toggle/nile-slide-toggle.css.cjs.js +1 -1
  88. package/dist/nile-slide-toggle/nile-slide-toggle.css.cjs.js.map +1 -1
  89. package/dist/nile-slide-toggle/nile-slide-toggle.css.esm.js +2 -2
  90. package/dist/nile-stepper-item/nile-stepper-item.css.cjs.js +1 -1
  91. package/dist/nile-stepper-item/nile-stepper-item.css.cjs.js.map +1 -1
  92. package/dist/nile-stepper-item/nile-stepper-item.css.esm.js +4 -4
  93. package/dist/nile-tab/nile-tab.css.cjs.js +1 -1
  94. package/dist/nile-tab/nile-tab.css.cjs.js.map +1 -1
  95. package/dist/nile-tab/nile-tab.css.esm.js +1 -1
  96. package/dist/nile-table-header-item/nile-table-header-item.css.cjs.js +1 -1
  97. package/dist/nile-table-header-item/nile-table-header-item.css.cjs.js.map +1 -1
  98. package/dist/nile-table-header-item/nile-table-header-item.css.esm.js +1 -1
  99. package/dist/nile-textarea/nile-textarea.css.cjs.js +1 -1
  100. package/dist/nile-textarea/nile-textarea.css.cjs.js.map +1 -1
  101. package/dist/nile-textarea/nile-textarea.css.esm.js +1 -1
  102. package/dist/nile-toast/nile-toast.css.cjs.js +1 -1
  103. package/dist/nile-toast/nile-toast.css.cjs.js.map +1 -1
  104. package/dist/nile-toast/nile-toast.css.esm.js +3 -3
  105. package/dist/nile-toolbar/nile-toolbar.css.cjs.js +1 -1
  106. package/dist/nile-toolbar/nile-toolbar.css.cjs.js.map +1 -1
  107. package/dist/nile-toolbar/nile-toolbar.css.esm.js +1 -1
  108. package/dist/src/nile-accordion/nile-accordion.css.js +1 -1
  109. package/dist/src/nile-accordion/nile-accordion.css.js.map +1 -1
  110. package/dist/src/nile-avatar/nile-avatar.css.js +1 -1
  111. package/dist/src/nile-avatar/nile-avatar.css.js.map +1 -1
  112. package/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.css.js +1 -1
  113. package/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.css.js.map +1 -1
  114. package/dist/src/nile-button/nile-button.css.js +1 -1
  115. package/dist/src/nile-button/nile-button.css.js.map +1 -1
  116. package/dist/src/nile-button-toggle/nile-button-toggle.css.js +1 -1
  117. package/dist/src/nile-button-toggle/nile-button-toggle.css.js.map +1 -1
  118. package/dist/src/nile-calendar/nile-calendar.css.js +1 -1
  119. package/dist/src/nile-calendar/nile-calendar.css.js.map +1 -1
  120. package/dist/src/nile-checkbox/nile-checkbox.css.js +2 -2
  121. package/dist/src/nile-checkbox/nile-checkbox.css.js.map +1 -1
  122. package/dist/src/nile-chip/nile-chip.css.js +1 -1
  123. package/dist/src/nile-chip/nile-chip.css.js.map +1 -1
  124. package/dist/src/nile-dialog/nile-dialog.css.js +2 -2
  125. package/dist/src/nile-dialog/nile-dialog.css.js.map +1 -1
  126. package/dist/src/nile-divider/nile-divider.css.js +1 -1
  127. package/dist/src/nile-divider/nile-divider.css.js.map +1 -1
  128. package/dist/src/nile-dropdown/nile-dropdown.css.js +1 -1
  129. package/dist/src/nile-dropdown/nile-dropdown.css.js.map +1 -1
  130. package/dist/src/nile-empty-state/nile-empty-state.css.js +2 -2
  131. package/dist/src/nile-empty-state/nile-empty-state.css.js.map +1 -1
  132. package/dist/src/nile-error-message/nile-error-message.css.js +1 -1
  133. package/dist/src/nile-error-message/nile-error-message.css.js.map +1 -1
  134. package/dist/src/nile-error-notification/nile-error-notification.css.js +1 -1
  135. package/dist/src/nile-error-notification/nile-error-notification.css.js.map +1 -1
  136. package/dist/src/nile-file-preview/nile-file-preview.css.js +13 -13
  137. package/dist/src/nile-file-preview/nile-file-preview.css.js.map +1 -1
  138. package/dist/src/nile-file-upload/nile-file-upload.css.js +3 -3
  139. package/dist/src/nile-file-upload/nile-file-upload.css.js.map +1 -1
  140. package/dist/src/nile-form-group/nile-form-group.css.js +2 -2
  141. package/dist/src/nile-form-group/nile-form-group.css.js.map +1 -1
  142. package/dist/src/nile-form-group/nile-form-group.js +4 -4
  143. package/dist/src/nile-form-group/nile-form-group.js.map +1 -1
  144. package/dist/src/nile-form-help-text/nile-form-help-text.css.js +1 -1
  145. package/dist/src/nile-form-help-text/nile-form-help-text.css.js.map +1 -1
  146. package/dist/src/nile-inline-edit/nile-inline-edit.css.js +2 -2
  147. package/dist/src/nile-inline-edit/nile-inline-edit.css.js.map +1 -1
  148. package/dist/src/nile-input/nile-input.css.js +3 -3
  149. package/dist/src/nile-input/nile-input.css.js.map +1 -1
  150. package/dist/src/nile-link/nile-link.css.js +1 -1
  151. package/dist/src/nile-link/nile-link.css.js.map +1 -1
  152. package/dist/src/nile-loader/nile-loader.css.js +1 -1
  153. package/dist/src/nile-loader/nile-loader.css.js.map +1 -1
  154. package/dist/src/nile-menu-item/nile-menu-item.css.js +1 -1
  155. package/dist/src/nile-menu-item/nile-menu-item.css.js.map +1 -1
  156. package/dist/src/nile-option/nile-option.css.js +1 -1
  157. package/dist/src/nile-option/nile-option.css.js.map +1 -1
  158. package/dist/src/nile-popover/nile-popover.css.js +1 -1
  159. package/dist/src/nile-popover/nile-popover.css.js.map +1 -1
  160. package/dist/src/nile-section-message/nile-section-message.css.js +3 -3
  161. package/dist/src/nile-section-message/nile-section-message.css.js.map +1 -1
  162. package/dist/src/nile-select/nile-select.css.js +3 -3
  163. package/dist/src/nile-select/nile-select.css.js.map +1 -1
  164. package/dist/src/nile-slide-toggle/nile-slide-toggle.css.js +2 -2
  165. package/dist/src/nile-slide-toggle/nile-slide-toggle.css.js.map +1 -1
  166. package/dist/src/nile-stepper-item/nile-stepper-item.css.js +2 -2
  167. package/dist/src/nile-stepper-item/nile-stepper-item.css.js.map +1 -1
  168. package/dist/src/nile-tab/nile-tab.css.js +1 -1
  169. package/dist/src/nile-tab/nile-tab.css.js.map +1 -1
  170. package/dist/src/nile-table-header-item/nile-table-header-item.css.js +1 -1
  171. package/dist/src/nile-table-header-item/nile-table-header-item.css.js.map +1 -1
  172. package/dist/src/nile-textarea/nile-textarea.css.js +1 -1
  173. package/dist/src/nile-textarea/nile-textarea.css.js.map +1 -1
  174. package/dist/src/nile-toast/nile-toast.css.js +3 -3
  175. package/dist/src/nile-toast/nile-toast.css.js.map +1 -1
  176. package/dist/src/nile-toolbar/nile-toolbar.css.js +1 -1
  177. package/dist/src/nile-toolbar/nile-toolbar.css.js.map +1 -1
  178. package/dist/tsconfig.tsbuildinfo +1 -1
  179. package/package.json +1 -1
  180. package/src/nile-accordion/nile-accordion.css.ts +1 -1
  181. package/src/nile-avatar/nile-avatar.css.ts +1 -1
  182. package/src/nile-breadcrumb-item/nile-breadcrumb-item.css.ts +1 -1
  183. package/src/nile-button/nile-button.css.ts +1 -1
  184. package/src/nile-button-toggle/nile-button-toggle.css.ts +1 -1
  185. package/src/nile-calendar/nile-calendar.css.ts +1 -1
  186. package/src/nile-checkbox/nile-checkbox.css.ts +2 -2
  187. package/src/nile-chip/nile-chip.css.ts +1 -1
  188. package/src/nile-dialog/nile-dialog.css.ts +2 -2
  189. package/src/nile-divider/nile-divider.css.ts +1 -1
  190. package/src/nile-dropdown/nile-dropdown.css.ts +1 -1
  191. package/src/nile-empty-state/nile-empty-state.css.ts +2 -2
  192. package/src/nile-error-message/nile-error-message.css.ts +1 -1
  193. package/src/nile-error-notification/nile-error-notification.css.ts +1 -1
  194. package/src/nile-file-preview/nile-file-preview.css.ts +13 -13
  195. package/src/nile-file-upload/nile-file-upload.css.ts +3 -3
  196. package/src/nile-form-group/nile-form-group.css.ts +2 -2
  197. package/src/nile-form-group/nile-form-group.ts +4 -4
  198. package/src/nile-form-help-text/nile-form-help-text.css.ts +1 -1
  199. package/src/nile-inline-edit/nile-inline-edit.css.ts +2 -2
  200. package/src/nile-input/nile-input.css.ts +3 -3
  201. package/src/nile-link/nile-link.css.ts +1 -1
  202. package/src/nile-loader/nile-loader.css.ts +1 -1
  203. package/src/nile-menu-item/nile-menu-item.css.ts +1 -1
  204. package/src/nile-option/nile-option.css.ts +1 -1
  205. package/src/nile-popover/nile-popover.css.ts +1 -1
  206. package/src/nile-section-message/nile-section-message.css.ts +3 -3
  207. package/src/nile-select/nile-select.css.ts +3 -3
  208. package/src/nile-slide-toggle/nile-slide-toggle.css.ts +2 -2
  209. package/src/nile-stepper-item/nile-stepper-item.css.ts +2 -2
  210. package/src/nile-tab/nile-tab.css.ts +1 -1
  211. package/src/nile-table-header-item/nile-table-header-item.css.ts +1 -1
  212. package/src/nile-textarea/nile-textarea.css.ts +1 -1
  213. package/src/nile-toast/nile-toast.css.ts +3 -3
  214. package/src/nile-toolbar/nile-toolbar.css.ts +1 -1
@@ -1,2 +1,2 @@
1
- System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,a;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",a=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: contents;\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 /* For better DX, we'll reset the margin here so the base part can inherit it */\n margin: var(--nile-spacing-none);\n }\n\n .alert {\n max-width: 100%;\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: flex-start;\n border: solid 2px;\n border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n margin: inherit;\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n width: max-content;\n min-width: 400px;\n }\n\n .alert:not(.alert--has-icon) .alert__icon,\n .alert:not(.alert--closable) .alert__close-button {\n display: none;\n }\n\n .alert__prefix-icon-container {\n background-color: var(--nile-colors-red-500);\n border-radius: var(--nile-radius-sm);\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-1);\n }\n\n .alert--success {\n border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-success, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--success .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-success, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--info {\n border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-info, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--info .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-info, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--warning {\n border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-warning, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--warning .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-warning, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--error {\n border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-error, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--error .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-error, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--gray {\n border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-gray, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--gray .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-gray, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--black {\n border: 1px solid var(--nile-toast-color-border-black);\n background: var(--nile-toast-color-background-black);\n box-shadow: var(--nile-toast-color-box-black);\n }\n\n .alert--black .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-black);\n }\n\n .alert__message {\n flex: 1 1 auto;\n overflow: hidden;\n display: flex;\n align-items: center;\n flex-direction: column;\n align-items: flex-start;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-display));\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-dark-900);\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .alert__message--title {\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n color:var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n }\n\n .alert__message--content {\n font-weight:var(--nile-font-weight-regular, var(--ng-font-weight-400));\n color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .alert__message--content-only {\n }\n\n .alert__close-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .alert__tags {\n display: flex;\n flex-wrap: wrap;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n .alert__tag {\n height: 24px;\n display: flex;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n border: 1px solid var(--nile-colors-neutral-400);\n background: var(--nile-colors-white-base);\n }\n\n .alert__tag-content {\n border-left: 1px solid var(--nile-colors-neutral-400);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-sm, var(--ng-spacing-sm));\n\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-display));\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-600));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .alert__tag-image {\n height: 24px;\n width: 24px;\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 }\n\n .alert__prefix-img {\n height: 24px;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n }\n\n .alert--no-content{\n align-items:center ;\n }\n\n [hidden] {\n display: none;\n }\n"]))));}};});
1
+ System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,a;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",a=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: contents;\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 /* For better DX, we'll reset the margin here so the base part can inherit it */\n margin: var(--nile-spacing-none);\n }\n\n .alert {\n max-width: 100%;\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: flex-start;\n border: solid 2px;\n border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n margin: inherit;\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n width: max-content;\n min-width: 400px;\n }\n\n .alert:not(.alert--has-icon) .alert__icon,\n .alert:not(.alert--closable) .alert__close-button {\n display: none;\n }\n\n .alert__prefix-icon-container {\n background-color: var(--nile-colors-red-500);\n border-radius: var(--nile-radius-sm);\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-1);\n }\n\n .alert--success {\n border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-success, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--success .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-success, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--info {\n border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-info, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--info .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-info, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--warning {\n border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-warning, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--warning .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-warning, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--error {\n border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-error, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--error .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-error, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--gray {\n border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-gray, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--gray .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-gray, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--black {\n border: 1px solid var(--nile-toast-color-border-black);\n background: var(--nile-toast-color-background-black);\n box-shadow: var(--nile-toast-color-box-black);\n }\n\n .alert--black .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-black);\n }\n\n .alert__message {\n flex: 1 1 auto;\n overflow: hidden;\n display: flex;\n align-items: center;\n flex-direction: column;\n align-items: flex-start;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-display));\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-dark-900);\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .alert__message--title {\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semiboldibold));\n color:var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n }\n\n .alert__message--content {\n font-weight:var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .alert__message--content-only {\n }\n\n .alert__close-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .alert__tags {\n display: flex;\n flex-wrap: wrap;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n .alert__tag {\n height: 24px;\n display: flex;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n border: 1px solid var(--nile-colors-neutral-400);\n background: var(--nile-colors-white-base);\n }\n\n .alert__tag-content {\n border-left: 1px solid var(--nile-colors-neutral-400);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-sm, var(--ng-spacing-sm));\n\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-display));\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-semibold));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .alert__tag-image {\n height: 24px;\n width: 24px;\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 }\n\n .alert__prefix-img {\n height: 24px;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n }\n\n .alert--no-content{\n align-items:center ;\n }\n\n [hidden] {\n display: none;\n }\n"]))));}};});
2
2
  //# sourceMappingURL=nile-toast.css.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-toast.css.cjs.js","sources":["../../../src/nile-toast/nile-toast.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 * Toast CSS\n */\nexport const styles = css`\n :host {\n display: contents;\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 /* For better DX, we'll reset the margin here so the base part can inherit it */\n margin: var(--nile-spacing-none);\n }\n\n .alert {\n max-width: 100%;\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: flex-start;\n border: solid 2px;\n border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n margin: inherit;\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n width: max-content;\n min-width: 400px;\n }\n\n .alert:not(.alert--has-icon) .alert__icon,\n .alert:not(.alert--closable) .alert__close-button {\n display: none;\n }\n\n .alert__prefix-icon-container {\n background-color: var(--nile-colors-red-500);\n border-radius: var(--nile-radius-sm);\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-1);\n }\n\n .alert--success {\n border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-success, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--success .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-success, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--info {\n border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-info, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--info .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-info, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--warning {\n border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-warning, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--warning .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-warning, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--error {\n border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-error, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--error .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-error, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--gray {\n border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-gray, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--gray .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-gray, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--black {\n border: 1px solid var(--nile-toast-color-border-black);\n background: var(--nile-toast-color-background-black);\n box-shadow: var(--nile-toast-color-box-black);\n }\n\n .alert--black .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-black);\n }\n\n .alert__message {\n flex: 1 1 auto;\n overflow: hidden;\n display: flex;\n align-items: center;\n flex-direction: column;\n align-items: flex-start;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-display));\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-dark-900);\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .alert__message--title {\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n color:var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n }\n\n .alert__message--content {\n font-weight:var(--nile-font-weight-regular, var(--ng-font-weight-400));\n color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .alert__message--content-only {\n }\n\n .alert__close-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .alert__tags {\n display: flex;\n flex-wrap: wrap;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n .alert__tag {\n height: 24px;\n display: flex;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n border: 1px solid var(--nile-colors-neutral-400);\n background: var(--nile-colors-white-base);\n }\n\n .alert__tag-content {\n border-left: 1px solid var(--nile-colors-neutral-400);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-sm, var(--ng-spacing-sm));\n\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-display));\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-600));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .alert__tag-image {\n height: 24px;\n width: 24px;\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 }\n\n .alert__prefix-img {\n height: 24px;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n }\n\n .alert--no-content{\n align-items:center ;\n }\n\n [hidden] {\n display: none;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-toast.css.cjs.js","sources":["../../../src/nile-toast/nile-toast.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 * Toast CSS\n */\nexport const styles = css`\n :host {\n display: contents;\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 /* For better DX, we'll reset the margin here so the base part can inherit it */\n margin: var(--nile-spacing-none);\n }\n\n .alert {\n max-width: 100%;\n box-sizing: border-box;\n position: relative;\n display: flex;\n align-items: flex-start;\n border: solid 2px;\n border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n margin: inherit;\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n width: max-content;\n min-width: 400px;\n }\n\n .alert:not(.alert--has-icon) .alert__icon,\n .alert:not(.alert--closable) .alert__close-button {\n display: none;\n }\n\n .alert__prefix-icon-container {\n background-color: var(--nile-colors-red-500);\n border-radius: var(--nile-radius-sm);\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--nile-type-scale-1);\n }\n\n .alert--success {\n border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-success, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--success .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-success, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--info {\n border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-info, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--info .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-info, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--warning {\n border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-warning, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--warning .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-warning, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--error {\n border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-error, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--error .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-error, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--gray {\n border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-secondary-alt));\n background: var(--nile-toast-color-background-gray, var(--ng-colors-bg-primary-alt));\n box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n }\n\n .alert--gray .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-gray, var(--ng-colors-bg-primary-alt));\n }\n\n .alert--black {\n border: 1px solid var(--nile-toast-color-border-black);\n background: var(--nile-toast-color-background-black);\n box-shadow: var(--nile-toast-color-box-black);\n }\n\n .alert--black .alert__prefix-icon-container {\n background: var(--nile-toast-color-icon-background-color-black);\n }\n\n .alert__message {\n flex: 1 1 auto;\n overflow: hidden;\n display: flex;\n align-items: center;\n flex-direction: column;\n align-items: flex-start;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-display));\n font-size: var(--nile-type-scale-3);\n color: var(--nile-colors-dark-900);\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .alert__message--title {\n font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semiboldibold));\n color:var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n }\n\n .alert__message--content {\n font-weight:var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .alert__message--content-only {\n }\n\n .alert__close-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n }\n\n .alert__tags {\n display: flex;\n flex-wrap: wrap;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n\n .alert__tag {\n height: 24px;\n display: flex;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n border: 1px solid var(--nile-colors-neutral-400);\n background: var(--nile-colors-white-base);\n }\n\n .alert__tag-content {\n border-left: 1px solid var(--nile-colors-neutral-400);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-sm, var(--ng-spacing-sm));\n\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-display));\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-semibold));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .alert__tag-image {\n height: 24px;\n width: 24px;\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 }\n\n .alert__prefix-img {\n height: 24px;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n }\n\n .alert--no-content{\n align-items:center ;\n }\n\n [hidden] {\n display: none;\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
@@ -119,12 +119,12 @@ import{css as r}from"lit";const a=r`
119
119
  }
120
120
 
121
121
  .alert__message--title {
122
- font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));
122
+ font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semiboldibold));
123
123
  color:var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
124
124
  }
125
125
 
126
126
  .alert__message--content {
127
- font-weight:var(--nile-font-weight-regular, var(--ng-font-weight-400));
127
+ font-weight:var(--nile-font-weight-regular, var(--ng-font-weight-regular));
128
128
  color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
129
129
  }
130
130
 
@@ -163,7 +163,7 @@ import{css as r}from"lit";const a=r`
163
163
  font-family: var(--nile-font-family-serif, var(--ng-font-family-display));
164
164
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
165
165
  font-style: normal;
166
- font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));
166
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
167
167
  line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
168
168
  letter-spacing: 0.2px;
169
169
  }
@@ -1,2 +1,2 @@
1
- System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,t;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",t=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: block;\n width: 100%;\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 .toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 48px;\n box-sizing: border-box;\n min-height: 64px;\n line-height: var(--nile-toolbar-line-height, var(--ng-line-height-text-xl));\n font-weight: var(--nile-toolbar-font-weight, var(--ng-font-weight-500));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-size: var(--nile-toolbar-font-size, var(--ng-font-size-text-xl));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n /* color: var(--nile-toolbar-text-color, var(--ng-color-base-black)); */ // TODO: Need to be tokenized in future.\n }\n"]))));}};});
1
+ System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,t;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",t=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n display: block;\n width: 100%;\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 .toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 48px;\n box-sizing: border-box;\n min-height: 64px;\n line-height: var(--nile-toolbar-line-height, var(--ng-line-height-text-xl));\n font-weight: var(--nile-toolbar-font-weight, var(--ng-font-weight-medium));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-size: var(--nile-toolbar-font-size, var(--ng-font-size-text-xl));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n /* color: var(--nile-toolbar-text-color, var(--ng-color-base-black)); */ // TODO: Need to be tokenized in future.\n }\n"]))));}};});
2
2
  //# sourceMappingURL=nile-toolbar.css.cjs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-toolbar.css.cjs.js","sources":["../../../src/nile-toolbar/nile-toolbar.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 * Toolbar CSS\n */\nexport const styles = css`\n :host {\n display: block;\n width: 100%;\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 .toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 48px;\n box-sizing: border-box;\n min-height: 64px;\n line-height: var(--nile-toolbar-line-height, var(--ng-line-height-text-xl));\n font-weight: var(--nile-toolbar-font-weight, var(--ng-font-weight-500));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-size: var(--nile-toolbar-font-size, var(--ng-font-size-text-xl));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n /* color: var(--nile-toolbar-text-color, var(--ng-color-base-black)); */ // TODO: Need to be tokenized in future.\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1
+ {"version":3,"file":"nile-toolbar.css.cjs.js","sources":["../../../src/nile-toolbar/nile-toolbar.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 * Toolbar CSS\n */\nexport const styles = css`\n :host {\n display: block;\n width: 100%;\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 .toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 48px;\n box-sizing: border-box;\n min-height: 64px;\n line-height: var(--nile-toolbar-line-height, var(--ng-line-height-text-xl));\n font-weight: var(--nile-toolbar-font-weight, var(--ng-font-weight-medium));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-size: var(--nile-toolbar-font-size, var(--ng-font-size-text-xl));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n /* color: var(--nile-toolbar-text-color, var(--ng-color-base-black)); */ // TODO: Need to be tokenized in future.\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
@@ -15,7 +15,7 @@ import{css as o}from"lit";const t=o`
15
15
  box-sizing: border-box;
16
16
  min-height: 64px;
17
17
  line-height: var(--nile-toolbar-line-height, var(--ng-line-height-text-xl));
18
- font-weight: var(--nile-toolbar-font-weight, var(--ng-font-weight-500));
18
+ font-weight: var(--nile-toolbar-font-weight, var(--ng-font-weight-medium));
19
19
  font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
20
20
  font-size: var(--nile-toolbar-font-size, var(--ng-font-size-text-xl));
21
21
  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
@@ -73,7 +73,7 @@ export const styles = css `
73
73
  gap:var(--nile-spacing-lg , var(--ng-spacing-lg));
74
74
  align-items: center;
75
75
  border-radius: inherit;
76
- font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-600));
76
+ font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-semibold));
77
77
  padding: var(--accordian-heading-padding);
78
78
  user-select: none;
79
79
  cursor: pointer;
@@ -1 +1 @@
1
- {"version":3,"file":"nile-accordion.css.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoIxB,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 * Detail CSS\n */\nexport const styles = css`\n\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 display: block;\n }\n\n .accordian {\n border-top:solid 1px var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));\n background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));\n overflow-anchor: none;\n line-height: var(--nile-line-height-inherit , var(--ng-line-height-text-sm));\n }\n\n .accordian--lg{\n --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n --accordian-heading-padding: var(--nile-spacing-xl , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));\n --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-xl , var(--ng-spacing-3xl));\n --accordion-font-family : var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n }\n\n .accordian--md{\n --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n --accordian-heading-padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-lg , var(--ng-spacing-lg));\n --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-type-scale-5 , var(--ng-spacing-3xl));\n --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n }\n\n .accordian--sm{\n --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n --accordian-heading-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg));\n --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));\n --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n }\n \n .accordian {\n font-size: var(--accordian-text-size);\n font-family: var(--accordion-font-family)\n }\n\n .accordian--disabled {\n opacity: 0.5;\n }\n\n .accordian__header {\n display: flex;\n gap:var(--nile-spacing-lg , var(--ng-spacing-lg));\n align-items: center;\n border-radius: inherit;\n font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-600));\n padding: var(--accordian-heading-padding);\n user-select: none;\n cursor: pointer;\n }\n\n .accordian__header--dark{\n background-color:var(--nile-colors-dark-200 , var(--ng-colors-bg-tertiary));\n }\n\n .accordian__header--arrow-left{\n flex-direction: row-reverse;\n }\n\n .accordian__header:focus {\n outline: none;\n }\n\n .accordian__header:focus-visible {\n outline: solid 3px var(--nile-colors-blue-500);\n box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-shadow-xs));\n outline-offset: calc(1px + 1px);\n }\n\n .accordian--disabled .accordian__header {\n cursor: not-allowed;\n }\n\n .accordian--disabled .accordian__header:focus-visible {\n outline: none;\n box-shadow: none;\n }\n\n .accordian__summary {\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n }\n\n .accordian__summary-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n }\n\n .accordian--open .accordian__summary-icon {\n rotate: 90deg;\n }\n\n .accordian--open slot[name='expand-icon'],\n .accordian:not(.accordian--open) slot[name='collapse-icon'] {\n display: none;\n }\n\n .accordian__body {\n overflow: hidden;\n }\n\n .accordian__content {\n display: block;\n padding: var(--accordian-content-padding);\n }\n\n .accordian__content--arrow-left{\n margin-left: var(--nile-spacing-4-x , var(--ng-spacing-3xl-alt)); \n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-accordion.css.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoIxB,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 * Detail CSS\n */\nexport const styles = css`\n\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 display: block;\n }\n\n .accordian {\n border-top:solid 1px var(--nile-colors-neutral-500 , var(--ng-colors-border-primary));\n background-color: var(--nile-colors-white-base , var(--ng-colors-bg-primary));\n overflow-anchor: none;\n line-height: var(--nile-line-height-inherit , var(--ng-line-height-text-sm));\n }\n\n .accordian--lg{\n --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n --accordian-heading-padding: var(--nile-spacing-xl , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));\n --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-xl , var(--ng-spacing-3xl));\n --accordion-font-family : var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n }\n\n .accordian--md{\n --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n --accordian-heading-padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-lg , var(--ng-spacing-lg));\n --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-type-scale-5 , var(--ng-spacing-3xl));\n --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n }\n\n .accordian--sm{\n --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));\n --accordian-heading-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg));\n --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-xl)) var(--nile-spacing-lg , var(--ng-spacing-lg));\n --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n }\n \n .accordian {\n font-size: var(--accordian-text-size);\n font-family: var(--accordion-font-family)\n }\n\n .accordian--disabled {\n opacity: 0.5;\n }\n\n .accordian__header {\n display: flex;\n gap:var(--nile-spacing-lg , var(--ng-spacing-lg));\n align-items: center;\n border-radius: inherit;\n font-weight: var(--nile-font-weight-medium , var(--ng-font-weight-semibold));\n padding: var(--accordian-heading-padding);\n user-select: none;\n cursor: pointer;\n }\n\n .accordian__header--dark{\n background-color:var(--nile-colors-dark-200 , var(--ng-colors-bg-tertiary));\n }\n\n .accordian__header--arrow-left{\n flex-direction: row-reverse;\n }\n\n .accordian__header:focus {\n outline: none;\n }\n\n .accordian__header:focus-visible {\n outline: solid 3px var(--nile-colors-blue-500);\n box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-shadow-xs));\n outline-offset: calc(1px + 1px);\n }\n\n .accordian--disabled .accordian__header {\n cursor: not-allowed;\n }\n\n .accordian--disabled .accordian__header:focus-visible {\n outline: none;\n box-shadow: none;\n }\n\n .accordian__summary {\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n }\n\n .accordian__summary-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms rotate ease;\n }\n\n .accordian--open .accordian__summary-icon {\n rotate: 90deg;\n }\n\n .accordian--open slot[name='expand-icon'],\n .accordian:not(.accordian--open) slot[name='collapse-icon'] {\n display: none;\n }\n\n .accordian__body {\n overflow: hidden;\n }\n\n .accordian__content {\n display: block;\n padding: var(--accordian-content-padding);\n }\n\n .accordian__content--arrow-left{\n margin-left: var(--nile-spacing-4-x , var(--ng-spacing-3xl-alt)); \n }\n`;\n\nexport default [styles];\n"]}
@@ -20,7 +20,7 @@ export const styles = css `
20
20
  font-family: var(--nile-font-family-serif , var(--ng-font-family-body));
21
21
  font-style: normal;
22
22
  aspect-ratio: 1 / 1;
23
- font-weight: var(--nile-font-weight-semi-bold , var(--ng-font-weight-600));
23
+ font-weight: var(--nile-font-weight-semi-bold , var(--ng-font-weight-semibold));
24
24
  color: var(--nile-colors-white-base , var(--ng-colors-text-quaternary-500));
25
25
  border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));
26
26
  text-transform: uppercase;
@@ -1 +1 @@
1
- {"version":3,"file":"nile-avatar.css.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGxB,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 * Avatar CSS\n */\nexport const styles = css`\n :host {\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 .text__avatar {\n box-sizing: border-box;\n font-family: var(--nile-font-family-serif , var(--ng-font-family-body));\n font-style: normal;\n aspect-ratio: 1 / 1;\n font-weight: var(--nile-font-weight-semi-bold , var(--ng-font-weight-600));\n color: var(--nile-colors-white-base , var(--ng-colors-text-quaternary-500));\n border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n }\n\n .avatar {\n box-sizing: border-box;\n border: 0.5px solid var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary));\n border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));\n background-position: 50% 50%;\n background-size: cover;\n background-repeat: no-repeat;\n overflow: hidden;\n }\n\n .avatar__xs {\n width: var(--nile-type-scale-4, var(--ng-height-24px));\n height: var(--nile-type-scale-4), var(--ng-height-24px);\n font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-xs));\n line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-xs));\n }\n \n .avatar__small {\n width: var(--nile-type-scale-4, var(--ng-height-32px));\n height: var(--nile-type-scale-4, var(--ng-height-32px));\n font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-sm));\n line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-sm));\n }\n\n .avatar__medium {\n width: var(--nile-spacing-3-x, var(--ng-height-40px));\n height: var(--nile-spacing-3-x, var(--ng-height-40px));\n font-size: var(--nile-spacing-2-x, var(--ng-font-size-text-md));\n line-height: var(--nile-type-scale-5, var(--ng-line-height-text-md));\n }\n\n .avatar__large {\n width: var(--nile-spacing-4xl, var(--ng-height-48px));\n height: var(--nile-spacing-4xl, var(--ng-height-48px));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));\n line-height: var(--nile-type-scale-6, var(--ng-line-height-text-lg));\n }\n\n .avatar__extralarge {\n height: var(--nile-spacing-5xl, 56px);\n width: var(--nile-spacing-5xl, 56px);\n font-size: var(--nile-spacing-xl, var(--ng-font-size-text-xl));\n line-height: var(--nile-spacing-3xl , var(--ng-line-height-text-xl));\n }\n\n .avatar__2xl {\n height: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));\n width: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));\n font-size: var(--nile-spacing-3xl, var(--ng-line-height-display-xs));\n line-height: var(--nile-spacing-4xl, var(--ng-line-height-display-xs));\n }\n\n .avatar__rounded {\n border-radius: 50%;\n }\n\n .variant__orange {\n background:var(--nile-avatar-background-color-orange , var(--ng-colors-bg-tertiary));\n }\n\n .variant__pink {\n background: var(--nile-avatar-background-color-pink, var(--ng-colors-bg-tertiary));\n }\n\n .variant__blue {\n background: var(--nile-avatar-background-color-blue, var(--ng-colors-bg-tertiary));\n }\n\n .variant__light_blue {\n background: var(--nile-avatar-background-color-lightblue , var(--ng-colors-bg-tertiary));\n }\n\n .variant__green {\n background: var(--nile-avatar-background-color-green, var(--ng-colors-bg-tertiary));\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-avatar.css.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGxB,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 * Avatar CSS\n */\nexport const styles = css`\n :host {\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 .text__avatar {\n box-sizing: border-box;\n font-family: var(--nile-font-family-serif , var(--ng-font-family-body));\n font-style: normal;\n aspect-ratio: 1 / 1;\n font-weight: var(--nile-font-weight-semi-bold , var(--ng-font-weight-semibold));\n color: var(--nile-colors-white-base , var(--ng-colors-text-quaternary-500));\n border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));\n text-transform: uppercase;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n }\n\n .avatar {\n box-sizing: border-box;\n border: 0.5px solid var(--nile-colors-neutral-500 , var(--ng-colors-border-secondary));\n border-radius: var(--nile-radius-radius-xs , var(--ng-radius-xs));\n background-position: 50% 50%;\n background-size: cover;\n background-repeat: no-repeat;\n overflow: hidden;\n }\n\n .avatar__xs {\n width: var(--nile-type-scale-4, var(--ng-height-24px));\n height: var(--nile-type-scale-4), var(--ng-height-24px);\n font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-xs));\n line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-xs));\n }\n \n .avatar__small {\n width: var(--nile-type-scale-4, var(--ng-height-32px));\n height: var(--nile-type-scale-4, var(--ng-height-32px));\n font-size: var(--nile-font-size-6-7, var(--ng-font-size-text-sm));\n line-height: var(--nile-font-size-6-7, var(--ng-line-height-text-sm));\n }\n\n .avatar__medium {\n width: var(--nile-spacing-3-x, var(--ng-height-40px));\n height: var(--nile-spacing-3-x, var(--ng-height-40px));\n font-size: var(--nile-spacing-2-x, var(--ng-font-size-text-md));\n line-height: var(--nile-type-scale-5, var(--ng-line-height-text-md));\n }\n\n .avatar__large {\n width: var(--nile-spacing-4xl, var(--ng-height-48px));\n height: var(--nile-spacing-4xl, var(--ng-height-48px));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-lg));\n line-height: var(--nile-type-scale-6, var(--ng-line-height-text-lg));\n }\n\n .avatar__extralarge {\n height: var(--nile-spacing-5xl, 56px);\n width: var(--nile-spacing-5xl, 56px);\n font-size: var(--nile-spacing-xl, var(--ng-font-size-text-xl));\n line-height: var(--nile-spacing-3xl , var(--ng-line-height-text-xl));\n }\n\n .avatar__2xl {\n height: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));\n width: var(--nile-spacing-spacing-7xl, var(--ng-spacing-7xl));\n font-size: var(--nile-spacing-3xl, var(--ng-line-height-display-xs));\n line-height: var(--nile-spacing-4xl, var(--ng-line-height-display-xs));\n }\n\n .avatar__rounded {\n border-radius: 50%;\n }\n\n .variant__orange {\n background:var(--nile-avatar-background-color-orange , var(--ng-colors-bg-tertiary));\n }\n\n .variant__pink {\n background: var(--nile-avatar-background-color-pink, var(--ng-colors-bg-tertiary));\n }\n\n .variant__blue {\n background: var(--nile-avatar-background-color-blue, var(--ng-colors-bg-tertiary));\n }\n\n .variant__light_blue {\n background: var(--nile-avatar-background-color-lightblue , var(--ng-colors-bg-tertiary));\n }\n\n .variant__green {\n background: var(--nile-avatar-background-color-green, var(--ng-colors-bg-tertiary));\n }\n`;\n\nexport default [styles];\n"]}
@@ -16,7 +16,7 @@ export const styles = css `
16
16
  font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
17
17
  font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));
18
18
  font-style: normal;
19
- font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));
19
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
20
20
  line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
21
21
  letter-spacing: 0.2px;
22
22
  -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
@@ -1 +1 @@
1
- {"version":3,"file":"nile-breadcrumb-item.css.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb-item/nile-breadcrumb-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCxB,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 * Breadcrumb-item CSS\n */\nexport const styles = css`\n :host {\n display: flex;\n align-items: center;\n text-align: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px; \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 .nile-breadcrumb-item__arrow {\n margin: 0 var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .nile-breadcrumb-item__arrow-hidden {\n display: none;\n }\n\n .nile-breadcrumb-item__slot-text {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));\n }\n\n .nile-breadcrumb-item__slot-text:hover {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-hover));\n cursor: pointer;\n }\n\n .nile-breadcrumb-item__last-slot-text {\n color: var(--nile-breadcrumb-color, var(--ng-colors-text-brand-secondary-700));\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-breadcrumb-item.css.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb-item/nile-breadcrumb-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCxB,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 * Breadcrumb-item CSS\n */\nexport const styles = css`\n :host {\n display: flex;\n align-items: center;\n text-align: center;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, 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 -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 .nile-breadcrumb-item__arrow {\n margin: 0 var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n .nile-breadcrumb-item__arrow-hidden {\n display: none;\n }\n\n .nile-breadcrumb-item__slot-text {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));\n }\n\n .nile-breadcrumb-item__slot-text:hover {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-hover));\n cursor: pointer;\n }\n\n .nile-breadcrumb-item__last-slot-text {\n color: var(--nile-breadcrumb-color, var(--ng-colors-text-brand-secondary-700));\n }\n`;\n\nexport default [styles];\n"]}
@@ -39,7 +39,7 @@ export const styles = css `
39
39
  var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;
40
40
  cursor: inherit;
41
41
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
42
- font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));
42
+ font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
43
43
  border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));
44
44
  padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));
45
45
  gap: var(--nile-spacing-5px, var(--ng-spacing-xs));
@@ -1 +1 @@
1
- {"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwtBxB,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 * Button CSS\n */\nexport const styles = css`\n :host {\n display: inline-block;\n position: relative;\n width: auto;\n cursor: pointer;\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 .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-style: solid;\n border-width: var(--nile-border-size-1, var(--ng-border-width-1));\n font-style: normal;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n text-align: center;\n letter-spacing: 0.2px;\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n transition: 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)) border,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n cursor: inherit;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));\n padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));\n gap: var(--nile-spacing-5px, var(--ng-spacing-xs));\n line-height: var(--nile-type-scale-6, var(--ng-spacing-5));\n box-sizing: border-box;\n height: var(--nile-height-40px, var(--ng-height-40px));\n }\n\n .button::-moz-focus-inner {\n border: 0;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n outline: var(--nile-outline-5px, --ng-outline-5px) auto var(--ng-colors-bg-brand-solid, -webkit-focus-ring-color);\n outline-offset: var(--ng-outline-2px, --ng-outline-4px);\n }\n\n .button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .button--disabled * {\n pointer-events: none;\n }\n\n /* Primary */\n .button--standard.button--primary {\n background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-color: var(--nile-colors-primary-600, var(--ng-primary-standard)); \n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n box-shadow: var(\n --nile-textarea-standard-disabled-box-shadow,\n var(--ng-shadow-xs-skeuomorphic)\n ); //TODO: fix\n }\n\n .button--standard.button--primary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .button--standard.button--primary:active:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));\n border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .button--standard.button--primary.button--disabled {\n background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .button--standard.button--primary.button--disabled:hover,\n .button--standard.button--primary.button--disabled:active {\n background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n }\n\n .button--standard.button--primary:focus-visible:not(.button--disabled) {\n background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n }\n\n /* Secondary */\n .button--standard.button--secondary {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n }\n\n .button--standard.button--secondary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .button--standard.button--secondary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n }\n\n .button--standard.button--secondary.button--disabled {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary.button--disabled:hover,\n .button--standard.button--secondary.button--disabled:active {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary:focus-visible:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n }\n\n /* Tertiary */\n .button--standard.button--tertiary {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .button--standard.button--tertiary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n }\n\n .button--standard.button--tertiary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .button--standard.button--tertiary.button--disabled,\n .button--standard.button--tertiary.button--disabled:hover,\n .button--standard.button--tertiary.button--disabled:active {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .button--standard.button--tertiary:focus-visible:not(.button--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring));\n }\n\n /* ghost */\n .button--standard.button--ghost {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary)) ;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .button--standard.button--ghost:hover:not(.button--disabled) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n }\n\n .button--standard.button--ghost:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .button--standard.button--ghost.button--disabled,\n .button--standard.button--ghost.button--disabled:hover,\n .button--standard.button--ghost.button--disabled:active {\n border-color: var(--nile-border-color-transparent,var(--ng-colors-bg-primary));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n color: var(--nile-colors-neutral-500,var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n box-shadow: none;\n }\n\n \n\n /* caution */\n .button--standard.button--caution {\n background-color: var(--nile-colors-red-500);\n border-color: var(--nile-colors-red-500);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--caution:hover:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--caution.button--disabled,\n .button--standard.button--caution.button--disabled:hover,\n .button--standard.button--caution.button--disabled:active {\n background-color: var(--nile-colors-neutral-500);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-neutral-400);\n }\n\n /* destructive */\n .button--standard.button--destructive {\n background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n border-color: var(--nile-colors-red-500, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n }\n\n .button--standard.button--destructive:hover:not(.button--disabled) {\n background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));\n border-color: var(--nile-colors-red-700, var(--ng-primary-standard));\n box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n }\n\n .button--standard.button--destructive:active:not(.button--disabled) {\n background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n border-color: var(--nile-colors-red-500, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n border-color: var(--nile-colors-red-500, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))\n }\n\n .button--standard.button--destructive.button--disabled {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .button--standard.button--destructive.button--disabled:active {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n }\n\n .button--standard.button--destructive.button--disabled:hover {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n }\n\n /* secondary-Grey */\n .button--standard.button--secondary-grey {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-primary-900);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-100);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-grey:active:not(.button--disabled) {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-primary-900);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n }\n\n .button--standard.button--secondary-grey.button--disabled {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary-grey.button--disabled:hover,\n .button--standard.button--secondary-grey.button--disabled:active {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n /* secondary-blue */\n .button--standard.button--secondary-blue {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-primary-500);\n color: var(--nile-colors-primary-700);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n background-color: var(--nile-colors-blue-100);\n border-color: var(--nile-colors-primary-500);\n color: var(--nile-colors-primary-700);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-blue:active:not(.button--disabled) {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-primary-500);\n color: var(--nile-colors-primary-700);\n box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n 0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n }\n\n .button--standard.button--secondary-blue.button--disabled {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary-blue.button--disabled:hover,\n .button--standard.button--secondary-blue.button--disabled:active {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n /* Primary Variant - Nile Icon Fill */\n .button--standard.button--primary ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon)) !important;\n }\n .button--standard.button--primary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--primary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;\n }\n .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;\n }\n\n /* Secondary Variant */\n .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n }\n .button--standard.button--secondary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--secondary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n }\n .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !important;\n }\n\n /* Tertiary Variant */\n .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n }\n .button--standard.button--tertiary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--tertiary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n }\n .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-quaternary-400)) !important;\n }\n\n /* Ghost Variant */\n .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--ghost:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--ghost:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n }\n\n /* Caution Variant */\n .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base) !important;\n }\n .button--standard.button--caution:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base) !important;\n }\n .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-400) !important;\n }\n\n /* destructive */\n .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n }\n .button--standard.button--destructive:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n }\n .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n }\n\n /*\n * Outline buttons\n */\n\n .button--outline {\n background: none;\n border: solid 2px;\n }\n\n /* Default */\n .button--outline.button--secondary {\n border-color: var(--nile-colors-neutral-300);\n color: var(--nile-colors-neutral-700);\n }\n\n .button--outline.button--secondary:hover:not(.button--disabled),\n .button--outline.button--secondary.button--checked:not(.button--disabled) {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--secondary:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Primary */\n .button--outline.button--primary {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-primary-600);\n }\n\n .button--outline.button--primary:hover:not(.button--disabled),\n .button--outline.button--primary.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--primary:active:not(.button--disabled) {\n border-color: var(--nile-colors-primary-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Success */\n .button--outline.button--success {\n border-color: var(--nile-colors-green-600);\n color: var(--nile-colors-green-600);\n }\n\n .button--outline.button--success:hover:not(.button--disabled),\n .button--outline.button--success.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--success:active:not(.button--disabled) {\n border-color: var(--nile-colors-green-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Neutral */\n .button--outline.button--neutral {\n border-color: var(--nile-colors-neutral-600);\n color: var(--nile-colors-neutral-600);\n }\n\n .button--outline.button--neutral:hover:not(.button--disabled),\n .button--outline.button--neutral.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--neutral:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Warning */\n .button--outline.button--warning {\n border-color: var(--nile-colors-orange-600);\n color: var(--nile-colors-orange-600);\n }\n\n .button--outline.button--warning:hover:not(.button--disabled),\n .button--outline.button--warning.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--warning:active:not(.button--disabled) {\n border-color: var(--nile-colors-orange-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Danger */\n .button--outline.button--danger {\n border-color: var(--nile-colors-red-600);\n color: var(--nile-colors-red-600);\n }\n\n .button--outline.button--danger:hover:not(.button--disabled),\n .button--outline.button--danger.button--checked:not(.button--disabled) {\n background-color: var(--nile-colors-red-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n border-color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n /* destructive */\n .button--outline.button--destructive {\n border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n color: var(--nile-colors-red-700);\n box-shadow: 0px;\n }\n\n .button--outline.button--destructive:hover:not(.button--disabled),\n .button--outline.button--destructive.button--checked:not(.button--disabled) {\n border-color: var(--nile-colors-red-400);\n color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-red-100);\n }\n\n .button--outline.button--destructive:active:not(.button--disabled) {\n border-color: var(--nile-colors-red-400);\n color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-white-base);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n /* destructive - focus-visible */\n .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-white-base);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n /* secondary-grey */\n .button--outline.button--secondary-grey {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-grey:hover:not(.button--disabled),\n .button--outline.button--secondary-grey.button--checked:not(\n .button--disabled\n ) {\n color: var(--nile-colors-primary-900);\n background-color: var(--nile-colors-neutral-100);\n }\n\n .button--outline.button--secondary-grey:active:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n /* secondary-blue */\n .button--outline.button--secondary-blue {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-blue:hover:not(.button--disabled),\n .button--outline.button--secondary-blue.button--checked:not(\n .button--disabled\n ) {\n color: var(--nile-colors-primary-700);\n background-color: var(--nile-colors-blue-100);\n }\n\n .button--outline.button--secondary-blue:active:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n @media (forced-colors: active) {\n .button.button--outline.button--checked:not(.button--disabled) {\n outline: solid 2px transparent;\n }\n }\n\n /*\n * Pill modifier\n */\n\n .button--pill.button--small {\n border-radius: var(--nile-radius-2xl);\n }\n\n .button--pill.button--medium {\n border-radius: var(--nile-radius-2xl);\n }\n\n /*\n * Circle modifier\n */\n\n .button--circle {\n padding-left: var(--nile-spacing-none);\n padding-right: var(--nile-spacing-none);\n }\n\n .button--circle.button--small {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n }\n\n .button--circle.button--medium {\n width: 38px;\n height: 38px;\n border-radius: 50%;\n }\n\n .button--circle .button__prefix,\n .button--circle .button__suffix,\n .button--circle .button__caret {\n display: none;\n }\n\n /* Caret modifier */\n\n .button--caret .button__suffix {\n display: none;\n }\n\n .button--caret .button__caret {\n height: auto;\n }\n\n /*\n * Loading modifier\n */\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button--loading .button__prefix,\n .button--loading .button__label,\n .button--loading .button__suffix,\n .button--loading .button__caret {\n visibility: hidden;\n }\n\n .button--loading nile-spinner {\n --indicator-color: currentColor;\n position: absolute;\n font-size: var(--nile-type-scale-3);\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n /*\n * Badges\n */\n\n .button ::slotted(nile-badge) {\n position: absolute;\n top: 0;\n right: 0;\n translate: 50% -50%;\n pointer-events: none;\n }\n\n /* outline with no border */\n .button--outline.button--hideborder {\n border: 0px;\n }\n`;\n"]}
1
+ {"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwtBxB,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 * Button CSS\n */\nexport const styles = css`\n :host {\n display: inline-block;\n position: relative;\n width: auto;\n cursor: pointer;\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 .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-style: solid;\n border-width: var(--nile-border-size-1, var(--ng-border-width-1));\n font-style: normal;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n text-align: center;\n letter-spacing: 0.2px;\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n transition: 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)) border,\n var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n cursor: inherit;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));\n padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));\n gap: var(--nile-spacing-5px, var(--ng-spacing-xs));\n line-height: var(--nile-type-scale-6, var(--ng-spacing-5));\n box-sizing: border-box;\n height: var(--nile-height-40px, var(--ng-height-40px));\n }\n\n .button::-moz-focus-inner {\n border: 0;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n outline: var(--nile-outline-5px, --ng-outline-5px) auto var(--ng-colors-bg-brand-solid, -webkit-focus-ring-color);\n outline-offset: var(--ng-outline-2px, --ng-outline-4px);\n }\n\n .button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .button--disabled * {\n pointer-events: none;\n }\n\n /* Primary */\n .button--standard.button--primary {\n background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-color: var(--nile-colors-primary-600, var(--ng-primary-standard)); \n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n box-shadow: var(\n --nile-textarea-standard-disabled-box-shadow,\n var(--ng-shadow-xs-skeuomorphic)\n ); //TODO: fix\n }\n\n .button--standard.button--primary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .button--standard.button--primary:active:not(.button--disabled) {\n background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));\n border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .button--standard.button--primary.button--disabled {\n background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .button--standard.button--primary.button--disabled:hover,\n .button--standard.button--primary.button--disabled:active {\n background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n }\n\n .button--standard.button--primary:focus-visible:not(.button--disabled) {\n background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n }\n\n /* Secondary */\n .button--standard.button--secondary {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n }\n\n .button--standard.button--secondary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .button--standard.button--secondary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n }\n\n .button--standard.button--secondary.button--disabled {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary.button--disabled:hover,\n .button--standard.button--secondary.button--disabled:active {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary:focus-visible:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n }\n\n /* Tertiary */\n .button--standard.button--tertiary {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .button--standard.button--tertiary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n }\n\n .button--standard.button--tertiary:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .button--standard.button--tertiary.button--disabled,\n .button--standard.button--tertiary.button--disabled:hover,\n .button--standard.button--tertiary.button--disabled:active {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .button--standard.button--tertiary:focus-visible:not(.button--disabled) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring));\n }\n\n /* ghost */\n .button--standard.button--ghost {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary)) ;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .button--standard.button--ghost:hover:not(.button--disabled) {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n }\n\n .button--standard.button--ghost:active:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n }\n\n .button--standard.button--ghost.button--disabled,\n .button--standard.button--ghost.button--disabled:hover,\n .button--standard.button--ghost.button--disabled:active {\n border-color: var(--nile-border-color-transparent,var(--ng-colors-bg-primary));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n color: var(--nile-colors-neutral-500,var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n box-shadow: none;\n }\n\n \n\n /* caution */\n .button--standard.button--caution {\n background-color: var(--nile-colors-red-500);\n border-color: var(--nile-colors-red-500);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--caution:hover:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-red-700);\n border-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n .button--standard.button--caution.button--disabled,\n .button--standard.button--caution.button--disabled:hover,\n .button--standard.button--caution.button--disabled:active {\n background-color: var(--nile-colors-neutral-500);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-neutral-400);\n }\n\n /* destructive */\n .button--standard.button--destructive {\n background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n border-color: var(--nile-colors-red-500, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n }\n\n .button--standard.button--destructive:hover:not(.button--disabled) {\n background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));\n border-color: var(--nile-colors-red-700, var(--ng-primary-standard));\n box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n }\n\n .button--standard.button--destructive:active:not(.button--disabled) {\n background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n border-color: var(--nile-colors-red-500, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n border-color: var(--nile-colors-red-500, var(--ng-primary-standard));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))\n }\n\n .button--standard.button--destructive.button--disabled {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n box-shadow: none;\n }\n\n .button--standard.button--destructive.button--disabled:active {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n }\n\n .button--standard.button--destructive.button--disabled:hover {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n cursor: not-allowed;\n }\n\n /* secondary-Grey */\n .button--standard.button--secondary-grey {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-primary-900);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n background-color: var(--nile-colors-neutral-100);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-dark-900);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-grey:active:not(.button--disabled) {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-primary-900);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n }\n\n .button--standard.button--secondary-grey.button--disabled {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary-grey.button--disabled:hover,\n .button--standard.button--secondary-grey.button--disabled:active {\n background-color: var(--nile-colors-neutral-400);\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n /* secondary-blue */\n .button--standard.button--secondary-blue {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-primary-500);\n color: var(--nile-colors-primary-700);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n background-color: var(--nile-colors-blue-100);\n border-color: var(--nile-colors-primary-500);\n color: var(--nile-colors-primary-700);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n }\n\n .button--standard.button--secondary-blue:active:not(.button--disabled) {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-primary-500);\n color: var(--nile-colors-primary-700);\n box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n 0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n }\n\n .button--standard.button--secondary-blue.button--disabled {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n .button--standard.button--secondary-blue.button--disabled:hover,\n .button--standard.button--secondary-blue.button--disabled:active {\n background-color: var(--nile-colors-white-base);\n border-color: var(--nile-colors-neutral-400);\n color: var(--nile-colors-neutral-500);\n cursor: not-allowed;\n }\n\n /* Primary Variant - Nile Icon Fill */\n .button--standard.button--primary ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon)) !important;\n }\n .button--standard.button--primary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--primary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;\n }\n .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;\n }\n\n /* Secondary Variant */\n .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n }\n .button--standard.button--secondary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--secondary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n }\n .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !important;\n }\n\n /* Tertiary Variant */\n .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n }\n .button--standard.button--tertiary:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--tertiary:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n }\n .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-quaternary-400)) !important;\n }\n\n /* Ghost Variant */\n .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--ghost:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--ghost:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-dark-900) !important;\n }\n .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n }\n\n /* Caution Variant */\n .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base) !important;\n }\n .button--standard.button--caution:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base) !important;\n }\n .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-neutral-400) !important;\n }\n\n /* destructive */\n .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n }\n .button--standard.button--destructive:hover:not(.button--disabled)\n ::slotted(nile-icon:not([color])),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n }\n .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n }\n\n /*\n * Outline buttons\n */\n\n .button--outline {\n background: none;\n border: solid 2px;\n }\n\n /* Default */\n .button--outline.button--secondary {\n border-color: var(--nile-colors-neutral-300);\n color: var(--nile-colors-neutral-700);\n }\n\n .button--outline.button--secondary:hover:not(.button--disabled),\n .button--outline.button--secondary.button--checked:not(.button--disabled) {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--secondary:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Primary */\n .button--outline.button--primary {\n border-color: var(--nile-colors-primary-600);\n color: var(--nile-colors-primary-600);\n }\n\n .button--outline.button--primary:hover:not(.button--disabled),\n .button--outline.button--primary.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--primary:active:not(.button--disabled) {\n border-color: var(--nile-colors-primary-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Success */\n .button--outline.button--success {\n border-color: var(--nile-colors-green-600);\n color: var(--nile-colors-green-600);\n }\n\n .button--outline.button--success:hover:not(.button--disabled),\n .button--outline.button--success.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--success:active:not(.button--disabled) {\n border-color: var(--nile-colors-green-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Neutral */\n .button--outline.button--neutral {\n border-color: var(--nile-colors-neutral-600);\n color: var(--nile-colors-neutral-600);\n }\n\n .button--outline.button--neutral:hover:not(.button--disabled),\n .button--outline.button--neutral.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--neutral:active:not(.button--disabled) {\n border-color: var(--nile-colors-neutral-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Warning */\n .button--outline.button--warning {\n border-color: var(--nile-colors-orange-600);\n color: var(--nile-colors-orange-600);\n }\n\n .button--outline.button--warning:hover:not(.button--disabled),\n .button--outline.button--warning.button--checked:not(.button--disabled) {\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--warning:active:not(.button--disabled) {\n border-color: var(--nile-colors-orange-700);\n color: var(--nile-colors-white-base);\n }\n\n /* Danger */\n .button--outline.button--danger {\n border-color: var(--nile-colors-red-600);\n color: var(--nile-colors-red-600);\n }\n\n .button--outline.button--danger:hover:not(.button--disabled),\n .button--outline.button--danger.button--checked:not(.button--disabled) {\n background-color: var(--nile-colors-red-600);\n color: var(--nile-colors-white-base);\n }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n border-color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-red-700);\n color: var(--nile-colors-white-base);\n }\n\n /* destructive */\n .button--outline.button--destructive {\n border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n color: var(--nile-colors-red-700);\n box-shadow: 0px;\n }\n\n .button--outline.button--destructive:hover:not(.button--disabled),\n .button--outline.button--destructive.button--checked:not(.button--disabled) {\n border-color: var(--nile-colors-red-400);\n color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-red-100);\n }\n\n .button--outline.button--destructive:active:not(.button--disabled) {\n border-color: var(--nile-colors-red-400);\n color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-white-base);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n /* destructive - focus-visible */\n .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n color: var(--nile-colors-red-700);\n background-color: var(--nile-colors-white-base);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n 0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n }\n\n /* secondary-grey */\n .button--outline.button--secondary-grey {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-grey:hover:not(.button--disabled),\n .button--outline.button--secondary-grey.button--checked:not(\n .button--disabled\n ) {\n color: var(--nile-colors-primary-900);\n background-color: var(--nile-colors-neutral-100);\n }\n\n .button--outline.button--secondary-grey:active:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n /* secondary-blue */\n .button--outline.button--secondary-blue {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-blue:hover:not(.button--disabled),\n .button--outline.button--secondary-blue.button--checked:not(\n .button--disabled\n ) {\n color: var(--nile-colors-primary-700);\n background-color: var(--nile-colors-blue-100);\n }\n\n .button--outline.button--secondary-blue:active:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n box-shadow: 0px;\n }\n\n @media (forced-colors: active) {\n .button.button--outline.button--checked:not(.button--disabled) {\n outline: solid 2px transparent;\n }\n }\n\n /*\n * Pill modifier\n */\n\n .button--pill.button--small {\n border-radius: var(--nile-radius-2xl);\n }\n\n .button--pill.button--medium {\n border-radius: var(--nile-radius-2xl);\n }\n\n /*\n * Circle modifier\n */\n\n .button--circle {\n padding-left: var(--nile-spacing-none);\n padding-right: var(--nile-spacing-none);\n }\n\n .button--circle.button--small {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n }\n\n .button--circle.button--medium {\n width: 38px;\n height: 38px;\n border-radius: 50%;\n }\n\n .button--circle .button__prefix,\n .button--circle .button__suffix,\n .button--circle .button__caret {\n display: none;\n }\n\n /* Caret modifier */\n\n .button--caret .button__suffix {\n display: none;\n }\n\n .button--caret .button__caret {\n height: auto;\n }\n\n /*\n * Loading modifier\n */\n\n .button--loading {\n position: relative;\n cursor: wait;\n }\n\n .button--loading .button__prefix,\n .button--loading .button__label,\n .button--loading .button__suffix,\n .button--loading .button__caret {\n visibility: hidden;\n }\n\n .button--loading nile-spinner {\n --indicator-color: currentColor;\n position: absolute;\n font-size: var(--nile-type-scale-3);\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n /*\n * Badges\n */\n\n .button ::slotted(nile-badge) {\n position: absolute;\n top: 0;\n right: 0;\n translate: 50% -50%;\n pointer-events: none;\n }\n\n /* outline with no border */\n .button--outline.button--hideborder {\n border: 0px;\n }\n`;\n"]}
@@ -24,7 +24,7 @@ export const styles = css `
24
24
  border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
25
25
  cursor: pointer;
26
26
  border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));
27
- font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));
27
+ font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
28
28
  color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
29
29
  text-align: center;
30
30
  font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
@@ -1 +1 @@
1
- {"version":3,"file":"nile-button-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ExB,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 * ButtonToggle CSS\n */\nexport const styles = css`\n :host {\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 .nile-button-toggle {\n display: flex;\n padding: var(--nile-spacing-sm, var(--ng-spacing-md))\n var(--nile-spacing-xl, var(--ng-spacing-xl))\n var(--nile-spacing-sm, var(--ng-spacing-md))\n var(--nile-spacing-14px, var(--ng-spacing-xl));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n text-align: 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 line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n justify-content: center;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n height: 40px;\n box-sizing: border-box;\n }\n\n .nile-button-toggle:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle:active {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle__initial {\n border-radius: \n var(--nile-radius-radius-xs, var(--ng-radius-md)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-xs, var(--ng-radius-md));\n }\n\n .nile-button-toggle__end {\n border-radius: \n var(--nile-radius-radius-none, var(--ng-radius-none))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-none, var(--ng-radius-none));\n border-left: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__middle {\n border-width: 1px 1px 1px 0;\n border-style: solid;\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__active {\n background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__active:hover {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__disabled {\n cursor: not-allowed;\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-button-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ExB,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 * ButtonToggle CSS\n */\nexport const styles = css`\n :host {\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 .nile-button-toggle {\n display: flex;\n padding: var(--nile-spacing-sm, var(--ng-spacing-md))\n var(--nile-spacing-xl, var(--ng-spacing-xl))\n var(--nile-spacing-sm, var(--ng-spacing-md))\n var(--nile-spacing-14px, var(--ng-spacing-xl));\n border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n cursor: pointer;\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n text-align: 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 line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n justify-content: center;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n height: 40px;\n box-sizing: border-box;\n }\n\n .nile-button-toggle:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle:active {\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n }\n\n .nile-button-toggle__initial {\n border-radius: \n var(--nile-radius-radius-xs, var(--ng-radius-md)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-none, var(--ng-radius-none)) \n var(--nile-radius-radius-xs, var(--ng-radius-md));\n }\n\n .nile-button-toggle__end {\n border-radius: \n var(--nile-radius-radius-none, var(--ng-radius-none))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-xs, var(--ng-radius-md))\n var(--nile-radius-radius-none, var(--ng-radius-none));\n border-left: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__middle {\n border-width: 1px 1px 1px 0;\n border-style: solid;\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n }\n\n .nile-button-toggle__active {\n background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__active:hover {\n background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n }\n\n .nile-button-toggle__disabled {\n cursor: not-allowed;\n }\n`;\n\nexport default [styles];\n"]}
@@ -44,7 +44,7 @@ export const styles = css `
44
44
  justify-content: space-between;
45
45
  padding: var(--nile-spacing-22px, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));
46
46
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
47
- font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));
47
+ font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
48
48
  line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
49
49
  letter-spacing: 0.2px;
50
50
  }
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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-600));\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"]}
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"]}
@@ -23,7 +23,7 @@ export const styles = css `
23
23
  .checkbox {
24
24
  position: relative;
25
25
  display: inline-flex;
26
- font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
26
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
27
27
  color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
28
28
  vertical-align: middle;
29
29
  cursor: pointer;
@@ -174,7 +174,7 @@ export const styles = css `
174
174
  color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
175
175
  font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
176
176
  font-style: normal;
177
- font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
177
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
178
178
  letter-spacing: 0.2px;
179
179
  }
180
180
 
@@ -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-500));\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-500));\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"]}
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"]}
@@ -43,7 +43,7 @@ export const styles = css `
43
43
  font-family: var(--nile-font-family-serif,var( --ng-font-family-body));
44
44
  font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));
45
45
  font-style: normal;
46
- font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-500));
46
+ font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-medium));
47
47
  line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));
48
48
  letter-spacing: 0.2px;
49
49
  }
@@ -1 +1 @@
1
- {"version":3,"file":"nile-chip.css.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiKxB,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 * Chip 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 .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: var(--nile-spacing-lg,var( --ng-spacing-sm));\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-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-500));\n line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n margin-top: var(--nile-spacing-xxxxsmall);\n }\n\n .form-control--has-help-text.form-control--small .form-control__help-text {\n font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--large .form-control__help-text {\n font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xxxsmall);\n }\n\n :host {\n display: block;\n font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n }\n\n .nile-chip {\n padding: var(--nile-spacing-5px,var( --ng-spacing-md)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n display: flex;\n flex-wrap: wrap;\n width: 100%;\n overflow-x: hidden;\n gap : var(--nile-gap-unset, var(--ng-spacing-md));\n }\n\n nile-input::part(base) {\n padding: 0px !important;\n }\n\n .nile-chip--no-wrap {\n flex-wrap: nowrap;\n overflow-x: scroll;\n }\n\n .nile-chip::-webkit-scrollbar {\n height: 2px;\n }\n\n .nile-chip::-webkit-scrollbar-thumb {\n background: var(\n --nile-colors-primary-600\n );\n }\n\n .nile-chip--disabled {\n background: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n /* opacity: 0.5; */\n cursor: not-allowed;\n pointer-events: none;\n }\n\n :host([disabled]) nile-tag::part(base) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n :host([disabled]) .nile-chip {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n }\n\n .nile-chip:hover:not(.nile-chip--disabled) {\n background-color: var(--nile-colors-white-base,var(--ng-colors-bg-primary));\n box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n outline: var(--nile-border-width-1, var(--ng-border-width-1)) var(--nile-border-style-solid, var(--ng-border-style-solid)) var(--nile-outline-none, var(--ng-colors-border-brand))\n }\n\n .nile-chip.nile-chip--focused:not(.nile-chip--disabled) {\n background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-600,var(--ng-colors-border-brand));\n box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n }\n\n .nile-chip.nile-chip--disabled {\n background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .nile-chip.nile-chip--warning {\n border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n }\n\n .nile-chip.nile-chip--error {\n border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n }\n\n .nile-chip.nile-chip--success {\n border-color: var(--nile-colors-green-500);\n }\n\n .nile-chip__auto-complete {\n flex: 1;\n }\n .nile-chip__tags {\n margin: var(--nile-margin-size-rem-small);\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-chip.css.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiKxB,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 * Chip 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 .form-control .form-control__label {\n display: none;\n }\n\n .form-control .form-control__help-text {\n display: none;\n }\n\n /* Label */\n .form-control--has-label .form-control__label {\n display: inline-block;\n color: inherit;\n margin-bottom: var(--nile-spacing-lg,var( --ng-spacing-sm));\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-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-medium));\n line-height: var(--nile-type-scale-3,var( --ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n }\n\n /* Help text */\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n margin-top: var(--nile-spacing-xxxxsmall);\n }\n\n .form-control--has-help-text.form-control--small .form-control__help-text {\n font-size: var(--nile-spacing-xsmall,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--medium .form-control__help-text {\n font-size: var(--nile-font-size-rem-medium,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--large .form-control__help-text {\n font-size: var(--nile-font-size-rem-large,var(--ng-font-size-text-md));\n }\n\n .form-control--has-help-text.form-control--radio-group\n .form-control__help-text {\n margin-top: var(--nile-spacing-xxxsmall);\n }\n\n :host {\n display: block;\n font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n }\n\n .nile-chip {\n padding: var(--nile-spacing-5px,var( --ng-spacing-md)) var(--nile-spacing-10px,var(--ng-spacing-lg));\n background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n display: flex;\n flex-wrap: wrap;\n width: 100%;\n overflow-x: hidden;\n gap : var(--nile-gap-unset, var(--ng-spacing-md));\n }\n\n nile-input::part(base) {\n padding: 0px !important;\n }\n\n .nile-chip--no-wrap {\n flex-wrap: nowrap;\n overflow-x: scroll;\n }\n\n .nile-chip::-webkit-scrollbar {\n height: 2px;\n }\n\n .nile-chip::-webkit-scrollbar-thumb {\n background: var(\n --nile-colors-primary-600\n );\n }\n\n .nile-chip--disabled {\n background: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n /* opacity: 0.5; */\n cursor: not-allowed;\n pointer-events: none;\n }\n\n :host([disabled]) nile-tag::part(base) {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n :host([disabled]) .nile-chip {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n }\n\n .nile-chip:hover:not(.nile-chip--disabled) {\n background-color: var(--nile-colors-white-base,var(--ng-colors-bg-primary));\n box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n outline: var(--nile-border-width-1, var(--ng-border-width-1)) var(--nile-border-style-solid, var(--ng-border-style-solid)) var(--nile-outline-none, var(--ng-colors-border-brand))\n }\n\n .nile-chip.nile-chip--focused:not(.nile-chip--disabled) {\n background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n border-color: var(--nile-colors-primary-600,var(--ng-colors-border-brand));\n box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n }\n\n .nile-chip.nile-chip--disabled {\n background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .nile-chip.nile-chip--warning {\n border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n }\n\n .nile-chip.nile-chip--error {\n border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n }\n\n .nile-chip.nile-chip--success {\n border-color: var(--nile-colors-green-500);\n }\n\n .nile-chip__auto-complete {\n flex: 1;\n }\n .nile-chip__tags {\n margin: var(--nile-margin-size-rem-small);\n }\n`;\n\nexport default [styles];\n"]}
@@ -94,7 +94,7 @@ export const styles = css `
94
94
  font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
95
95
  font-size: var(--nile-spacing-xl, var(--ng-font-size-text-md));
96
96
  font-style: normal;
97
- font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));
97
+ font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
98
98
  line-height: var(--nile-type-scale-4, var(--ng-line-height-text-md));
99
99
  letter-spacing: 0.2px;
100
100
  display:block;
@@ -105,7 +105,7 @@ export const styles = css `
105
105
  font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
106
106
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
107
107
  font-style: normal;
108
- font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-400));
108
+ font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
109
109
  line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
110
110
  letter-spacing: 0.2px;
111
111
  display:block;