@aquera/nile-elements 1.9.0 → 1.9.2

package/dist/nile-calendar/nile-calendar.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var a,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){a=_lit.css;}],execute:function execute(){_export("s",n=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-block;\n  }\n  \n  .base {\n    background-color: var(\n      --nile-colors-white-base,\n      var(--ng-colors-bg-primary)\n    );\n    border-radius: var(--nile-radius-radius-sm, var(--ng-radius-2xl));\n    width: var(--nile-width-288px, var(--ng-width-312));\n    border: 1px solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary-alt));\n    box-shadow: var(\n      --nile-box-shadow-15,\n      0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01)\n    ); // Need to fix the token for this\n    border: var(\n      --nile-spacing-spacing-none,\n      1px solid var(--ng-colors-border-secondary-alt)\n    );\n    -webkit-font-smoothing: var(\n      --nile-webkit-font-smoothing,\n      var(--ng-webkit-font-smoothing)\n    );\n    -moz-osx-font-smoothing: var(\n      --nile-moz-osx-font-smoothing,\n      var(--ng-moz-osx-font-smoothing)\n    );\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))\n      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(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\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    display: grid;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-lg, var(--ng-spacing-lg))\n      var(--nile-spacing-lg, var(--ng-spacing-lg))\n      var(--nile-spacing-lg, var(--ng-spacing-lg));\n    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n    grid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .day_date,\n  .day_name {\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-style: normal;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    line-height: var(--nile-line-height-20px, var(--ng-line-height-text-sm));\n    text-align: center;\n    width: 100%;\n    height: var(--nile-width-32px, var(--ng-width-10));\n    display: grid;\n    place-items: center;\n  }\n\n  .day_name {\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n  }\n\n  .day_date {\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .current__date__dot {\n    background-color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-text-white)\n    );\n    position: absolute;\n    border-radius: 50%;\n    height: 5px;\n    width: 5px;\n    left: 25%;\n    top: 90%;\n  }\n\n  .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot {\n    background-color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-bg-brand-solid)\n    );\n  }\n\n  .day_date:hover {\n    background-color: var(\n      --nile-colors-neutral-100,\n      var(--ng-colors-bg-secondary-hover)\n    );\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    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-white));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .selected-date:hover,\n  .range-start:hover,\n  .range-end:hover,\n  .day_date.in-range:hover {\n    background: var(\n      --nile-colors-blue-500,\n      var(--ng-colors-bg-brand-solid-hover)\n    );\n  }\n\n  .range-start.in-range {\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs))\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-xs));\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\n  }\n\n  .range-end {\n    cursor: pointer;\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n      var(--nile-radius-radius-xs, var(--ng-radius-xs))\n      var(--nile-radius-radius-xs, var(--ng-radius-xs))\n      var(--nile-radius-radius-none, var(--ng-radius-none));\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    letter-spacing: 0.2px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\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-100, var(--ng-colors-bg-active));\n  }\n\n  .selected-date {\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-blue-400, 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))\n      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    align-items: flex-end;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    flex-wrap: nowrap;\n    width: 100%;\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-xl, var(--ng-spacing-lg));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-lg))\n      var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n      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  nile-tab::part(base) {\n    padding-bottom: 12px;\n    justify-content: center;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n  }\n\n  .calendar-switcher {\n    width: 100%;\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: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n  :host([disabled]) .unit-container {\n    user-select: none;\n    -webkit-user-select: none;\n    pointer-events: none;\n  }\n\n  .unit-group {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .duration-name {\n    display: flex;\n    align-items: center;\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\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    gap: 6px;\n  }\n\n  .duration__value {\n    display: grid;\n    place-items: center;\n    width: var(--nile-width-32px, var(--ng-width-10));\n    height: var(--nile-width-32px, var(--ng-width-10));\n    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    border: 1px solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n  }\n\n  .duration__value:hover {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));\n  }\n\n  .duration__value--selected {\n    background-color: var(\n      --nile-colors-blue-400,\n      var(--ng-colors-bg-brand-solid)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-white));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semi-bold)\n    );\n    border: 1px solid transparent;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .duration__value--selected:hover {\n    background: var(\n      --nile-colors-blue-500,\n      var(--ng-colors-bg-brand-solid-hover)\n    );\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semi-bold)\n    );\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\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    line-height: 0;\n    justify-content: space-between;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding: var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-none, var(--ng-spacing-xl))\n      var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .duration-input,\n  .time-input,\n  .manual-input {\n    width: 125px;\n  }\n\n  /* New Styles */\n\n  nile-dropdown[open] > span[slot='trigger'] .calendar-header__caret {\n    transform: rotate(180deg);\n  }\n\n  .calendar-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    font-feature-settings: 'liga' off, 'clig' off;\n  }\n\n  .calendar-header__center {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n  }\n\n  .calendar-header__trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: 2px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1;\n    background: transparent;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n  }\n\n  .calendar-header__caret {\n    width: 16px;\n    height: 16px;\n    transition: transform 0.2s ease;\n    transform-origin: center;\n  }\n\n  .calendar-menu {\n    max-height: 194px;\n    overflow-y: auto;\n    width: 100px;\n  }\n\n  .month-scroll-wrapper {\n    max-height: 196px;\n    overflow-y: auto;\n    width: 100px;\n    overflow-x: hidden;\n  }\n\n  .month-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .year-scroll-wrapper {\n    max-height: 196px;\n    overflow-y: auto;\n    width: 65px;\n    overflow-x: hidden;\n  }\n\n  .year-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .month-dropdown nile-menu-item::part(base) {\n    padding: 0px 12px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n  .year-dropdown nile-menu-item::part(base) {\n    padding: 0px 12px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n  nile-menu-item[selected] {\n    background: var(--nile-colors-primary-100);\n  }\n\n  nile-menu-item[selected]::part(base):hover {\n    background: var(--nile-colors-primary-100);\n    border-radius: 0px;\n  }\n\n  nile-icon[disabled] {\n    opacity: 0.4;\n    pointer-events: none;\n  }\n\n  .units-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    width: auto;\n  }\n\n  .calendar-input {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-3xl))\n      var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-3xl));\n    box-sizing: border-box;\n  }\n\n  .manual-input {\n    flex: 1;\n    min-width: 120px;\n  }\n\n  .date-input nile-input::part(base),\n  .time-input nile-input::part(base) {\n    width: 100%;\n  }\n\n  .manual-input-label {\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  }\n\n  .day_date.in-range:hover:not(.range-start):not(.range-end) {\n    background-color: var(\n      --nile-colors-neutral-400,\n      var(--ng-colors-bg-quaternary)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  nile-input.date-input::part(base),\n  .from-date {\n    width: var(--nile-width-150px, var(--ng-width-164));\n  }\n\n  nile-input.time-input::part(base),\n  .from-time {\n    width: var(--nile-width-99px, var(--ng-width-108));\n  }\n\n  .month-dropdown, .year-dropdown {\n    cursor: pointer;\n  }\n\n\n\n:host([disabled]) .calendar-header__month-navigation,\n:host([disabled]) .calendar-header__trigger,\n:host([disabled]) .day_date {\n  cursor: not-allowed;\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n\n\n:host([disabled]) .base {\n  background-color:  var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  cursor: not-allowed;\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) .calendar-container {\n  background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n:host([disabled]) .day_name {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) nile-input::part(form-control-label) {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n:host([disabled]) nile-select::part(form-control-label) {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n\n\n:host([disabled]) .calendar-switcher {\n  pointer-events: none;\n  opacity:var(--nile-opacity-50, var(--ng-opacity-50));\n}\n\n\n:host([disabled]) .day_date{\n  pointer-events:none;\n}\n:host([disabled]) .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot {\n  background-color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) .duration_unit{\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n}\n:host([disabled]) .duration__value {\n  cursor: not-allowed;\n}\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var a,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){a=_lit.css;}],execute:function execute(){_export("s",n=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-block;\n  }\n  \n  .base {\n    background-color: var(\n      --nile-colors-white-base,\n      var(--ng-colors-bg-primary)\n    );\n    border-radius: var(--nile-radius-radius-sm, var(--ng-radius-2xl));\n    width: var(--nile-width-288px, var(--ng-width-312));\n    border: 1px solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary-alt));\n    box-shadow: var(\n      --nile-box-shadow-15,\n      0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01)\n    ); // Need to fix the token for this\n    border: var(\n      --nile-spacing-spacing-none,\n      1px solid var(--ng-colors-border-secondary-alt)\n    );\n    -webkit-font-smoothing: var(\n      --nile-webkit-font-smoothing,\n      var(--ng-webkit-font-smoothing)\n    );\n    -moz-osx-font-smoothing: var(\n      --nile-moz-osx-font-smoothing,\n      var(--ng-moz-osx-font-smoothing)\n    );\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))\n      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(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\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    display: grid;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-lg, var(--ng-spacing-lg))\n      var(--nile-spacing-lg, var(--ng-spacing-lg))\n      var(--nile-spacing-lg, var(--ng-spacing-lg));\n    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n    grid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .day_date,\n  .day_name {\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-style: normal;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    line-height: var(--nile-line-height-20px, var(--ng-line-height-text-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    text-align: center;\n    width: 100%;\n    height: var(--nile-width-32px, var(--ng-width-10));\n    display: grid;\n    place-items: center;\n  }\n\n  .day_name {\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n  }\n\n  .day_date {\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .current__date__dot {\n    background-color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-text-white)\n    );\n    position: absolute;\n    border-radius: 50%;\n    height: 5px;\n    width: 5px;\n    left: 25%;\n    top: 90%;\n  }\n\n  .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot {\n    background-color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-bg-brand-solid)\n    );\n  }\n\n  .day_date:hover {\n    background-color: var(\n      --nile-colors-neutral-100,\n      var(--ng-colors-bg-secondary-hover)\n    );\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    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-white));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .selected-date:hover,\n  .range-start:hover,\n  .range-end:hover,\n  .day_date.in-range:hover {\n    background: var(\n      --nile-colors-blue-500,\n      var(--ng-colors-bg-brand-solid-hover)\n    );\n  }\n\n  .range-start.in-range {\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs))\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-xs));\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\n  }\n\n  .range-end {\n    cursor: pointer;\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n      var(--nile-radius-radius-xs, var(--ng-radius-xs))\n      var(--nile-radius-radius-xs, var(--ng-radius-xs))\n      var(--nile-radius-radius-none, var(--ng-radius-none));\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    letter-spacing: 0.2px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\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-100, var(--ng-colors-bg-active));\n  }\n\n  .selected-date {\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-blue-400, 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))\n      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    align-items: flex-end;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    flex-wrap: nowrap;\n    width: 100%;\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-xl, var(--ng-spacing-lg));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-lg))\n      var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n      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  nile-tab::part(base) {\n    padding-bottom: 12px;\n    justify-content: center;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n  }\n\n  .calendar-switcher {\n    width: 100%;\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: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n  :host([disabled]) .unit-container {\n    user-select: none;\n    -webkit-user-select: none;\n    pointer-events: none;\n  }\n\n  .unit-group {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .duration-name {\n    display: flex;\n    align-items: center;\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\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    gap: 6px;\n  }\n\n  .duration__value {\n    display: grid;\n    place-items: center;\n    width: var(--nile-width-32px, var(--ng-width-10));\n    height: var(--nile-width-32px, var(--ng-width-10));\n    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    border: 1px solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n  }\n\n  .duration__value:hover {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));\n  }\n\n  .duration__value--selected {\n    background-color: var(\n      --nile-colors-blue-400,\n      var(--ng-colors-bg-brand-solid)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-white));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semi-bold)\n    );\n    border: 1px solid transparent;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .duration__value--selected:hover {\n    background: var(\n      --nile-colors-blue-500,\n      var(--ng-colors-bg-brand-solid-hover)\n    );\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semi-bold)\n    );\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\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    line-height: 0;\n    justify-content: space-between;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding: var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-none, var(--ng-spacing-xl))\n      var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .duration-input,\n  .time-input,\n  .manual-input {\n    width: 125px;\n  }\n\n  .time-input::part(input),\n  .manual-input::part(input) {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md))\n      var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  /* New Styles */\n\n  nile-dropdown[open] > span[slot='trigger'] .calendar-header__caret {\n    transform: rotate(180deg);\n  }\n\n  .calendar-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    font-feature-settings: 'liga' off, 'clig' off;\n  }\n\n  .calendar-header__center {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n  }\n\n  .calendar-header__trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: 2px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1;\n    background: transparent;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n  }\n\n  .calendar-header__caret {\n    width: 16px;\n    height: 16px;\n    transition: transform 0.2s ease;\n    transform-origin: center;\n  }\n\n  .calendar-menu {\n    max-height: 194px;\n    overflow-y: auto;\n    width: 100px;\n  }\n\n  .month-scroll-wrapper {\n    max-height: 196px;\n    overflow-y: auto;\n    width: 100px;\n    overflow-x: hidden;\n  }\n\n  .month-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .year-scroll-wrapper {\n    max-height: 196px;\n    overflow-y: auto;\n    width: 65px;\n    overflow-x: hidden;\n  }\n\n  .year-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .month-dropdown nile-menu-item::part(base) {\n    padding: 0px 12px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n  .year-dropdown nile-menu-item::part(base) {\n    padding: 0px 12px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n  nile-menu-item[selected] {\n    background: var(--nile-colors-primary-100);\n  }\n\n  nile-menu-item[selected]::part(base):hover {\n    background: var(--nile-colors-primary-100);\n    border-radius: 0px;\n  }\n\n  nile-icon[disabled] {\n    opacity: 0.4;\n    pointer-events: none;\n  }\n\n  .units-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    width: auto;\n  }\n\n  .calendar-input {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-3xl))\n      var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-3xl));\n    box-sizing: border-box;\n  }\n\n  .manual-input {\n    flex: 1;\n    min-width: 120px;\n  }\n\n  .date-input nile-input::part(base),\n  .time-input nile-input::part(base) {\n    width: 100%;\n  }\n\n  .manual-input-label {\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  }\n\n  .day_date.in-range:hover:not(.range-start):not(.range-end) {\n    background-color: var(\n      --nile-colors-neutral-400,\n      var(--ng-colors-bg-quaternary)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  nile-input.date-input::part(base),\n  .from-date {\n    width: var(--nile-width-150px, var(--ng-width-164));\n  }\n\n  nile-input.time-input::part(base),\n  .from-time {\n    width: var(--nile-width-99px, var(--ng-width-108));\n  }\n\n  .month-dropdown, .year-dropdown {\n    cursor: pointer;\n  }\n\n\n\n:host([disabled]) .calendar-header__month-navigation,\n:host([disabled]) .calendar-header__trigger,\n:host([disabled]) .day_date {\n  cursor: not-allowed;\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n\n\n:host([disabled]) .base {\n  background-color:  var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  cursor: not-allowed;\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) .calendar-container {\n  background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n:host([disabled]) .day_name {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) nile-input::part(form-control-label) {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n:host([disabled]) nile-select::part(form-control-label) {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n\n\n:host([disabled]) .calendar-switcher {\n  pointer-events: none;\n  opacity:var(--nile-opacity-50, var(--ng-opacity-50));\n}\n\n\n:host([disabled]) .day_date{\n  pointer-events:none;\n}\n:host([disabled]) .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot {\n  background-color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) .duration_unit{\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n}\n:host([disabled]) .duration__value {\n  cursor: not-allowed;\n}\n"]))));}};});
 //# sourceMappingURL=nile-calendar.css.cjs.js.map

