@aquera/nile-elements 0.0.69 → 0.0.71

package/dist/nile-vertical-stepper-item/nile-vertical-stepper-item.css.esm.js

@@ -0,0 +1,116 @@
+import{i as e}from"../index-0a3007c5.esm.js";const t=e`
+	:host {
+		--vertical-stepper-flex-val:1;
+		flex-grow:var(--vertical-stepper-flex-val);
+		--bulletin--dot--seperation:30%;
+		--min-line-container-height:25px;
+	}
+
+	.stepper__item {
+		display:flex;
+		column-gap:var(--item-spacing);
+		height:100%;
+	}
+
+	.stepper__item--sm {
+		--item-spacing: var(--nile-spacing-spacing-lg);
+		--stepper-item-title-size:14px;
+		--stepper-item-subtitle-size:14px;
+		--stepper-item-text-line-height:20px;
+		--circle-height:16px;
+	}
+
+	.stepper__item--md {
+		--item-spacing: var(--nile-spacing-spacing-xl);
+		--stepper-item-title-size:16px;
+		--stepper-item-subtitle-size:16px;
+		--stepper-item-text-line-heightt:24px;
+		--circle-height:20px;
+	}
+
+	.stepper__item--lg {
+		--item-spacing: var(--nile-spacing-spacing-xl);
+		--stepper-item-title-size:16px;
+		--stepper-item-subtitle-size:16px;
+		--stepper-item-text-line-height:24px;
+		--circle-height:28px;
+	}
+	
+	.stepper-item__connector-content{
+		display: flex;
+		flex-direction: column;
+	}
+	.stepper__item__bulletin {
+		display:grid;
+		place-content:center;
+	}
+
+	.stepper__bulletin--dot {
+		width: var(--circle-height);
+		aspect-ratio: 1 / 1;
+		border-radius: 50%;
+		background: radial-gradient(var(--nile-colors-gray-light-mode-300) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50) var(--bulletin--dot--seperation));
+		border: 2px solid var(--nile-colors-gray-light-mode-200);
+	}
+
+	.stepper__bulletin__dot--active{
+		background: radial-gradient(#fff var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));
+		border: 2px solid #85AAD18A;
+	}
+
+	.stepper__bulletin--icon {
+		display:grid;
+		place-content:center;
+		width: var(--circle-height);
+		border: 2px solid var(--nile-colors-primary-600);
+		aspect-ratio: 1 / 1;
+		border-radius: 50%;
+		background-color:var(--nile-colors-primary-600);
+		overflow:hidden;
+	}
+
+	.stepper__item__line__container{
+		flex-grow: 1;
+		display: flex;
+		justify-content: center;
+		padding: 2px;
+		min-height: var(--min-line-container-height);
+	}
+
+	.stepper__item__line{
+		height:100%;
+		border-left: 2px solid var(--nile-colors-gray-light-mode-200);
+	}
+	.stepper__item__line--active{
+		border-left: 2px solid var(--nile-colors-primary-600);
+	}
+
+	.stepper__item__content{
+		display:flex;
+		flex-direction:column;
+		justify-content:start;
+	}
+	.stepper__content__title {
+		color:var(--nile-colors-gray-light-mode-700);
+		font-size: var(--stepper-item-title-size);
+		line-height: var(--stepper-item-text-line-height);
+		font-family:Inter;
+		font-weight: 600;
+	}
+
+	.stepper__content__title--active{
+		color:var(--nile-colors-primary-700);
+	}
+
+	.stepper__content__subtitle {
+		color:var(--nile-colors-gray-light-mode-600);
+		font-size: var(--stepper-item-subtitle-size);
+		line-height: var(--stepper-item-text-line-height);
+		font-family:Inter;
+		font-weight: 400;
+	}
+
+	.stepper__content__subtitle--active{
+		color:var(--nile-colors-primary-600);
+	}
+`;export{t as s};

package/dist/nile-vertical-stepper-item/nile-vertical-stepper-item.esm.js