package/dist/nile-calendar/nile-calendar.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-calendar.css.cjs.js","sources":["../../../src/nile-calendar/nile-calendar.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 * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n  }\n  \n  .base {\n    background-color: var(\n      --nile-colors-white-base,\n      var(--ng-colors-bg-primary)\n    );\n    border-radius: var(--nile-radius-radius-sm, var(--ng-radius-2xl));\n    width: var(--nile-width-288px, var(--ng-width-312));\n    border: 1px solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary-alt));\n    box-shadow: var(\n      --nile-box-shadow-15,\n      0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01)\n    ); // Need to fix the token for this\n    border: var(\n      --nile-spacing-spacing-none,\n      1px solid var(--ng-colors-border-secondary-alt)\n    );\n    -webkit-font-smoothing: var(\n      --nile-webkit-font-smoothing,\n      var(--ng-webkit-font-smoothing)\n    );\n    -moz-osx-font-smoothing: var(\n      --nile-moz-osx-font-smoothing,\n      var(--ng-moz-osx-font-smoothing)\n    );\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))\n      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(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\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    display: grid;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-lg, var(--ng-spacing-lg))\n      var(--nile-spacing-lg, var(--ng-spacing-lg))\n      var(--nile-spacing-lg, var(--ng-spacing-lg));\n    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n    grid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .day_date,\n  .day_name {\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-style: normal;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    line-height: var(--nile-line-height-20px, var(--ng-line-height-text-sm));\n    text-align: center;\n    width: 100%;\n    height: var(--nile-width-32px, var(--ng-width-10));\n    display: grid;\n    place-items: center;\n  }\n\n  .day_name {\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n  }\n\n  .day_date {\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .current__date__dot {\n    background-color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-text-white)\n    );\n    position: absolute;\n    border-radius: 50%;\n    height: 5px;\n    width: 5px;\n    left: 25%;\n    top: 90%;\n  }\n\n  .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot {\n    background-color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-bg-brand-solid)\n    );\n  }\n\n  .day_date:hover {\n    background-color: var(\n      --nile-colors-neutral-100,\n      var(--ng-colors-bg-secondary-hover)\n    );\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    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-white));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .selected-date:hover,\n  .range-start:hover,\n  .range-end:hover,\n  .day_date.in-range:hover {\n    background: var(\n      --nile-colors-blue-500,\n      var(--ng-colors-bg-brand-solid-hover)\n    );\n  }\n\n  .range-start.in-range {\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs))\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-xs));\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\n  }\n\n  .range-end {\n    cursor: pointer;\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n      var(--nile-radius-radius-xs, var(--ng-radius-xs))\n      var(--nile-radius-radius-xs, var(--ng-radius-xs))\n      var(--nile-radius-radius-none, var(--ng-radius-none));\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    letter-spacing: 0.2px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\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-100, var(--ng-colors-bg-active));\n  }\n\n  .selected-date {\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-blue-400, 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))\n      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    align-items: flex-end;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    flex-wrap: nowrap;\n    width: 100%;\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-xl, var(--ng-spacing-lg));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-lg))\n      var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n      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  nile-tab::part(base) {\n    padding-bottom: 12px;\n    justify-content: center;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n  }\n\n  .calendar-switcher {\n    width: 100%;\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: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n  :host([disabled]) .unit-container {\n    user-select: none;\n    -webkit-user-select: none;\n    pointer-events: none;\n  }\n\n  .unit-group {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .duration-name {\n    display: flex;\n    align-items: center;\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\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    gap: 6px;\n  }\n\n  .duration__value {\n    display: grid;\n    place-items: center;\n    width: var(--nile-width-32px, var(--ng-width-10));\n    height: var(--nile-width-32px, var(--ng-width-10));\n    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    border: 1px solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n  }\n\n  .duration__value:hover {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));\n  }\n\n  .duration__value--selected {\n    background-color: var(\n      --nile-colors-blue-400,\n      var(--ng-colors-bg-brand-solid)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-white));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semi-bold)\n    );\n    border: 1px solid transparent;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .duration__value--selected:hover {\n    background: var(\n      --nile-colors-blue-500,\n      var(--ng-colors-bg-brand-solid-hover)\n    );\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semi-bold)\n    );\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\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    line-height: 0;\n    justify-content: space-between;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding: var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-none, var(--ng-spacing-xl))\n      var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .duration-input,\n  .time-input,\n  .manual-input {\n    width: 125px;\n  }\n\n  /* New Styles */\n\n  nile-dropdown[open] > span[slot='trigger'] .calendar-header__caret {\n    transform: rotate(180deg);\n  }\n\n  .calendar-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    font-feature-settings: 'liga' off, 'clig' off;\n  }\n\n  .calendar-header__center {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n  }\n\n  .calendar-header__trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: 2px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1;\n    background: transparent;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n  }\n\n  .calendar-header__caret {\n    width: 16px;\n    height: 16px;\n    transition: transform 0.2s ease;\n    transform-origin: center;\n  }\n\n  .calendar-menu {\n    max-height: 194px;\n    overflow-y: auto;\n    width: 100px;\n  }\n\n  .month-scroll-wrapper {\n    max-height: 196px;\n    overflow-y: auto;\n    width: 100px;\n    overflow-x: hidden;\n  }\n\n  .month-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .year-scroll-wrapper {\n    max-height: 196px;\n    overflow-y: auto;\n    width: 65px;\n    overflow-x: hidden;\n  }\n\n  .year-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .month-dropdown nile-menu-item::part(base) {\n    padding: 0px 12px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n  .year-dropdown nile-menu-item::part(base) {\n    padding: 0px 12px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n  nile-menu-item[selected] {\n    background: var(--nile-colors-primary-100);\n  }\n\n  nile-menu-item[selected]::part(base):hover {\n    background: var(--nile-colors-primary-100);\n    border-radius: 0px;\n  }\n\n  nile-icon[disabled] {\n    opacity: 0.4;\n    pointer-events: none;\n  }\n\n  .units-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    width: auto;\n  }\n\n  .calendar-input {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-3xl))\n      var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-3xl));\n    box-sizing: border-box;\n  }\n\n  .manual-input {\n    flex: 1;\n    min-width: 120px;\n  }\n\n  .date-input nile-input::part(base),\n  .time-input nile-input::part(base) {\n    width: 100%;\n  }\n\n  .manual-input-label {\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  }\n\n  .day_date.in-range:hover:not(.range-start):not(.range-end) {\n    background-color: var(\n      --nile-colors-neutral-400,\n      var(--ng-colors-bg-quaternary)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  nile-input.date-input::part(base),\n  .from-date {\n    width: var(--nile-width-150px, var(--ng-width-164));\n  }\n\n  nile-input.time-input::part(base),\n  .from-time {\n    width: var(--nile-width-99px, var(--ng-width-108));\n  }\n\n  .month-dropdown, .year-dropdown {\n    cursor: pointer;\n  }\n\n\n\n:host([disabled]) .calendar-header__month-navigation,\n:host([disabled]) .calendar-header__trigger,\n:host([disabled]) .day_date {\n  cursor: not-allowed;\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n\n\n:host([disabled]) .base {\n  background-color:  var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  cursor: not-allowed;\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) .calendar-container {\n  background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n:host([disabled]) .day_name {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) nile-input::part(form-control-label) {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n:host([disabled]) nile-select::part(form-control-label) {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n\n\n:host([disabled]) .calendar-switcher {\n  pointer-events: none;\n  opacity:var(--nile-opacity-50, var(--ng-opacity-50));\n}\n\n\n:host([disabled]) .day_date{\n  pointer-events:none;\n}\n:host([disabled]) .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot {\n  background-color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) .duration_unit{\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n}\n:host([disabled]) .duration__value {\n  cursor: not-allowed;\n}\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-calendar.css.cjs.js","sources":["../../../src/nile-calendar/nile-calendar.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 * DatePicker CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n  }\n  \n  .base {\n    background-color: var(\n      --nile-colors-white-base,\n      var(--ng-colors-bg-primary)\n    );\n    border-radius: var(--nile-radius-radius-sm, var(--ng-radius-2xl));\n    width: var(--nile-width-288px, var(--ng-width-312));\n    border: 1px solid\n      var(--nile-colors-neutral-400, var(--ng-colors-border-secondary-alt));\n    box-shadow: var(\n      --nile-box-shadow-15,\n      0px 20px 24px -4px var(--ng-colors-effects-shadow-xl-01)\n    ); // Need to fix the token for this\n    border: var(\n      --nile-spacing-spacing-none,\n      1px solid var(--ng-colors-border-secondary-alt)\n    );\n    -webkit-font-smoothing: var(\n      --nile-webkit-font-smoothing,\n      var(--ng-webkit-font-smoothing)\n    );\n    -moz-osx-font-smoothing: var(\n      --nile-moz-osx-font-smoothing,\n      var(--ng-moz-osx-font-smoothing)\n    );\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))\n      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(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\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    display: grid;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-lg, var(--ng-spacing-lg))\n      var(--nile-spacing-lg, var(--ng-spacing-lg))\n      var(--nile-spacing-lg, var(--ng-spacing-lg));\n    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n    grid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .day_date,\n  .day_name {\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-style: normal;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    line-height: var(--nile-line-height-20px, var(--ng-line-height-text-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    text-align: center;\n    width: 100%;\n    height: var(--nile-width-32px, var(--ng-width-10));\n    display: grid;\n    place-items: center;\n  }\n\n  .day_name {\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n  }\n\n  .day_date {\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .current__date__dot {\n    background-color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-text-white)\n    );\n    position: absolute;\n    border-radius: 50%;\n    height: 5px;\n    width: 5px;\n    left: 25%;\n    top: 90%;\n  }\n\n  .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot {\n    background-color: var(\n      --nile-colors-primary-600,\n      var(--ng-colors-bg-brand-solid)\n    );\n  }\n\n  .day_date:hover {\n    background-color: var(\n      --nile-colors-neutral-100,\n      var(--ng-colors-bg-secondary-hover)\n    );\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    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-white));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .selected-date:hover,\n  .range-start:hover,\n  .range-end:hover,\n  .day_date.in-range:hover {\n    background: var(\n      --nile-colors-blue-500,\n      var(--ng-colors-bg-brand-solid-hover)\n    );\n  }\n\n  .range-start.in-range {\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs))\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-xs));\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\n  }\n\n  .range-end {\n    cursor: pointer;\n    background: var(--nile-colors-blue-400, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n      var(--nile-radius-radius-xs, var(--ng-radius-xs))\n      var(--nile-radius-radius-xs, var(--ng-radius-xs))\n      var(--nile-radius-radius-none, var(--ng-radius-none));\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));\n    letter-spacing: 0.2px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-regular)\n    );\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-100, var(--ng-colors-bg-active));\n  }\n\n  .selected-date {\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-blue-400, 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))\n      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    align-items: flex-end;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    flex-wrap: nowrap;\n    width: 100%;\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-xl, var(--ng-spacing-lg));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-lg))\n      var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-spacing-xl, var(--ng-spacing-xl))\n      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  nile-tab::part(base) {\n    padding-bottom: 12px;\n    justify-content: center;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\n  }\n\n  .calendar-switcher {\n    width: 100%;\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: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n  :host([disabled]) .unit-container {\n    user-select: none;\n    -webkit-user-select: none;\n    pointer-events: none;\n  }\n\n  .unit-group {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .duration-name {\n    display: flex;\n    align-items: center;\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semibold)\n    );\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    gap: 6px;\n  }\n\n  .duration__value {\n    display: grid;\n    place-items: center;\n    width: var(--nile-width-32px, var(--ng-width-10));\n    height: var(--nile-width-32px, var(--ng-width-10));\n    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    border: 1px solid\n      var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n  }\n\n  .duration__value:hover {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-quaternary));\n  }\n\n  .duration__value--selected {\n    background-color: var(\n      --nile-colors-blue-400,\n      var(--ng-colors-bg-brand-solid)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-white));\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semi-bold)\n    );\n    border: 1px solid transparent;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n\n  .duration__value--selected:hover {\n    background: var(\n      --nile-colors-blue-500,\n      var(--ng-colors-bg-brand-solid-hover)\n    );\n    font-weight: var(\n      --nile-font-weight-semi-bold,\n      var(--ng-font-weight-semi-bold)\n    );\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\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    line-height: 0;\n    justify-content: space-between;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding: var(--nile-spacing-none, var(--ng-spacing-none))\n      var(--nile-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-none, var(--ng-spacing-xl))\n      var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .duration-input,\n  .time-input,\n  .manual-input {\n    width: 125px;\n  }\n\n  .time-input::part(input),\n  .manual-input::part(input) {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-md))\n      var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  /* New Styles */\n\n  nile-dropdown[open] > span[slot='trigger'] .calendar-header__caret {\n    transform: rotate(180deg);\n  }\n\n  .calendar-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    font-feature-settings: 'liga' off, 'clig' off;\n  }\n\n  .calendar-header__center {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(\n      --nile-font-family-serif-colfax-medium,\n      var(--ng-font-family-body)\n    );\n  }\n\n  .calendar-header__trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: 2px;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 1;\n    background: transparent;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n  }\n\n  .calendar-header__caret {\n    width: 16px;\n    height: 16px;\n    transition: transform 0.2s ease;\n    transform-origin: center;\n  }\n\n  .calendar-menu {\n    max-height: 194px;\n    overflow-y: auto;\n    width: 100px;\n  }\n\n  .month-scroll-wrapper {\n    max-height: 196px;\n    overflow-y: auto;\n    width: 100px;\n    overflow-x: hidden;\n  }\n\n  .month-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .year-scroll-wrapper {\n    max-height: 196px;\n    overflow-y: auto;\n    width: 65px;\n    overflow-x: hidden;\n  }\n\n  .year-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .month-dropdown nile-menu-item::part(base) {\n    padding: 0px 12px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n  .year-dropdown nile-menu-item::part(base) {\n    padding: 0px 12px;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n  }\n  nile-menu-item[selected] {\n    background: var(--nile-colors-primary-100);\n  }\n\n  nile-menu-item[selected]::part(base):hover {\n    background: var(--nile-colors-primary-100);\n    border-radius: 0px;\n  }\n\n  nile-icon[disabled] {\n    opacity: 0.4;\n    pointer-events: none;\n  }\n\n  .units-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    width: auto;\n  }\n\n  .calendar-input {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-3xl))\n      var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-3xl));\n    box-sizing: border-box;\n  }\n\n  .manual-input {\n    flex: 1;\n    min-width: 120px;\n  }\n\n  .date-input nile-input::part(base),\n  .time-input nile-input::part(base) {\n    width: 100%;\n  }\n\n  .manual-input-label {\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  }\n\n  .day_date.in-range:hover:not(.range-start):not(.range-end) {\n    background-color: var(\n      --nile-colors-neutral-400,\n      var(--ng-colors-bg-quaternary)\n    );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  nile-input.date-input::part(base),\n  .from-date {\n    width: var(--nile-width-150px, var(--ng-width-164));\n  }\n\n  nile-input.time-input::part(base),\n  .from-time {\n    width: var(--nile-width-99px, var(--ng-width-108));\n  }\n\n  .month-dropdown, .year-dropdown {\n    cursor: pointer;\n  }\n\n\n\n:host([disabled]) .calendar-header__month-navigation,\n:host([disabled]) .calendar-header__trigger,\n:host([disabled]) .day_date {\n  cursor: not-allowed;\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n\n\n:host([disabled]) .base {\n  background-color:  var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  cursor: not-allowed;\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) .calendar-container {\n  background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n:host([disabled]) .day_name {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) nile-input::part(form-control-label) {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n:host([disabled]) nile-select::part(form-control-label) {\n  color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n\n\n:host([disabled]) .calendar-switcher {\n  pointer-events: none;\n  opacity:var(--nile-opacity-50, var(--ng-opacity-50));\n}\n\n\n:host([disabled]) .day_date{\n  pointer-events:none;\n}\n:host([disabled]) .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot {\n  background-color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n}\n\n:host([disabled]) .duration_unit{\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n}\n:host([disabled]) .duration__value {\n  cursor: not-allowed;\n}\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-calendar/nile-calendar.css.esm.js