@@ -0,0 +1,22 @@
+import{__decorate as t}from"tslib";import{x as e,A as i}from"../index-0a3007c5.esm.js";import{state as s,customElement as l}from"lit/decorators.js";import{s as p}from"./nile-vertical-stepper-item.css.esm.js";import{N as r}from"../internal/nile-element.esm.js";import{classMap as _}from"lit/directives/class-map.js";import{n as o}from"../property-09139d3c.esm.js";import"lit";let d=class extends r{constructor(){super(...arguments),this.title="",this.subtitle="",this.contentBelow=!1,this.size="md",this.icon="tick",this.isFirst=!1,this.isLast=!1,this.isComplete=!1,this.isCurrent=!1,this.haveFlex=!0}static get styles(){return[p]}render(){this.isLast&&this.style.setProperty("--vertical-stepper-flex-val","0");const t=this.isCurrent,s=this.isComplete;let l=!1;(s&&!t||this.completedStepValue==this.value)&&(l=!0);let p=!1;s&&(p=!0,this.calculatedCompletedStepValue==this.value&&(p=!1));let r="sm"==this.size?14:"md"==this.size?16:20;return e`
+			<div class="${_({stepper__item:!0,"stepper__item--selected":t,"stepper__item--default":!t,"stepper__item--sm":"sm"==this.size,"stepper__item--md":"md"==this.size,"stepper__item--lg":"lg"==this.size})}">
+				<div class="stepper-item__connector-content">
+					<div class="stepper__item__bulletin">
+						${l?e`<div class="stepper__bulletin--icon">
+									<svg width="${r}" height="${r}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+										<g clip-path="url(#clip0_10902_1507)">
+										<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7953 9.85334L13.2487 19.0667L10.7153 16.36C10.2487 15.92 9.51534 15.8933 8.982 16.2667C8.462 16.6533 8.31534 17.3333 8.63534 17.88L11.6353 22.76C11.9287 23.2133 12.4353 23.4933 13.0087 23.4933C13.5553 23.4933 14.0753 23.2133 14.3687 22.76C14.8487 22.1333 24.0087 11.2133 24.0087 11.2133C25.2087 9.98668 23.7553 8.90668 22.7953 9.84001V9.85334Z" fill="white"/>
+										</g>
+									</svg>
+								</div>`:e`<div class="${_({"stepper__bulletin--dot":!0,"stepper__bulletin__dot--active":t})}"></div>`}
+					</div>
+					<div class="stepper__item__line__container">
+						${this.isLast?i:e`<div class="${_({stepper__item__line:!0,"stepper__item__line--active":p})}"></div>`}
+					</div>
+				</div>
+				<div class="stepper__item__content">
+					<div class="${_({stepper__content__title:!0,"stepper__content__title--active":t})}">${this.title}</div>
+					<div class="${_({stepper__content__subtitle:!0,"stepper__content__subtitle--active":t})}">${this.subtitle}</div>
+				</div>
+			</div>
+			`}};t([o()],d.prototype,"title",void 0),t([o()],d.prototype,"subtitle",void 0),t([s()],d.prototype,"contentBelow",void 0),t([s()],d.prototype,"size",void 0),t([s()],d.prototype,"icon",void 0),t([s()],d.prototype,"isFirst",void 0),t([s()],d.prototype,"isLast",void 0),t([s()],d.prototype,"isComplete",void 0),t([s()],d.prototype,"isCurrent",void 0),t([s()],d.prototype,"currentStepValue",void 0),t([s()],d.prototype,"completedStepValue",void 0),t([s()],d.prototype,"calculatedCompletedStepValue",void 0),t([s()],d.prototype,"value",void 0),t([s()],d.prototype,"haveFlex",void 0),d=t([l("nile-vertical-stepper-item")],d);export{d as N};

package/dist/src/index.d.ts

@@ -62,3 +62,5 @@ export { NileHero } from './nile-hero';
 export { NileStepperItem } from './nile-stepper-item';
 export { NileStepper } from './nile-stepper';
 export { NileHeroHeader } from './nile-hero-header';
+export { NileVerticalStepperItem } from './nile-vertical-stepper-item';
+export { NileFormatDate } from './nile-format-date';

package/dist/src/index.js

@@ -62,4 +62,6 @@ export { NileHero } from './nile-hero';
 export { NileStepperItem } from './nile-stepper-item';
 export { NileStepper } from './nile-stepper';
 export { NileHeroHeader } from './nile-hero-header';
+export { NileVerticalStepperItem } from './nile-vertical-stepper-item';
+export { NileFormatDate } from './nile-format-date';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export { NileButton } from './nile-button';\nexport { NileHeading } from './nile-heading';\nexport { NileIcon } from './nile-icon';\nexport { NileInput } from './nile-input';\nexport { NileSidebar } from './nile-sidebar';\nexport { NileMenu } from './nile-menu';\nexport { NileBadge } from './nile-badge';\nexport { NileDrawer } from './nile-drawer';\nexport { NileCheckbox } from './nile-checkbox';\nexport { NileRadio } from './nile-radio';\nexport { NileRadioGroup } from './nile-radio-group';\nexport { NilePopup } from './nile-popup';\nexport { NileTooltip } from './nile-tooltip';\nexport { NileSlideToggle } from './nile-slide-toggle';\nexport { NileLoader } from './nile-loader';\nexport { NileProgressBar } from './nile-progress-bar';\nexport { NileSpinner } from './nile-spinner';\nexport { NileSelect } from './nile-select';\nexport { NileOption } from './nile-option';\nexport { NileTag } from './nile-tag';\nexport { NileIconButton } from './nile-icon-button';\nexport { NileMenuItem } from './nile-menu-item';\nexport { NileDropdown } from './nile-dropdown';\nexport { NileAutoComplete } from './nile-auto-complete';\nexport { NileChip } from './nile-chip';\nexport { NileTextarea } from './nile-textarea';\nexport { NileDatePicker } from './nile-date-picker';\nexport { NileErrorMessage } from './nile-error-message';\nexport { NileFormErrorMessage } from './nile-form-error-message';\nexport { NileFormHelpText } from './nile-form-help-text';\nexport { NileCalendar } from './nile-calendar';\nexport { NileLink } from './nile-link';\nexport { NileButtonToggleGroup } from './nile-button-toggle-group';\nexport { NileButtonToggle } from './nile-button-toggle';\nexport { NileSwitcher } from './nile-switcher';\nexport { NileContentEditor } from './nile-content-editor';\nexport { NileDialog } from './nile-dialog';\nexport { NileErrorNotification } from './nile-error-notification';\nexport { NileTabGroup } from './nile-tab-group';\nexport { NileTab } from './nile-tab';\nexport { NileTabPanel } from './nile-tab-panel';\nexport { NileCodeEditor } from './nile-code-editor';\nexport { NileToast } from './nile-toast';\nexport { NileBreadcrumb } from './nile-breadcrumb';\nexport { NileBreadcrumbItem } from './nile-breadcrumb-item';\nexport { NileFormGroup } from './nile-form-group';\nexport { NileCard } from './nile-card';\nexport { NilePopover } from './nile-popover';\nexport { NileButtonFilter } from './nile-button-filter';\nexport { NileCircularProgressbar } from './nile-circular-progressbar';\nexport { NileSidebarMenu } from './nile-sidebar-menu';\nexport { NileSidebarMenuItems } from './nile-sidebar-menu-items';\nexport { NileSidebarWrapper } from './nile-sidebar-wrapper';\nexport { NileTableCellItem } from './nile-table-cell-item';\nexport { NileTableRow } from './nile-table-row';\nexport { NileTableBody } from './nile-table-body';\nexport { NileTableHeaderItem } from './nile-table-header-item';\nexport { NileAvatar } from './nile-avatar';\nexport { NilePageHeader } from './nile-page-header';\nexport { NileEmptyState } from './nile-empty-state';\nexport { NileHero } from './nile-hero';\nexport { NileStepperItem } from './nile-stepper-item';\nexport { NileStepper } from './nile-stepper';\nexport { NileHeroHeader } from './nile-hero-header';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export { NileButton } from './nile-button';\nexport { NileHeading } from './nile-heading';\nexport { NileIcon } from './nile-icon';\nexport { NileInput } from './nile-input';\nexport { NileSidebar } from './nile-sidebar';\nexport { NileMenu } from './nile-menu';\nexport { NileBadge } from './nile-badge';\nexport { NileDrawer } from './nile-drawer';\nexport { NileCheckbox } from './nile-checkbox';\nexport { NileRadio } from './nile-radio';\nexport { NileRadioGroup } from './nile-radio-group';\nexport { NilePopup } from './nile-popup';\nexport { NileTooltip } from './nile-tooltip';\nexport { NileSlideToggle } from './nile-slide-toggle';\nexport { NileLoader } from './nile-loader';\nexport { NileProgressBar } from './nile-progress-bar';\nexport { NileSpinner } from './nile-spinner';\nexport { NileSelect } from './nile-select';\nexport { NileOption } from './nile-option';\nexport { NileTag } from './nile-tag';\nexport { NileIconButton } from './nile-icon-button';\nexport { NileMenuItem } from './nile-menu-item';\nexport { NileDropdown } from './nile-dropdown';\nexport { NileAutoComplete } from './nile-auto-complete';\nexport { NileChip } from './nile-chip';\nexport { NileTextarea } from './nile-textarea';\nexport { NileDatePicker } from './nile-date-picker';\nexport { NileErrorMessage } from './nile-error-message';\nexport { NileFormErrorMessage } from './nile-form-error-message';\nexport { NileFormHelpText } from './nile-form-help-text';\nexport { NileCalendar } from './nile-calendar';\nexport { NileLink } from './nile-link';\nexport { NileButtonToggleGroup } from './nile-button-toggle-group';\nexport { NileButtonToggle } from './nile-button-toggle';\nexport { NileSwitcher } from './nile-switcher';\nexport { NileContentEditor } from './nile-content-editor';\nexport { NileDialog } from './nile-dialog';\nexport { NileErrorNotification } from './nile-error-notification';\nexport { NileTabGroup } from './nile-tab-group';\nexport { NileTab } from './nile-tab';\nexport { NileTabPanel } from './nile-tab-panel';\nexport { NileCodeEditor } from './nile-code-editor';\nexport { NileToast } from './nile-toast';\nexport { NileBreadcrumb } from './nile-breadcrumb';\nexport { NileBreadcrumbItem } from './nile-breadcrumb-item';\nexport { NileFormGroup } from './nile-form-group';\nexport { NileCard } from './nile-card';\nexport { NilePopover } from './nile-popover';\nexport { NileButtonFilter } from './nile-button-filter';\nexport { NileCircularProgressbar } from './nile-circular-progressbar';\nexport { NileSidebarMenu } from './nile-sidebar-menu';\nexport { NileSidebarMenuItems } from './nile-sidebar-menu-items';\nexport { NileSidebarWrapper } from './nile-sidebar-wrapper';\nexport { NileTableCellItem } from './nile-table-cell-item';\nexport { NileTableRow } from './nile-table-row';\nexport { NileTableBody } from './nile-table-body';\nexport { NileTableHeaderItem } from './nile-table-header-item';\nexport { NileAvatar } from './nile-avatar';\nexport { NilePageHeader } from './nile-page-header';\nexport { NileEmptyState } from './nile-empty-state';\nexport { NileHero } from './nile-hero';\nexport { NileStepperItem } from './nile-stepper-item';\nexport { NileStepper } from './nile-stepper';\nexport { NileHeroHeader } from './nile-hero-header';\nexport { NileVerticalStepperItem } from './nile-vertical-stepper-item';\nexport { NileFormatDate } from './nile-format-date';"]}

package/dist/src/nile-avatar/nile-avatar.css.js

@@ -25,16 +25,15 @@ export const styles = css `
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
-    border: 0.5px solid;
-    border-color: rgba(0, 0, 0, 0.08);
   }
 
   .avatar {
     box-sizing: border-box;
-    border: 1px solid var(--nile-colors-neutral-500);
+    border: 0.5px solid var(--nile-colors-neutral-500);
     background-position: 50% 50%;
     background-size: cover;
     background-repeat: no-repeat;
+    overflow: hidden;
   }
 
   .avatar__small {

package/dist/src/nile-avatar/nile-avatar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-avatar.css.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Avatar CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .text__avatar {\n    box-sizing: border-box;\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-family: var(--nile-font-family-serif);\n    font-style: normal;\n    font-weight: 600;\n    color: var(--nile-colors-white-base);\n    text-transform: uppercase;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n    border: 0.5px solid;\n    border-color: rgba(0, 0, 0, 0.08);\n  }\n\n  .avatar {\n    box-sizing: border-box;\n    border: 1px solid var(--nile-colors-neutral-500);\n    background-position: 50% 50%;\n    background-size: cover;\n    background-repeat: no-repeat;\n  }\n\n  .avatar__small {\n    width: var(--nile-type-scale-4);\n    height: var(--nile-type-scale-4);\n    font-size: 6.516px;\n    line-height: 6.516px;\n  }\n\n  .avatar__medium {\n    width: var(--nile-spacing-3-x);\n    height: var(--nile-spacing-3-x);\n    font-size: 12px;\n    line-height: 18px;\n  }\n\n  .avatar__large {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  .avatar__extralarge {\n    height: 40px;\n    width: 40px;\n    font-size: 16px;\n    line-height: 24px;\n  }\n\n  .avatar__2xl {\n    height: 64px;\n    width: 64px;\n    font-size: 24px;\n    line-height: 32px;\n  }\n\n  .avatar__rounded {\n    border-radius: 50%;\n  }\n\n  .variant__orange {\n    background: #e04f16;\n  }\n\n  .variant__pink {\n    background: #c11574;\n  }\n\n  .variant__blue {\n    background: #3538cd;\n  }\n\n  .variant__light_blue {\n    background: #0086c9;\n  }\n\n  .variant__green {\n    background: #079455;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-avatar.css.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Avatar CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .text__avatar {\n    box-sizing: border-box;\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-family: var(--nile-font-family-serif);\n    font-style: normal;\n    font-weight: 600;\n    color: var(--nile-colors-white-base);\n    text-transform: uppercase;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n  }\n\n  .avatar {\n    box-sizing: border-box;\n    border: 0.5px solid var(--nile-colors-neutral-500);\n    background-position: 50% 50%;\n    background-size: cover;\n    background-repeat: no-repeat;\n    overflow: hidden;\n  }\n\n  .avatar__small {\n    width: var(--nile-type-scale-4);\n    height: var(--nile-type-scale-4);\n    font-size: 6.516px;\n    line-height: 6.516px;\n  }\n\n  .avatar__medium {\n    width: var(--nile-spacing-3-x);\n    height: var(--nile-spacing-3-x);\n    font-size: 12px;\n    line-height: 18px;\n  }\n\n  .avatar__large {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  .avatar__extralarge {\n    height: 40px;\n    width: 40px;\n    font-size: 16px;\n    line-height: 24px;\n  }\n\n  .avatar__2xl {\n    height: 64px;\n    width: 64px;\n    font-size: 24px;\n    line-height: 32px;\n  }\n\n  .avatar__rounded {\n    border-radius: 50%;\n  }\n\n  .variant__orange {\n    background: #e04f16;\n  }\n\n  .variant__pink {\n    background: #c11574;\n  }\n\n  .variant__blue {\n    background: #3538cd;\n  }\n\n  .variant__light_blue {\n    background: #0086c9;\n  }\n\n  .variant__green {\n    background: #079455;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-avatar/nile-avatar.d.ts

@@ -40,6 +40,7 @@ export declare class NileAvatar extends NileElement {
     private defaultAvatarContent;
     private generateInitials;
     private generateVariantCode;
+    private getDefaultIconSize;
     private handleImageError;
     render(): TemplateResult;
 }

package/dist/src/nile-avatar/nile-avatar.js

@@ -67,6 +67,22 @@ let NileAvatar = class NileAvatar extends NileElement {
         const multifactor = char1 * char2 + (char1 % 23) + (char2 % 23);
         return multifactor % 5;
     }
+    getDefaultIconSize() {
+        switch (this.size) {
+            case 'small':
+                return '10';
+            case 'medium':
+                return '16';
+            case 'large':
+                return '20';
+            case 'extralarge':
+                return '24';
+            case '2xl':
+                return '28';
+            default:
+                return '16';
+        }
+    }
     handleImageError(event) {
         const defaultInitials = this.generateInitials(this.name);
         const variant__code = this.generateVariantCode(defaultInitials);
@@ -86,11 +102,17 @@ let NileAvatar = class NileAvatar extends NileElement {
             variant__green: variant__code === 4 && !this.bgColor,
         })}
       style="background-color: ${this.bgColor};color:${this
-            .textColor};border-color:${this.borderColor}"
+            .textColor};border: 0.5px solid ${this.borderColor};
+        border-color:${defaultInitials ? 'rgba(0, 0, 0, 0.08)' : '#C7CED4'}"
     >
       ${defaultInitials
             ? defaultInitials
-            : html `<nile-icon name="user" color="grey" size="14"></nile-icon>`}
+            : html `<nile-icon
+            name="user"
+            color="grey"
+            part="error__icon"
+            size="${this.getDefaultIconSize()}"
+          ></nile-icon>`}
     </div>`;
         this.isDefaultAvatar = false;
     }