@@ -87,6 +87,7 @@ import{css as a}from"lit";const n=a`
     font-style: normal;
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
     line-height: var(--nile-line-height-20px, var(--ng-line-height-text-sm));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     text-align: center;
     width: 100%;
     height: var(--nile-width-32px, var(--ng-width-10));
@@ -420,6 +421,12 @@ import{css as a}from"lit";const n=a`
     width: 125px;
   }
 
+  .time-input::part(input),
+  .manual-input::part(input) {
+    padding: var(--nile-spacing-lg, var(--ng-spacing-md))
+      var(--nile-spacing-lg, var(--ng-spacing-md));
+  }
+
   /* New Styles */
 
   nile-dropdown[open] > span[slot='trigger'] .calendar-header__caret {
@@ -441,6 +448,7 @@ import{css as a}from"lit";const n=a`
     display: flex;
     align-items: center;
     gap: 6px;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     font-family: var(
       --nile-font-family-serif-colfax-medium,
       var(--ng-font-family-body)

package/dist/nile-card/nile-card.cjs.js

@@ -1,2 +1,2 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-card.css.cjs.js","lit/directives/class-map.js","../internal/slot.cjs.js","../internal/nile-element.cjs.js","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var r,s,t,e,o,a,i,l,_templateObject,c;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){r=_tslib.__decorate;},function(_lit){s=_lit.html;},function(_litDecoratorsJs){t=_litDecoratorsJs.property;e=_litDecoratorsJs.customElement;},function(_nileCardCssCjsJs){o=_nileCardCssCjsJs.s;},function(_litDirectivesClassMapJs){a=_litDirectivesClassMapJs.classMap;},function(_internalSlotCjsJs){i=_internalSlotCjsJs.H;},function(_internalNileElementCjsJs){l=_internalNileElementCjsJs.N;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",c=/*#__PURE__*/function(_l){function c(){var _this;_classCallCheck(this,c);_this=_callSuper(this,c,arguments),_this.hasSlotController=new i(_assertThisInitialized(_this),"footer"),_this.active=!1,_this.disabled=!1;return _this;}_inherits(c,_l);return _createClass(c,[{key:"render",value:function render(){return s(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div\n        part=\"base\"\n        class=","\n      >\n        <div class=\"body__wrapper\" part=\"body__wrapper\"\n        class=","\n        >\n          <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n          <slot part=\"body\" class=\"card__body\"></slot>\n        </div>\n\n        <slot\n          name=\"footer\"\n          part=\"footer\"\n          ?hidden=\"","\"\n          class=\"card__footer\"\n        ></slot>\n      </div>\n    "])),a({card:!0,"card--has-footer":this.hasSlotController.test("footer"),"card--active":this.active,"card--disabled":this.disabled}),a({body__wrapper:!0,body__wrapper_nf:!this.hasSlotController.test("footer")}),!this.hasSlotController.test("footer"));}}]);}(l));c.styles=o,r([t({type:Boolean,reflect:!0})],c.prototype,"active",void 0),r([t({type:Boolean,reflect:!0})],c.prototype,"disabled",void 0),_export("N",c=r([e("nile-card")],c));}};});
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","./nile-card.css.cjs.js","lit/directives/class-map.js","../internal/slot.cjs.js","../internal/nile-element.cjs.js","../internal/accessibility/a11y.state.enum.cjs.js","../internal/accessibility/a11y.property.enum.cjs.js","../internal/accessibility/role.enum.cjs.js"],function(_export,_context){"use strict";var t,i,s,e,r,a,o,n,c,_templateObject,h;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t);}:p;}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value;}},_get.apply(null,arguments);}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t;}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){i=_lit.html;},function(_litDecoratorsJs){s=_litDecoratorsJs.property;e=_litDecoratorsJs.state;r=_litDecoratorsJs.customElement;},function(_nileCardCssCjsJs){a=_nileCardCssCjsJs.s;},function(_litDirectivesClassMapJs){o=_litDirectivesClassMapJs.classMap;},function(_internalSlotCjsJs){n=_internalSlotCjsJs.H;},function(_internalNileElementCjsJs){c=_internalNileElementCjsJs.N;},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){}],execute:function execute(){_export("N",h=/*#__PURE__*/function(_c){function h(){var _this;_classCallCheck(this,h);_this=_callSuper(this,h,arguments),_this.hasSlotController=new n(_assertThisInitialized(_this),"footer"),_this._internals=_this.attachInternals(),_this.active=!1,_this.disabled=!1,_this.variant="default",_this.skipOn="",_this._hover=!1,_this._active=!1,_this._disabled=!1,_this.handlePointerEnter=function(){"container"===_this.variant&&(_this._hover=!0);},_this.handlePointerLeave=function(){_this._hover=!1;},_this.handlePointerDown=function(t){var _this$base;if(!_this.skipOn)return;var i=!1;try{i=t.composedPath().some(function(t){return t instanceof Element&&t.matches(_this.skipOn);});}catch(_unused){i=!1;}(_this$base=_this.base)===null||_this$base===void 0||_this$base.classList.toggle("card--skip-active",i);},_this.handlePointerEnd=function(){var _this$base2;(_this$base2=_this.base)===null||_this$base2===void 0||_this$base2.classList.remove("card--skip-active");};return _this;}_inherits(h,_c);return _createClass(h,[{key:"setCustomState",value:function setCustomState(t,i){i?this._internals.states.add(t):this._internals.states["delete"](t);}},{key:"syncCustomStates",value:function syncCustomStates(){this.setCustomState("hover",this._hover),this.setCustomState("active",this._active),this.setCustomState("disabled",this._disabled);}},{key:"updated",value:function updated(t){if(_superPropGet(h,"updated",this,3)([t]),t.has("variant")||t.has("active")||t.has("disabled")){var _t="container"===this.variant;this._active=_t&&this.active,this._disabled=_t&&this.disabled,_t||(this._hover=!1);}this.syncCustomStates();}},{key:"base",get:function get(){var _this$renderRoot$quer,_this$renderRoot;return(_this$renderRoot$quer=(_this$renderRoot=this.renderRoot)===null||_this$renderRoot===void 0?void 0:_this$renderRoot.querySelector(".card"))!==null&&_this$renderRoot$quer!==void 0?_this$renderRoot$quer:null;}},{key:"render",value:function render(){return i(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n      <div\n        part=\"base\"\n        @mouseenter=","\n        @mouseleave=","\n        @pointerdown=","\n        @pointerup=","\n        @pointerleave=","\n        @pointercancel=","\n        class=","\n      >\n        <div class=\"body__wrapper\" part=\"body__wrapper\"\n        class=","\n        >\n          <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n          <slot part=\"body\" class=\"card__body\"></slot>\n        </div>\n\n        <slot\n          name=\"footer\"\n          part=\"footer\"\n          ?hidden=\"","\"\n          class=\"card__footer\"\n        ></slot>\n      </div>\n    "])),this.handlePointerEnter,this.handlePointerLeave,this.handlePointerDown,this.handlePointerEnd,this.handlePointerEnd,this.handlePointerEnd,o({card:"container"!==this.variant,"card--has-footer":this.hasSlotController.test("footer"),"card--active":"container"!==this.variant&&this.active,"card--disabled":"container"!==this.variant&&this.disabled,"card--container":"container"===this.variant,"container--hover":this._hover,"container--active":this._active,"container--disabled":this._disabled}),o({body__wrapper:!0,body__wrapper_nf:!this.hasSlotController.test("footer")}),!this.hasSlotController.test("footer"));}}]);}(c));h.styles=a,t([s({type:Boolean,reflect:!0})],h.prototype,"active",void 0),t([s({type:Boolean,reflect:!0})],h.prototype,"disabled",void 0),t([s({type:String,reflect:!0})],h.prototype,"variant",void 0),t([s({type:String,attribute:!0,reflect:!0})],h.prototype,"skipOn",void 0),t([e()],h.prototype,"_hover",void 0),t([e()],h.prototype,"_active",void 0),t([e()],h.prototype,"_disabled",void 0),_export("N",h=t([r("nile-card")],h));}};});
 //# sourceMappingURL=nile-card.cjs.js.map

package/dist/nile-card/nile-card.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-card.cjs.js","sources":["../../../src/nile-card/nile-card.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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-card.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElements from '../internal/nile-element';\nimport { CSSResultGroup } from 'lit';\n\n/**\n * Nile icon component.\n *\n * @tag nile-card\n *\n */\n@customElement('nile-card')\nexport class NileCard extends NileElements {\n  static styles: CSSResultGroup = styles;\n\n  private readonly hasSlotController = new HasSlotController(this, 'footer');\n\n  @property({ type: Boolean, reflect: true })active = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          card: true,\n          'card--has-footer': this.hasSlotController.test('footer'),\n          'card--active': this.active,\n          'card--disabled': this.disabled,\n        })}\n      >\n        <div class=\"body__wrapper\" part=\"body__wrapper\"\n        class=${classMap({\n          'body__wrapper':true,\n          'body__wrapper_nf': !this.hasSlotController.test('footer')\n        })}\n        >\n          <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n          <slot part=\"body\" class=\"card__body\"></slot>\n        </div>\n\n        <slot\n          name=\"footer\"\n          part=\"footer\"\n          ?hidden=\"${!this.hasSlotController.test('footer')}\"\n          class=\"card__footer\"\n        ></slot>\n      </div>\n    `;\n  }\n}\n\nexport default NileCard;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-card': NileCard;\n  }\n}\n"],"names":["NileCard","_l","c","this","hasSlotController","HasSlotController","active","disabled","_this","_inherits","_createClass","key","value","render","html","_templateObject","_taggedTemplateLiteral","classMap","card","test","body__wrapper","body__wrapper_nf","NileElements","styles","__decorate","property","type","Boolean","reflect","prototype","_export","customElement"],"mappings":"mmHA2BaA,CAAN,uBAAAC,EAAA,EAAA,SAAAC,EAAA,uEAGYC,KAAAA,CAAiBC,iBAAG,CAAA,GAAIC,CAAAA,gCAAwB,QAAA,CAAA,CAEtBF,KAAAA,CAAMG,MAAG,CAAA,CAAA,CAAA,CACRH,KAAAA,CAAQI,QAAG,CAAA,CAAA,CAgCxD,QAAAC,KAAA,EA9BCC,SAAA,CAAAP,CAAA,CAAAD,EAAA,SAAAS,YAAA,CAAAR,CAAA,GAAAS,GAAA,UAAAC,KAAA,UAAAC,MAAAA,CAAAA,CAAAA,CACE,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,weAGCC,CAAAA,CAAS,CACfC,IAAAA,CAAAA,CAAM,CACN,CAAA,kBAAA,CAAoBf,IAAKC,CAAAA,iBAAAA,CAAkBe,IAAK,CAAA,QAAA,CAAA,CAChD,cAAgBhB,CAAAA,IAAAA,CAAKG,MACrB,CAAA,gBAAA,CAAkBH,IAAKI,CAAAA,QAAAA,CAAAA,CAAAA,CAIjBU,CAAAA,CAAS,CACfG,aAAgB,CAAA,CAAA,CAAA,CAChBC,gBAAqBlB,CAAAA,CAAAA,IAAAA,CAAKC,kBAAkBe,IAAK,CAAA,QAAA,CAAA,CAAA,CAAA,CAUrChB,CAAAA,IAAAA,CAAKC,kBAAkBe,IAAK,CAAA,QAAA,CAAA,EAK/C,CAAA,MArC2BG,CAAvB,GACEtB,CAAMuB,CAAAA,MAAAA,CAAmBA,CAIWC,CAAAA,CAAAA,CAAA,CAA1CC,CAAS,CAAA,CAAEC,IAAMC,CAAAA,OAAAA,CAASC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAsB5B,CAAA6B,CAAAA,SAAAA,CAAA,aAAA,EACdL,CAAAA,CAAAA,CAAAA,CAAA,CAA3CC,CAAAA,CAAS,CAAEC,IAAAA,CAAMC,OAASC,CAAAA,OAAAA,CAAAA,CAAS,KAAyB5B,CAAA6B,CAAAA,SAAAA,CAAA,UAAA,CAAA,IAAA,EAAA,CAAA,CAAAC,OAAA,KANlD9B,CAAQwB,CAAAA,CAAAA,CAAA,CADpBO,CAAAA,CAAc,cACF/B"}
+{"version":3,"file":"nile-card.cjs.js","sources":["../../../src/nile-card/nile-card.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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n  PropertyValues,\n} from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './nile-card.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElements from '../internal/nile-element';\nimport { CSSResultGroup } from 'lit';\n\n/**\n * Nile icon component.\n *\n * @tag nile-card\n *\n */\n@customElement('nile-card')\nexport class NileCard extends NileElements {\n  static styles: CSSResultGroup = styles;\n\n  private readonly hasSlotController = new HasSlotController(this, 'footer');\n\n  private readonly _internals: ElementInternals = this.attachInternals();\n\n  @property({ type: Boolean, reflect: true })active = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: String, reflect: true }) variant: 'default' | 'container' = 'default';\n  @property({ type: String, attribute: true, reflect: true }) skipOn = '';\n\n  /** Reactive states used by the `container` variant. */\n  @state() private _hover = false;\n  @state() private _active = false;\n  @state() private _disabled = false;\n\n  /** Set the `hover` state on pointer enter (container variant only). */\n  private handlePointerEnter = () => {\n    if (this.variant === 'container') {\n      this._hover = true;\n    }\n  };\n\n  private handlePointerLeave = () => {\n    this._hover = false;\n  };\n\n  private setCustomState(name: string, on: boolean) {\n    if (on) {\n      this._internals.states.add(name);\n    } else {\n      this._internals.states.delete(name);\n    }\n  }\n\n  private syncCustomStates() {\n    this.setCustomState('hover', this._hover);\n    this.setCustomState('active', this._active);\n    this.setCustomState('disabled', this._disabled);\n  }\n\n  updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    if (\n      changedProperties.has('variant') ||\n      changedProperties.has('active') ||\n      changedProperties.has('disabled')\n    ) {\n      const isContainer = this.variant === 'container';\n      this._active = isContainer && this.active;\n      this._disabled = isContainer && this.disabled;\n      if (!isContainer) {\n        this._hover = false;\n      }\n    }\n    this.syncCustomStates();\n  }\n\n  private get base(): HTMLElement | null {\n    return this.renderRoot?.querySelector('.card') ?? null;\n  }\n\n  private handlePointerDown = (event: PointerEvent) => {\n    if (!this.skipOn) return;\n    let skip = false;\n    try {\n      skip = event\n        .composedPath()\n        .some(node => node instanceof Element && node.matches(this.skipOn));\n    } catch {\n      skip = false;\n    }\n    this.base?.classList.toggle('card--skip-active', skip);\n  };\n\n  private handlePointerEnd = () => {\n    this.base?.classList.remove('card--skip-active');\n  };\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        @mouseenter=${this.handlePointerEnter}\n        @mouseleave=${this.handlePointerLeave}\n        @pointerdown=${this.handlePointerDown}\n        @pointerup=${this.handlePointerEnd}\n        @pointerleave=${this.handlePointerEnd}\n        @pointercancel=${this.handlePointerEnd}\n        class=${classMap({\n          card: this.variant !== 'container',\n          'card--has-footer': this.hasSlotController.test('footer'),\n          'card--active': this.variant !== 'container' && this.active,\n          'card--disabled': this.variant !== 'container' && this.disabled,\n          'card--container': this.variant === 'container',\n          'container--hover': this._hover,\n          'container--active': this._active,\n          'container--disabled': this._disabled,\n        })}\n      >\n        <div class=\"body__wrapper\" part=\"body__wrapper\"\n        class=${classMap({\n          'body__wrapper':true,\n          'body__wrapper_nf': !this.hasSlotController.test('footer')\n        })}\n        >\n          <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n          <slot part=\"body\" class=\"card__body\"></slot>\n        </div>\n\n        <slot\n          name=\"footer\"\n          part=\"footer\"\n          ?hidden=\"${!this.hasSlotController.test('footer')}\"\n          class=\"card__footer\"\n        ></slot>\n      </div>\n    `;\n  }\n}\n\nexport default NileCard;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-card': NileCard;\n  }\n}\n"],"names":["NileCard","h","constructor","this","hasSlotController","HasSlotController","_internals","attachInternals","active","disabled","variant","skipOn","_hover","_active","_disabled","handlePointerEnter","handlePointerLeave","handlePointerDown","event","skip","composedPath","some","node","Element","matches","_unused","base","classList","toggle","handlePointerEnd","_this$base2","remove","_this","_inherits","_c","_createClass","key","value","setCustomState","name","on","states","add","syncCustomStates","updated","changedProperties","super","has","isContainer","get","_this$renderRoot$quer","_this$renderRoot","renderRoot","querySelector","render","html","_templateObject","_taggedTemplateLiteral","classMap","card","test","body__wrapper","body__wrapper_nf","NileElements","styles","__decorate","property","type","Boolean","reflect","prototype","String","attribute","state","customElement"],"mappings":"2oIA4BaA,CAAAA,uBAAAA,EAAAA,EAAN,SAAAC,EAAA,CAAAC,KAAAA,KAAAA,CAAAA,eAAAA,MAAAA,CAAAA,mCAGYC,EAAAA,KAAAA,CAAiBC,kBAAG,GAAIC,CAAAA,CAAAA,CAAAA,sBAAAA,CAAAA,KAAAA,EAAwB,QAEhDF,CAAAA,CAAAA,KAAAA,CAAAG,UAA+BH,CAAAA,KAAAA,CAAKI,eAEVJ,CAAAA,CAAAA,CAAAA,KAAAA,CAAMK,QAAG,CACRL,CAAAA,KAAAA,CAAQM,UAAG,CACZN,CAAAA,KAAAA,CAAOO,QAA4B,SAClBP,CAAAA,KAAAA,CAAMQ,MAAG,CAAA,EAAA,CAGpDR,KAAAA,CAAMS,MAAAA,CAAAA,CAAG,EACTT,KAAAA,CAAOU,OAAAA,CAAAA,CAAG,EACVV,KAAAA,CAASW,SAAAA,CAAAA,CAAG,EAGrBX,KAAAA,CAAkBY,kBAAAA,CAAG,UACN,CAAA,WAAA,GAAjBZ,KAAAA,CAAKO,OAAAA,GACPP,KAAAA,CAAKS,MAAS,CAAA,CAAA,CAAA,CACf,GAGKT,KAAAA,CAAkBa,kBAAAA,CAAG,WAC3Bb,KAAAA,CAAKS,MAAAA,CAAAA,CAAS,CAAK,EAAA,CAsCbT,KAAAA,CAAAc,iBAAAA,CAAqBC,SAAAA,kBAC3B,GAAKf,CAAAA,KAAAA,CAAKQ,OAAQ,OAClB,GAAIQ,CAAAA,GAAO,CACX,CAAA,GAAA,CACEA,CAAOD,CAAAA,CAAAA,CACJE,YACAC,CAAAA,CAAAA,CAAAA,IAAAA,CAAKC,SAAAA,SAAQA,CAAAA,CAAgBC,WAAAA,CAAAA,OAAAA,EAAWD,EAAKE,OAAQrB,CAAAA,KAAAA,CAAKQ,UAC9D,EAAC,MAAAc,OAAA,CAAA,CACAN,CAAO,CAAA,CAAA,CACR,EACDhB,CAAAA,UAAAA,CAAAA,KAAAA,CAAKuB,mCAALvB,UAAAA,CAAWwB,SAAUC,CAAAA,MAAAA,CAAO,oBAAqBT,CAAK,CAAA,EAAA,CAGhDhB,KAAAA,CAAgB0B,gBAAG,CAAA,UAAA,KAAAC,WAAA,CACzB3B,CAAAA,WAAAA,CAAAA,KAAAA,CAAKuB,IAAAA,UAAAA,WAAAA,WAALvB,WAAAA,CAAWwB,SAAUI,CAAAA,MAAAA,CAAO,oBAAoB,EA2CnD,QAAAC,KAAA,EA5FSC,SAAA,CAAAhC,CAAA,CAAAiC,EAAA,SAAAC,YAAA,CAAAlC,CAAA,GAAAmC,GAAA,kBAAAC,KAAA,UAAAC,cAAAA,CAAeC,CAAAA,CAAcC,GAC/BA,CACFrC,CAAAA,IAAAA,CAAKG,UAAWmC,CAAAA,MAAAA,CAAOC,GAAIH,CAAAA,CAAAA,CAAAA,CAE3BpC,KAAKG,UAAWmC,CAAAA,MAAAA,WAAcF,CAEjC,CAAA,EAEO,GAAAH,GAAA,oBAAAC,KAAA,UAAAM,gBAAAA,CAAAA,CACNxC,CAAAA,IAAAA,CAAKmC,cAAe,CAAA,OAAA,CAASnC,IAAKS,CAAAA,MAAAA,CAAAA,CAClCT,KAAKmC,cAAe,CAAA,QAAA,CAAUnC,KAAKU,OACnCV,CAAAA,CAAAA,IAAAA,CAAKmC,eAAe,UAAYnC,CAAAA,IAAAA,CAAKW,SACtC,CAAA,EAED,GAAAsB,GAAA,WAAAC,KAAA,UAAAO,OAAAA,CAAQC,GAEN,GADAC,aAAAA,CAAAA,CAAAA,oBAAcD,CAEZA,GAAAA,CAAAA,CAAkBE,IAAI,SACtBF,CAAAA,EAAAA,CAAAA,CAAkBE,GAAI,CAAA,QAAA,CAAA,EACtBF,CAAkBE,CAAAA,GAAAA,CAAI,YACtB,CACA,GAAMC,CAAAA,GAA+B,WAAjB7C,GAAAA,IAAAA,CAAKO,QACzBP,IAAKU,CAAAA,OAAAA,CAAUmC,EAAe7C,EAAAA,IAAAA,CAAKK,MACnCL,CAAAA,IAAAA,CAAKW,UAAYkC,EAAe7C,EAAAA,IAAAA,CAAKM,SAChCuC,EACH7C,GAAAA,IAAAA,CAAKS,QAAS,CAEjB,CAAA,EACDT,IAAKwC,CAAAA,gBAAAA,CAAAA,CACN,EAED,GAAAP,GAAA,QAAAa,GAAA,UAAAA,IAAA,6CACE,OAAAC,qBAAA,EAAAC,gBAAA,CAAOhD,IAAAA,CAAKiD,qDAALjD,gBAAAA,CAAiBkD,aAAc,CAAA,OAAA,CAAA,UAAAH,qBAAA,UAAAA,qBAAA,CAAY,IACnD,EAmBD,GAAAd,GAAA,UAAAC,KAAA,UAAAiB,MAAAA,CAAAA,CACE,CAAA,MAAOC,CAAAA,CAAI,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA,moBAGOtD,IAAKY,CAAAA,kBAAAA,CACLZ,IAAKa,CAAAA,kBAAAA,CACJb,IAAKc,CAAAA,iBAAAA,CACPd,IAAK0B,CAAAA,gBAAAA,CACF1B,IAAK0B,CAAAA,gBAAAA,CACJ1B,IAAK0B,CAAAA,gBAAAA,CACd6B,CAAAA,CAAS,CACfC,IAAAA,CAAuB,WAAjBxD,GAAAA,IAAAA,CAAKO,QACX,kBAAoBP,CAAAA,IAAAA,CAAKC,iBAAkBwD,CAAAA,IAAAA,CAAK,QAChD,CAAA,CAAA,cAAA,CAAiC,WAAjBzD,GAAAA,IAAAA,CAAKO,SAA2BP,IAAKK,CAAAA,MAAAA,CACrD,gBAAmC,CAAA,WAAA,GAAjBL,IAAKO,CAAAA,OAAAA,EAA2BP,IAAKM,CAAAA,QAAAA,CACvD,kBAAoC,WAAjBN,GAAAA,IAAAA,CAAKO,OACxB,CAAA,kBAAA,CAAoBP,KAAKS,MACzB,CAAA,mBAAA,CAAqBT,IAAKU,CAAAA,OAAAA,CAC1B,sBAAuBV,IAAKW,CAAAA,SAAAA,CAAAA,CAAAA,CAItB4C,CAAAA,CAAS,CACfG,aAAgB,CAAA,CAAA,CAAA,CAChBC,gBAAqB3D,CAAAA,CAAAA,IAAAA,CAAKC,kBAAkBwD,IAAK,CAAA,QAAA,CAAA,CAAA,CAAA,CAUrCzD,CAAAA,IAAAA,CAAKC,kBAAkBwD,IAAK,CAAA,QAAA,CAAA,EAK/C,CAAA,MAvH2BG,CAAAA,GACrB/D,EAAMgE,MAAmBA,CAAAA,CAAAA,CAMWC,CAAA,CAAA,CAA1CC,EAAS,CAAEC,IAAAA,CAAMC,OAASC,CAAAA,OAAAA,CAAAA,CAAS,KAAsBrE,CAAAsE,CAAAA,SAAAA,CAAA,QAAA,CAAA,IAAA,EAAA,CAAA,CACdL,EAAA,CAA3CC,CAAAA,CAAS,CAAEC,IAAAA,CAAMC,QAASC,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAyBrE,CAAAsE,CAAAA,SAAAA,CAAA,eAAA,EAClBL,CAAAA,CAAAA,CAAAA,CAAA,CAA1CC,CAAAA,CAAS,CAAEC,IAAMI,CAAAA,MAAAA,CAAQF,SAAS,CAAqDrE,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAsE,UAAA,SAAA,CAAA,IAAA,EAAA,CAAA,CAC5BL,CAAA,CAAA,CAA3DC,EAAS,CAAEC,IAAAA,CAAMI,MAAQC,CAAAA,SAAAA,CAAAA,CAAW,EAAMH,OAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAoBrE,CAAAsE,CAAAA,SAAAA,CAAA,aAAA,EAGvDL,CAAAA,CAAAA,CAAAA,CAAA,CAAhBQ,CAA+BzE,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAsE,UAAA,QAAA,CAAA,IAAA,EAAA,CAAA,CACfL,CAAA,CAAA,CAAhBQ,KAAgCzE,CAAAsE,CAAAA,SAAAA,CAAA,SAAA,CAAA,IAAA,EAAA,CAAA,CAChBL,EAAA,CAAhBQ,CAAAA,CAAAA,CAAAA,CAAAA,CAAkCzE,CAAAsE,CAAAA,SAAAA,CAAA,gBAAA,EAfxBtE,CAAAA,CAAAA,OAAAA,KAAAA,CAAAA,CAAQiE,EAAA,CADpBS,CAAAA,CAAc,cACF1E"}

package/dist/nile-card/nile-card.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",o=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));\n    --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));\n    --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    display: inline-block;\n  }\n\n  .card {\n    display: flex;\n    flex-direction: column;\n    justify-items: stretch;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: solid var(--nile-outline-0-5px) var(--border-color);\n    border: solid  var(--ng-outline-1px) var(--border-color);\n    border-radius: var(--border-radius);\n    min-width: 273px;\n    max-width: 350px;\n    overflow: hidden;\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n  }\n\n  .body__wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .body__wrapper_nf {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n  .card__header {\n    display: block;\n  }\n\n  .card__body {\n    display: block;\n  }\n\n  .card__footer {\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    display: block;\n    box-sizing: border-box;\n    align-content: center;\n    align-items: center;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n    border-top: var(--nile-border-style-none, 1px solid var(--ng-colors-border-secondary));\n    height: 40px;\n  }\n\n \n.card:active {\n  border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}  \n\n \n.card:active .card__footer {\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}\n\n\n.card:not(.card--has-footer) .card__footer {\n    display: none;\n  }\n\n.card--active {\n  border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}\n\n.card--active .card__footer {\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}\n\n \n.card:not(.card--active):not(:active):hover {\n  box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));\n  outline: solid 1px var(--border-color);\n  background-color: var(--ng-colors-bg-primary-hover);\n}\n\n.card:not(.card--active):not(:active):hover .card__footer {\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n  box-shadow: var(--ng-shadow-sm);\n}\n\n \n.card--disabled {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.card--disabled .card__footer {\n  pointer-events: none;\n}\n\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",o=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));\n    --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));\n    --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    display: inline-block;\n  }\n\n  .card {\n    display: flex;\n    flex-direction: column;\n    justify-items: stretch;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: solid var(--nile-outline-0-5px) var(--border-color);\n    border: solid  var(--ng-outline-1px) var(--border-color);\n    border-radius: var(--border-radius);\n    min-width: 273px;\n    max-width: 350px;\n    overflow: hidden;\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n  }\n\n  .body__wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .body__wrapper_nf {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n  .card__header {\n    display: block;\n  }\n\n  .card__body {\n    display: block;\n  }\n\n  .card__footer {\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    display: block;\n    box-sizing: border-box;\n    align-content: center;\n    align-items: center;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n    border-top: var(--nile-border-style-none, 1px solid var(--ng-colors-border-secondary));\n    height: 40px;\n  }\n\n \n.card:active {\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}  \n\n \n.card:active .card__footer {\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}\n\n/* on a skipOn element, hover appearance - grey */\n.card--skip-active:active {\n  background-color: var(--ng-colors-bg-primary-hover);\n  box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));\n  outline: solid 1px var(--border-color);\n}\n\n/* skipOn element  */\n.card--skip-active:active .card__footer {\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n  box-shadow: var(--ng-shadow-sm);\n}\n\n/* On active card, the skipOn elements will show active card color(blue) on card body*/\n.card--active.card--skip-active:active {\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n  outline: solid var(--nile-outline-0-5px) var(--border-color); \n}\n\n/* On active card, the skipOn elements will show active card color(blue) card footer*/\n.card--active.card--skip-active:active .card__footer {\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}\n\n\n.card:not(.card--has-footer) .card__footer {\n    display: none;\n  }\n\n.card--active {\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}\n\n.card--active .card__footer {\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}\n\n \n.card:not(.card--active):not(:active):hover {\n  box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));\n  outline: solid 1px var(--border-color);\n  background-color: var(--ng-colors-bg-primary-hover);\n}\n\n.card:not(.card--active):not(:active):hover .card__footer {\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n  box-shadow: var(--ng-shadow-sm);\n}\n\n \n.card--disabled {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.card--disabled .card__footer {\n  pointer-events: none;\n}\n\n\n.card--container {\n  display: flex;\n  flex-direction: column;\n  justify-items: stretch;\n  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  outline: solid var(--nile-outline-0-5px, var(--ng-outline-0-5px)) var(--nile-card-color-border, var(--ng-colors-border-secondary));\n  border: solid  var(--nile-outline-1px, var(--ng-outline-1px)) var(--nile-card-color-border, var(--ng-colors-border-secondary));\n  border-radius: var(--border-radius);\n  min-width: 273px;\n  max-width: 350px;\n  overflow: hidden;\n  box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n}\n\n.container--hover {\n  box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));\n  outline: solid 1px var(--nile-card-color-border, var(--ng-colors-border-secondary));\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n}\n\n.container--hover .card__footer {\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n  box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));\n}\n\n.container--disabled {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.container--disabled .card__footer {\n  pointer-events: none;\n}\n\n"]))));}};});
 //# sourceMappingURL=nile-card.css.cjs.js.map

package/dist/nile-card/nile-card.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-card.css.cjs.js","sources":["../../../src/nile-card/nile-card.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 * Card CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));\n    --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));\n    --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    display: inline-block;\n  }\n\n  .card {\n    display: flex;\n    flex-direction: column;\n    justify-items: stretch;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: solid var(--nile-outline-0-5px) var(--border-color);\n    border: solid  var(--ng-outline-1px) var(--border-color);\n    border-radius: var(--border-radius);\n    min-width: 273px;\n    max-width: 350px;\n    overflow: hidden;\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n  }\n\n  .body__wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .body__wrapper_nf {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n  .card__header {\n    display: block;\n  }\n\n  .card__body {\n    display: block;\n  }\n\n  .card__footer {\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    display: block;\n    box-sizing: border-box;\n    align-content: center;\n    align-items: center;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n    border-top: var(--nile-border-style-none, 1px solid var(--ng-colors-border-secondary));\n    height: 40px;\n  }\n\n \n.card:active {\n  border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}  \n\n \n.card:active .card__footer {\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}\n\n\n.card:not(.card--has-footer) .card__footer {\n    display: none;\n  }\n\n.card--active {\n  border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}\n\n.card--active .card__footer {\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}\n\n \n.card:not(.card--active):not(:active):hover {\n  box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));\n  outline: solid 1px var(--border-color);\n  background-color: var(--ng-colors-bg-primary-hover);\n}\n\n.card:not(.card--active):not(:active):hover .card__footer {\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n  box-shadow: var(--ng-shadow-sm);\n}\n\n \n.card--disabled {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.card--disabled .card__footer {\n  pointer-events: none;\n}\n\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-card.css.cjs.js","sources":["../../../src/nile-card/nile-card.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 * Card CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));\n    --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));\n    --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    display: inline-block;\n  }\n\n  .card {\n    display: flex;\n    flex-direction: column;\n    justify-items: stretch;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: solid var(--nile-outline-0-5px) var(--border-color);\n    border: solid  var(--ng-outline-1px) var(--border-color);\n    border-radius: var(--border-radius);\n    min-width: 273px;\n    max-width: 350px;\n    overflow: hidden;\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n  }\n\n  .body__wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .body__wrapper_nf {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n  .card__header {\n    display: block;\n  }\n\n  .card__body {\n    display: block;\n  }\n\n  .card__footer {\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    display: block;\n    box-sizing: border-box;\n    align-content: center;\n    align-items: center;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n    border-top: var(--nile-border-style-none, 1px solid var(--ng-colors-border-secondary));\n    height: 40px;\n  }\n\n \n.card:active {\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}  \n\n \n.card:active .card__footer {\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}\n\n/* on a skipOn element, hover appearance - grey */\n.card--skip-active:active {\n  background-color: var(--ng-colors-bg-primary-hover);\n  box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));\n  outline: solid 1px var(--border-color);\n}\n\n/* skipOn element  */\n.card--skip-active:active .card__footer {\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n  box-shadow: var(--ng-shadow-sm);\n}\n\n/* On active card, the skipOn elements will show active card color(blue) on card body*/\n.card--active.card--skip-active:active {\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n  outline: solid var(--nile-outline-0-5px) var(--border-color); \n}\n\n/* On active card, the skipOn elements will show active card color(blue) card footer*/\n.card--active.card--skip-active:active .card__footer {\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}\n\n\n.card:not(.card--has-footer) .card__footer {\n    display: none;\n  }\n\n.card--active {\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}\n\n.card--active .card__footer {\n  background: var(--ng-colors-bg-brand-primary);\n  box-shadow: var(--ng-shadow-xs);\n}\n\n \n.card:not(.card--active):not(:active):hover {\n  box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));\n  outline: solid 1px var(--border-color);\n  background-color: var(--ng-colors-bg-primary-hover);\n}\n\n.card:not(.card--active):not(:active):hover .card__footer {\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n  box-shadow: var(--ng-shadow-sm);\n}\n\n \n.card--disabled {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.card--disabled .card__footer {\n  pointer-events: none;\n}\n\n\n.card--container {\n  display: flex;\n  flex-direction: column;\n  justify-items: stretch;\n  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  outline: solid var(--nile-outline-0-5px, var(--ng-outline-0-5px)) var(--nile-card-color-border, var(--ng-colors-border-secondary));\n  border: solid  var(--nile-outline-1px, var(--ng-outline-1px)) var(--nile-card-color-border, var(--ng-colors-border-secondary));\n  border-radius: var(--border-radius);\n  min-width: 273px;\n  max-width: 350px;\n  overflow: hidden;\n  box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));\n}\n\n.container--hover {\n  box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));\n  outline: solid 1px var(--nile-card-color-border, var(--ng-colors-border-secondary));\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n}\n\n.container--hover .card__footer {\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n  box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));\n}\n\n.container--disabled {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.container--disabled .card__footer {\n  pointer-events: none;\n}\n\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-card/nile-card.css.esm.js

@@ -69,7 +69,6 @@ import{css as r}from"lit";const o=r`
 
  
 .card:active {
-  border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);
   background: var(--ng-colors-bg-brand-primary);
   box-shadow: var(--ng-shadow-xs);
 }  
@@ -80,13 +79,38 @@ import{css as r}from"lit";const o=r`
   box-shadow: var(--ng-shadow-xs);
 }
 