@@ -106,6 +128,7 @@ let NileAvatar = class NileAvatar extends NileElement {
                 avatar__medium: this.size === 'medium',
                 avatar__large: this.size === 'large',
                 avatar__extralarge: this.size === 'extralarge',
+                avatar__2xl: this.size === '2xl',
                 avatar__rounded: this.isRounded,
             })}
             style="	background-image: url(${this

package/dist/src/nile-avatar/nile-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-avatar.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.ts"],"names":[],"mappings":"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","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  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './nile-avatar.css';\nimport NileElement from '../internal/nile-element';\nimport { string } from '../nile-icon/icons/svg';\n\n/**\n * Nile icon component.\n *\n * @tag nile-avatar\n *\n */\n@customElement('nile-avatar')\nexport class NileAvatar extends NileElement {\n  /**\n   * The styles for Avatar\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** Gives the url to the Avatar */\n  @property({ type: String, reflect: true }) src = '';\n\n  /** Gives the default Image Letters to the Avatar */\n  @property({ type: String, reflect: true }) name = '';\n\n  /** Gives the default bg color  to the Avatar */\n  @property({ type: String, reflect: true,attribute: 'bg-color' }) bgColor = '';\n\n  /** Gives the default text color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'text-color' })\n  textColor = '#fff';\n\n  /** Gives the default border color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'border-color' })\n  borderColor = 'rgba(0, 0, 0, 0.08)';\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size:\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'extralarge'|'2xl' = 'medium';\n\n  /** Gives a border radius of 50% to the Avatar */\n  @property({ type: Boolean, reflect: true }) isRounded = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  @state() private isDefaultAvatar = true;\n\n  @state() private defaultAvatarContent = html``;\n\n  private generateInitials(name: String): string {\n    if (!name) {\n      return '';\n    }\n    const nameParts = name\n      .split(' ')\n      .filter(part => part.length > 0)\n      .map(part => part.charAt(0).toUpperCase())\n      .slice(0, 2);\n    return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];\n  }\n\n  private generateVariantCode(initials: string): number {\n    const char1 = initials.charCodeAt(0);\n    const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);\n    const multifactor = char1 * char2 + (char1 % 23) + (char2 % 23);\n    return multifactor % 5;\n  }\n\n  private handleImageError(event: Event): void {\n    const defaultInitials = this.generateInitials(this.name);\n    const variant__code = this.generateVariantCode(defaultInitials);\n\n    this.defaultAvatarContent = html`<div\n      class=${classMap({\n        text__avatar: true,\n        avatar__small: this.size === 'small',\n        avatar__medium: this.size === 'medium',\n        avatar__large: this.size === 'large',\n        avatar__extralarge: this.size === 'extralarge',\n        avatar__2xl: this.size === '2xl',\n        avatar__rounded: this.isRounded,\n        variant__orange: variant__code === 0 && !this.bgColor,\n        variant__pink: variant__code === 1 && !this.bgColor,\n        variant__blue: variant__code === 2 && !this.bgColor,\n        variant__light_blue: variant__code === 3 && !this.bgColor,\n        variant__green: variant__code === 4 && !this.bgColor,\n      })}\n      style=\"background-color: ${this.bgColor};color:${this\n        .textColor};border-color:${this.borderColor}\"\n    >\n      ${defaultInitials\n        ? defaultInitials\n        : html`<nile-icon name=\"user\" color=\"grey\" size=\"14\"></nile-icon>`}\n    </div>`;\n\n    this.isDefaultAvatar = false;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.isDefaultAvatar\n        ? html` <img\n            src=\"${this.src}\"\n            class=\"avatar\"\n            class=${classMap({\n              avatar: true,\n              avatar__small: this.size === 'small',\n              avatar__medium: this.size === 'medium',\n              avatar__large: this.size === 'large',\n              avatar__extralarge: this.size === 'extralarge',\n              avatar__rounded: this.isRounded,\n            })}\n            style=\"\tbackground-image: url(${this\n              .src}), linear-gradient(lightgray, lightgray);\"\n            @error=\"${this.handleImageError}\"\n          />`\n        : html`${this.defaultAvatarContent}`}\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileAvatar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-avatar': NileAvatar;\n  }\n}\n"]}
+{"version":3,"file":"nile-avatar.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.ts"],"names":[],"mappings":"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","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  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './nile-avatar.css';\nimport NileElement from '../internal/nile-element';\nimport { string } from '../nile-icon/icons/svg';\n\n/**\n * Nile icon component.\n *\n * @tag nile-avatar\n *\n */\n@customElement('nile-avatar')\nexport class NileAvatar extends NileElement {\n  /**\n   * The styles for Avatar\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  /** Gives the url to the Avatar */\n  @property({ type: String, reflect: true }) src = '';\n\n  /** Gives the default Image Letters to the Avatar */\n  @property({ type: String, reflect: true }) name = '';\n\n  /** Gives the default bg color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'bg-color' }) bgColor =\n    '';\n\n  /** Gives the default text color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'text-color' })\n  textColor = '#fff';\n\n  /** Gives the default border color  to the Avatar */\n  @property({ type: String, reflect: true, attribute: 'border-color' })\n  borderColor = 'rgba(0, 0, 0, 0.08)';\n\n  /** Size of the Avatar */\n  @property({ reflect: true }) size:\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'extralarge'\n    | '2xl' = 'medium';\n\n  /** Gives a border radius of 50% to the Avatar */\n  @property({ type: Boolean, reflect: true }) isRounded = false;\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  @state() private isDefaultAvatar = true;\n\n  @state() private defaultAvatarContent = html``;\n\n  private generateInitials(name: String): string {\n    if (!name) {\n      return '';\n    }\n    const nameParts = name\n      .split(' ')\n      .filter(part => part.length > 0)\n      .map(part => part.charAt(0).toUpperCase())\n      .slice(0, 2);\n    return nameParts.length > 1 ? nameParts[0] + nameParts[1] : nameParts[0];\n  }\n\n  private generateVariantCode(initials: string): number {\n    const char1 = initials.charCodeAt(0);\n    const char2 = initials.length == 1 ? char1 : initials.charCodeAt(1);\n    const multifactor = char1 * char2 + (char1 % 23) + (char2 % 23);\n    return multifactor % 5;\n  }\n\n  private getDefaultIconSize() {\n    switch (this.size) {\n      case 'small':\n        return '10';\n      case 'medium':\n        return '16';\n      case 'large':\n        return '20';\n      case 'extralarge':\n        return '24';\n      case '2xl':\n        return '28';\n      default:\n        return '16';\n    }\n  }\n\n  private handleImageError(event: Event): void {\n    const defaultInitials = this.generateInitials(this.name);\n    const variant__code = this.generateVariantCode(defaultInitials);\n\n    this.defaultAvatarContent = html`<div\n      class=${classMap({\n        text__avatar: true,\n        avatar__small: this.size === 'small',\n        avatar__medium: this.size === 'medium',\n        avatar__large: this.size === 'large',\n        avatar__extralarge: this.size === 'extralarge',\n        avatar__2xl: this.size === '2xl',\n        avatar__rounded: this.isRounded,\n        variant__orange: variant__code === 0 && !this.bgColor,\n        variant__pink: variant__code === 1 && !this.bgColor,\n        variant__blue: variant__code === 2 && !this.bgColor,\n        variant__light_blue: variant__code === 3 && !this.bgColor,\n        variant__green: variant__code === 4 && !this.bgColor,\n      })}\n      style=\"background-color: ${this.bgColor};color:${this\n        .textColor};border: 0.5px solid ${this.borderColor};\n        border-color:${defaultInitials ? 'rgba(0, 0, 0, 0.08)' : '#C7CED4'}\"\n    >\n      ${defaultInitials\n        ? defaultInitials\n        : html`<nile-icon\n            name=\"user\"\n            color=\"grey\"\n            part=\"error__icon\"\n            size=\"${this.getDefaultIconSize()}\"\n          ></nile-icon>`}\n    </div>`;\n\n    this.isDefaultAvatar = false;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      ${this.isDefaultAvatar\n        ? html` <img\n            src=\"${this.src}\"\n            class=\"avatar\"\n            class=${classMap({\n              avatar: true,\n              avatar__small: this.size === 'small',\n              avatar__medium: this.size === 'medium',\n              avatar__large: this.size === 'large',\n              avatar__extralarge: this.size === 'extralarge',\n              avatar__2xl: this.size === '2xl',\n              avatar__rounded: this.isRounded,\n            })}\n            style=\"\tbackground-image: url(${this\n              .src}), linear-gradient(lightgray, lightgray);\"\n            @error=\"${this.handleImageError}\"\n          />`\n        : html`${this.defaultAvatarContent}`}\n    `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileAvatar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-avatar': NileAvatar;\n  }\n}\n"]}

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