+/* on a skipOn element, hover appearance - grey */
+.card--skip-active:active {
+  background-color: var(--ng-colors-bg-primary-hover);
+  box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));
+  outline: solid 1px var(--border-color);
+}
+
+/* skipOn element  */
+.card--skip-active:active .card__footer {
+  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
+  box-shadow: var(--ng-shadow-sm);
+}
+
+/* On active card, the skipOn elements will show active card color(blue) on card body*/
+.card--active.card--skip-active:active {
+  background: var(--ng-colors-bg-brand-primary);
+  box-shadow: var(--ng-shadow-xs);
+  outline: solid var(--nile-outline-0-5px) var(--border-color); 
+}
+
+/* On active card, the skipOn elements will show active card color(blue) card footer*/
+.card--active.card--skip-active:active .card__footer {
+  background: var(--ng-colors-bg-brand-primary);
+  box-shadow: var(--ng-shadow-xs);
+}
+
 
 .card:not(.card--has-footer) .card__footer {
     display: none;
   }
 
 .card--active {
-  border: var(--ng-border-width-2) var(--ng-border-style-solid) var(--ng-colors-border-brand);
   background: var(--ng-colors-bg-brand-primary);
   box-shadow: var(--ng-shadow-xs);
 }
@@ -118,4 +142,39 @@ import{css as r}from"lit";const o=r`
   pointer-events: none;
 }
 
+
+.card--container {
+  display: flex;
+  flex-direction: column;
+  justify-items: stretch;
+  background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+  outline: solid var(--nile-outline-0-5px, var(--ng-outline-0-5px)) var(--nile-card-color-border, var(--ng-colors-border-secondary));
+  border: solid  var(--nile-outline-1px, var(--ng-outline-1px)) var(--nile-card-color-border, var(--ng-colors-border-secondary));
+  border-radius: var(--border-radius);
+  min-width: 273px;
+  max-width: 350px;
+  overflow: hidden;
+  box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));
+}
+
+.container--hover {
+  box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-sm));
+  outline: solid 1px var(--nile-card-color-border, var(--ng-colors-border-secondary));
+  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
+}
+
+.container--hover .card__footer {
+  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
+  box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
+}
+
+.container--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.container--disabled .card__footer {
+  pointer-events: none;
+}
+
 `;export{o as s};