@@ -26,7 +26,7 @@ export const styles = css `
   :host {
     --border-color: var(--nile-card-color-border);
     --border-radius: 8px;
-    --border-width: 1px;
+    --border-width: 0.5px;
     --padding: 18px;
     display: inline-block;
   }
@@ -34,11 +34,24 @@ export const styles = css `
   .card {
     display: flex;
     flex-direction: column;
+    justify-items: strecth;
     background-color: var(--nile-colors-white-base);
     border: solid var(--border-width) var(--border-color);
     border-radius: var(--border-radius);
-    box-shadow: var(--nile-card-box-shadow) rgba(16, 24, 40, 0.05);
-    padding: var(--nile-type-scale-4);
+    min-width: 273px;
+    max-width: 350px;
+    overflow: hidden;
+  }
+
+  .body__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px 16px 0 16px;
+  }
+
+  .card__header {
+    display: block;
   }
 
   .card__body {
@@ -46,8 +59,14 @@ export const styles = css `
   }
 
   .card__footer {
+    margin-top: 12px;
     display: block;
-    margin-top: var(--nile-type-scale-4);
+    box-sizing: border-box;
+    align-content: center;
+    align-items: center;
+    padding: 8px 16px;
+    background-color: #f9fafb;
+    height: 40px;
   }
 
   .card:not(.card--has-footer) .card__footer {

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

@@ -1 +1 @@
-{"version":3,"file":"nile-card.css.js","sourceRoot":"","sources":["../../../src/nile-card/nile-card.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Card CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --border-color: var(--nile-card-color-border);\n    --border-radius: 8px;\n    --border-width: 1px;\n    --padding: 18px;\n    display: inline-block;\n  }\n\n  .card {\n    display: flex;\n    flex-direction: column;\n    background-color: var(--nile-colors-white-base);\n    border: solid var(--border-width) var(--border-color);\n    border-radius: var(--border-radius);\n    box-shadow: var(--nile-card-box-shadow) rgba(16, 24, 40, 0.05);\n    padding: var(--nile-type-scale-4);\n  }\n\n  .card__body {\n    display: block;\n  }\n\n  .card__footer {\n    display: block;\n    margin-top: var(--nile-type-scale-4);\n  }\n\n  .card:not(.card--has-footer) .card__footer {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-card.css.js","sourceRoot":"","sources":["../../../src/nile-card/nile-card.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Card CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --border-color: var(--nile-card-color-border);\n    --border-radius: 8px;\n    --border-width: 0.5px;\n    --padding: 18px;\n    display: inline-block;\n  }\n\n  .card {\n    display: flex;\n    flex-direction: column;\n    justify-items: strecth;\n    background-color: var(--nile-colors-white-base);\n    border: solid var(--border-width) var(--border-color);\n    border-radius: var(--border-radius);\n    min-width: 273px;\n    max-width: 350px;\n    overflow: hidden;\n  }\n\n  .body__wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 12px 16px 0 16px;\n  }\n\n  .card__header {\n    display: block;\n  }\n\n  .card__body {\n    display: block;\n  }\n\n  .card__footer {\n    margin-top: 12px;\n    display: block;\n    box-sizing: border-box;\n    align-content: center;\n    align-items: center;\n    padding: 8px 16px;\n    background-color: #f9fafb;\n    height: 40px;\n  }\n\n  .card:not(.card--has-footer) .card__footer {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __decorate } from "tslib";
-import { html } from 'lit-element';
+import { html, } from 'lit-element';
 import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-card.css';
 import { classMap } from 'lit/directives/class-map.js';
@@ -31,10 +31,18 @@ let NileCard = class NileCard extends NileElements {
             'card--has-footer': this.hasSlotController.test('footer'),
         })}
       >
-        <slot part="body" class="card__body"></slot>
-        <slot name="footer" part="footer" ?hidden="${!this.hasSlotController.test('footer')}"  class="card__footer"></slot>
+        <div class="body__wrapper" part="body__wrapper">
+          <slot name="header" part="header" class="card__header"></slot>
+          <slot part="body" class="card__body"></slot>
+        </div>
+
+        <slot
+          name="footer"
+          part="footer"
+          ?hidden="${!this.hasSlotController.test('footer')}"
+          class="card__footer"
+        ></slot>
       </div>
-      
     `;
     }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"nile-card.js","sourceRoot":"","sources":["../../../src/nile-card/nile-card.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAa,IAAI,EAA2C,MAAM,aAAa,CAAC;AACvF,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAIpD;;;;;GAKG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QAIY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAiB7E,CAAC;IAfC,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,IAAI,EAAE,IAAI;YACV,kBAAkB,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC1D,CAAC;;;qDAG2C,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;;;KAGtF,CAAC;IACJ,CAAC;;AAlBM,eAAM,GAAmB,MAAM,CAAC;AAF5B,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAqBpB;SArBY,QAAQ;AAwBrB,eAAe,QAAQ,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement } 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/**\n * Nile icon component.\n *\n * @tag nile-card\n *\n */\n@customElement('nile-card')\nexport class NileCard extends NileElements {\n\n  static styles: CSSResultGroup = styles;\n\n  private readonly hasSlotController = new HasSlotController(this, 'footer');\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          card: true,\n          'card--has-footer': this.hasSlotController.test('footer'),\n        })}\n      >\n        <slot part=\"body\" class=\"card__body\"></slot>\n        <slot name=\"footer\" part=\"footer\" ?hidden=\"${!this.hasSlotController.test('footer')}\"  class=\"card__footer\"></slot>\n      </div>\n      \n    `;\n  }\n}\n\n\nexport default NileCard;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-card': NileCard;\n  }\n}\n"]}
+{"version":3,"file":"nile-card.js","sourceRoot":"","sources":["../../../src/nile-card/nile-card.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAIL,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAGpD;;;;;GAKG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QAGY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAyB7E,CAAC;IAvBC,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,IAAI,EAAE,IAAI;YACV,kBAAkB,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC1D,CAAC;;;;;;;;;;qBAUW,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;KAItD,CAAC;IACJ,CAAC;;AA1BM,eAAM,GAAmB,MAAM,CAAC;AAD5B,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA4BpB;SA5BY,QAAQ;AA8BrB,eAAe,QAAQ,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-card.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElements from '../internal/nile-element';\nimport { CSSResultGroup } from 'lit';\n\n/**\n * Nile icon component.\n *\n * @tag nile-card\n *\n */\n@customElement('nile-card')\nexport class NileCard extends NileElements {\n  static styles: CSSResultGroup = styles;\n\n  private readonly hasSlotController = new HasSlotController(this, 'footer');\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          card: true,\n          'card--has-footer': this.hasSlotController.test('footer'),\n        })}\n      >\n        <div class=\"body__wrapper\" part=\"body__wrapper\">\n          <slot name=\"header\" part=\"header\" class=\"card__header\"></slot>\n          <slot part=\"body\" class=\"card__body\"></slot>\n        </div>\n\n        <slot\n          name=\"footer\"\n          part=\"footer\"\n          ?hidden=\"${!this.hasSlotController.test('footer')}\"\n          class=\"card__footer\"\n        ></slot>\n      </div>\n    `;\n  }\n}\n\nexport default NileCard;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-card': NileCard;\n  }\n}\n"]}

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