package/dist/nile-card/nile-card.esm.js

@@ -1,10 +1,16 @@
-import{__decorate as e}from"tslib";import{html as r}from"lit";import{property as s,customElement as t}from"lit/decorators.js";import{s as o}from"./nile-card.css.esm.js";import{classMap as a}from"lit/directives/class-map.js";import{H as i}from"../internal/slot.esm.js";import{N as l}from"../internal/nile-element.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let d=class extends l{constructor(){super(...arguments),this.hasSlotController=new i(this,"footer"),this.active=!1,this.disabled=!1}render(){return r`
+import{__decorate as t}from"tslib";import{html as i}from"lit";import{property as s,state as e,customElement as r}from"lit/decorators.js";import{s as a}from"./nile-card.css.esm.js";import{classMap as o}from"lit/directives/class-map.js";import{H as n}from"../internal/slot.esm.js";import{N as h}from"../internal/nile-element.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let c=class extends h{constructor(){super(...arguments),this.hasSlotController=new n(this,"footer"),this._internals=this.attachInternals(),this.active=!1,this.disabled=!1,this.variant="default",this.skipOn="",this._hover=!1,this._active=!1,this._disabled=!1,this.handlePointerEnter=()=>{"container"===this.variant&&(this._hover=!0)},this.handlePointerLeave=()=>{this._hover=!1},this.handlePointerDown=t=>{if(!this.skipOn)return;let i=!1;try{i=t.composedPath().some((t=>t instanceof Element&&t.matches(this.skipOn)))}catch{i=!1}this.base?.classList.toggle("card--skip-active",i)},this.handlePointerEnd=()=>{this.base?.classList.remove("card--skip-active")}}setCustomState(t,i){i?this._internals.states.add(t):this._internals.states.delete(t)}syncCustomStates(){this.setCustomState("hover",this._hover),this.setCustomState("active",this._active),this.setCustomState("disabled",this._disabled)}updated(t){if(super.updated(t),t.has("variant")||t.has("active")||t.has("disabled")){const t="container"===this.variant;this._active=t&&this.active,this._disabled=t&&this.disabled,t||(this._hover=!1)}this.syncCustomStates()}get base(){return this.renderRoot?.querySelector(".card")??null}render(){return i`
       <div
         part="base"
-        class=${a({card:!0,"card--has-footer":this.hasSlotController.test("footer"),"card--active":this.active,"card--disabled":this.disabled})}
+        @mouseenter=${this.handlePointerEnter}
+        @mouseleave=${this.handlePointerLeave}
+        @pointerdown=${this.handlePointerDown}
+        @pointerup=${this.handlePointerEnd}
+        @pointerleave=${this.handlePointerEnd}
+        @pointercancel=${this.handlePointerEnd}
+        class=${o({card:"container"!==this.variant,"card--has-footer":this.hasSlotController.test("footer"),"card--active":"container"!==this.variant&&this.active,"card--disabled":"container"!==this.variant&&this.disabled,"card--container":"container"===this.variant,"container--hover":this._hover,"container--active":this._active,"container--disabled":this._disabled})}
       >
         <div class="body__wrapper" part="body__wrapper"
-        class=${a({body__wrapper:!0,body__wrapper_nf:!this.hasSlotController.test("footer")})}
+        class=${o({body__wrapper:!0,body__wrapper_nf:!this.hasSlotController.test("footer")})}
         >
           <slot name="header" part="header" class="card__header"></slot>
           <slot part="body" class="card__body"></slot>
@@ -17,4 +23,4 @@ import{__decorate as e}from"tslib";import{html as r}from"lit";import{property as
           class="card__footer"
         ></slot>
       </div>
-    `}};d.styles=o,e([s({type:Boolean,reflect:!0})],d.prototype,"active",void 0),e([s({type:Boolean,reflect:!0})],d.prototype,"disabled",void 0),d=e([t("nile-card")],d);export{d as N};
+    `}};c.styles=a,t([s({type:Boolean,reflect:!0})],c.prototype,"active",void 0),t([s({type:Boolean,reflect:!0})],c.prototype,"disabled",void 0),t([s({type:String,reflect:!0})],c.prototype,"variant",void 0),t([s({type:String,attribute:!0,reflect:!0})],c.prototype,"skipOn",void 0),t([e()],c.prototype,"_hover",void 0),t([e()],c.prototype,"_active",void 0),t([e()],c.prototype,"_disabled",void 0),c=t([r("nile-card")],c);export{c as N};