@@ -27,10 +27,8 @@ export const styles = css `
     cursor: pointer;
   }
 
-  .checkbox--medium {
-    padding-top: 2px;
-    --toggle-size: var(--nile-type-scale-3);
-    font-size: var(--nile-type-scale-3);
+  .checkbox--only__subtitle{
+    align-items: center;
   }
 
   .checkbox__control {

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

@@ -1 +1 @@
-{"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoJxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Checkbox CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host(.full-width) {\n    width: 100%;\n  }\n\n  .checkbox {\n    position: relative;\n    display: inline-flex;\n    align-items: stretch;\n    font-weight: 400;\n    color: var(--nile-colors-dark-900);\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .checkbox--medium {\n    padding-top: 2px;\n    --toggle-size: var(--nile-type-scale-3);\n    font-size: var(--nile-type-scale-3);\n  }\n\n  .checkbox__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-type-scale-3);\n    height: var(--nile-type-scale-3);\n    border: solid 1px var(--nile-checkbox-color-border-standard);\n    background-color: var(--nile-checkbox-color-background-standard);\n    border-radius: 3px;\n    transition: var(--nile-transition-duration-default border-color),\n      var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default box-shadow);\n  }\n\n  .checkbox__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* svg {\n      display:none !important;\n  } */\n\n  /* Hover */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(--nile-checkbox-color-background-hover);\n    border: 1px solid var(--nile-checkbox-color-border-hover);\n    border-radius: 4px;\n  }\n\n  /* Focus */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n    outline-offset: 1px;\n  }\n\n  /* Checked/indeterminate */\n  .checkbox--checked .checkbox__control,\n  .checkbox--indeterminate .checkbox__control {\n    border-color: var(--nile-checkbox-color-border-checked-standard);\n    background-color: var(--nile-checkbox-color-background-checked-standard);\n  }\n\n  /* Checked/indeterminate + hover */\n  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(--nile-checkbox-color-background-checked-hover);\n    border: 1px solid var(--nile-checkbox-color-border-checked-hover);\n  }\n\n  /* Checked/indeterminate + focus */\n  .checkbox.checkbox--checked:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px var(--nile-checkbox-color-outline-standard);\n    outline-offset: 1px;\n  }\n\n  /* Disabled */\n  .checkbox--disabled {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n\n  .checkbox__label {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    font-family: var(--nile-font-family-serif);\n    margin-left: 8px;\n    user-select: none;\n    color: var(--nile-colors-dark-900);\n    font-style: normal;\n    letter-spacing: 0.2px;\n    box-sizing: border-box;\n  }\n\n  .checkbox__label__text {\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    color: #344054;\n  }\n\n  .checkbox__sublabel__text {\n    display: block;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    color: #475467;\n  }\n\n  :host([required]) .checkbox__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  .checkbox__checked-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__indeterminate-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__helptext-icon {\n    float: right;\n    cursor: pointer;\n    margin-right: 12px;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Checkbox CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host(.full-width) {\n    width: 100%;\n  }\n\n  .checkbox {\n    position: relative;\n    display: inline-flex;\n    align-items: stretch;\n    font-weight: 400;\n    color: var(--nile-colors-dark-900);\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .checkbox--only__subtitle{\n    align-items: center;\n  }\n\n  .checkbox__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-type-scale-3);\n    height: var(--nile-type-scale-3);\n    border: solid 1px var(--nile-checkbox-color-border-standard);\n    background-color: var(--nile-checkbox-color-background-standard);\n    border-radius: 3px;\n    transition: var(--nile-transition-duration-default border-color),\n      var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default box-shadow);\n  }\n\n  .checkbox__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* svg {\n      display:none !important;\n  } */\n\n  /* Hover */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(--nile-checkbox-color-background-hover);\n    border: 1px solid var(--nile-checkbox-color-border-hover);\n    border-radius: 4px;\n  }\n\n  /* Focus */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n    outline-offset: 1px;\n  }\n\n  /* Checked/indeterminate */\n  .checkbox--checked .checkbox__control,\n  .checkbox--indeterminate .checkbox__control {\n    border-color: var(--nile-checkbox-color-border-checked-standard);\n    background-color: var(--nile-checkbox-color-background-checked-standard);\n  }\n\n  /* Checked/indeterminate + hover */\n  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(--nile-checkbox-color-background-checked-hover);\n    border: 1px solid var(--nile-checkbox-color-border-checked-hover);\n  }\n\n  /* Checked/indeterminate + focus */\n  .checkbox.checkbox--checked:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px var(--nile-checkbox-color-outline-standard);\n    outline-offset: 1px;\n  }\n\n  /* Disabled */\n  .checkbox--disabled {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n\n  .checkbox__label {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    font-family: var(--nile-font-family-serif);\n    margin-left: 8px;\n    user-select: none;\n    color: var(--nile-colors-dark-900);\n    font-style: normal;\n    letter-spacing: 0.2px;\n    box-sizing: border-box;\n  }\n\n  .checkbox__label__text {\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    color: #344054;\n  }\n\n  .checkbox__sublabel__text {\n    display: block;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    color: #475467;\n  }\n\n  :host([required]) .checkbox__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  .checkbox__checked-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__indeterminate-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__helptext-icon {\n    float: right;\n    cursor: pointer;\n    margin-right: 12px;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-checkbox/nile-checkbox.d.ts

@@ -18,7 +18,6 @@ import type { CSSResultGroup } from 'lit';
  * @event nile-change - Emitted when the checked state changes.
  * @event nile-focus - Emitted when the checkbox gains focus.
  * @event nile-input - Emitted when the checkbox receives input.
- * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
  *
  * @csspart base - The component's base wrapper.
  * @csspart control - The square container that wraps the checkbox's checked state.
@@ -72,7 +71,6 @@ export declare class NileCheckbox extends NileElement {
     form: string;
     /** Makes the checkbox a required field. */
     required: boolean;
-    private toggleHelpText;
     private handleClick;
     private handleBlur;
     private handleInput;

package/dist/src/nile-checkbox/nile-checkbox.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __decorate } from "tslib";
-import { html, property, } from 'lit-element';
+import { html, property, nothing, } from 'lit-element';
 import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-checkbox.css';
 import { classMap } from 'lit/directives/class-map.js';
@@ -26,7 +26,6 @@ import NileElement from '../internal/nile-element';
  * @event nile-change - Emitted when the checked state changes.
  * @event nile-focus - Emitted when the checkbox gains focus.
  * @event nile-input - Emitted when the checkbox receives input.
- * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
  *
  * @csspart base - The component's base wrapper.
  * @csspart control - The square container that wraps the checkbox's checked state.
@@ -78,9 +77,6 @@ let NileCheckbox = class NileCheckbox extends NileElement {
         /** Makes the checkbox a required field. */
         this.required = false;
     }
-    toggleHelpText() {
-        this.showHelpText = !this.showHelpText;
-    }
     handleClick() {
         this.checked = !this.checked;
         this.indeterminate = false;
@@ -153,28 +149,9 @@ let NileCheckbox = class NileCheckbox extends NileElement {
             'checkbox--checked': this.checked,
             'checkbox--disabled': this.disabled,
             'checkbox--focused': this.hasFocus,
-            'checkbox--indeterminate': this.indeterminate,
-            'checkbox--medium': this.size === 'medium',
+            'checkbox--indeterminate': this.indeterminate
         })}
       >
-        <input
-          class="checkbox__input"
-          type="checkbox"
-          title=${this
-            .title /* An empty title prevents browser validation tooltips from appearing on hover */}
-          name=${this.name}
-          value=${ifDefined(this.value)}
-          .indeterminate=${live(this.indeterminate)}
-          .checked=${live(this.checked)}
-          .disabled=${this.disabled}
-          .required=${this.required}
-          aria-checked=${this.checked ? 'true' : 'false'}
-          @click=${this.handleClick}
-          @input=${this.handleInput}
-          @blur=${this.handleBlur}
-          @focus=${this.handleFocus}
-        />
-
         <span
           part="control${this.checked ? ' control--checked' : ''}${this
             .indeterminate
@@ -182,6 +159,23 @@ let NileCheckbox = class NileCheckbox extends NileElement {
             : ''}"
           class="checkbox__control"
         >
+          <!-- An empty title prevents browser validation tooltips from appearing on hover -->
+          <input
+            class="checkbox__input"
+            type="checkbox"
+            title=${this.title}
+            name=${this.name}
+            value=${ifDefined(this.value)}
+            .indeterminate=${live(this.indeterminate)}
+            .checked=${live(this.checked)}
+            .disabled=${this.disabled}
+            .required=${this.required}
+            aria-checked=${this.checked ? 'true' : 'false'}
+            @click=${this.handleClick}
+            @input=${this.handleInput}
+            @blur=${this.handleBlur}
+            @focus=${this.handleFocus}
+          />
           ${this.checked
             ? html `
                 <nile-icon
@@ -208,9 +202,9 @@ let NileCheckbox = class NileCheckbox extends NileElement {
             : ''}
         </span>
 
-        <div part="label" class="checkbox__label">
+        <div part="label" class="checkbox__label" style="${!this.label && !this.subLabel ? 'margin-left:0;' : ''}">
           ${this.label ? html `<span class="checkbox__label__text">${this.label}</span>` : ``}
-          ${this.label && this.subLabel ? html `<span class="checkbox__sublabel__text">${this.subLabel}</span>` : ``}
+          ${this.subLabel ? html `<span class="checkbox__sublabel__text">${this.subLabel}</span>` : ``}
           <slot></slot>
         </div>
       </label>
@@ -224,14 +218,10 @@ let NileCheckbox = class NileCheckbox extends NileElement {
               ></nile-icon>
             </nile-tooltip>
           `
-            : ``}
+            : nothing}
       ${hasErrorMessage
-            ? html `
-            <nile-form-error-message
-              >${this.errorMessage}</nile-form-error-message
-            >
-          `
-            : ``}
+            ? html `<nile-form-error-message>${this.errorMessage}</nile-form-error-message>`
+            : nothing}
     `;
     }
 };