@aquera/nile-elements 1.9.0 → 1.9.2

package/src/nile-file-preview/nile-file-preview.template.ts

@@ -90,7 +90,7 @@ export function getHorizontalNoPreviewState(
     <div class="no-preview horizontal-div" part="horizontal-no-preview-state">
       <div class="no-preview-container" part="horizontal-no-preview-container">
         <div class="document-icon" part="horizontal-no-preview-document-icon">
-          <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
+          <nile-icon name="general" size="20" color="var(--nile-colors-blue-500, var(--ng-colors-fg-brand-secondary-500))"></nile-icon>
         </div>
         <div class="preview-file-info" part="horizontal-no-preview-file-info">
           <p part="horizontal-no-preview-file-info-name">
@@ -128,7 +128,7 @@ export function getHorizontalErrorState(
     <div class="error horizontal-div" part="horizontal-error-state">
       <div class="error-container" part="horizontal-error-container">
         <div class="error-icon" part="horizontal-error-icon">
-          <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
+          <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
         </div>
         <div class="file-info" part="horizontal-error-file-info">
           <p class="horizontal-file-name" part="horizontal-error-file-info-name">
@@ -239,7 +239,7 @@ export function getVerticalNoPreviewState(
   return html`
     <div class="vertical-div vertical-no-preview" part="vertical-no-preview-state">
       <div class="vertical-document-icon" part="vertical-no-preview-document-icon">
-        <nile-icon name="general" size="20" color="var(--nile-colors-blue-500)"></nile-icon>
+        <nile-icon name="general" size="20" color="var(--nile-colors-blue-500, var(--ng-colors-fg-brand-secondary-500))"></nile-icon>
       </div>
 
       <div class="content-container" part="vertical-no-preview-file-info">
@@ -275,7 +275,7 @@ export function getVerticalErrorState(
   return html`
     <div class="vertical-div vertical-error" part="vertical-error-state">
       <div class="vertical-document-icon error-bg" part="vertical-error-document-icon">
-        <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700)"></nile-icon>
+        <nile-icon name="info-icon" size="20" color="var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600))"></nile-icon>
       </div>
 
       <div class="file-info-vertical-state" part="vertical-error-file-info">

package/src/nile-file-upload/nile-file-upload.css.ts

@@ -43,10 +43,10 @@ export const styles = css`
     align-items: center;
     justify-content: space-between;
     gap: 18px;
-    border-radius: var(--nile-radius-radius-xs);
-    border: 1px dashed var(--nile-colors-neutral-500);
-    color: var(--nile-colors-dark-900);
-    background-color: var(--nile-colors-white-base);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
 
   @media (width < 400px) {
@@ -60,13 +60,13 @@ export const styles = css`
   }
 
   .hover-border {
-    border-color: var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));
   }
 
   .title {
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-dark-900);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -75,9 +75,9 @@ export const styles = css`
   }
 
   .subtitle {
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-dark-500);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -94,19 +94,19 @@ export const styles = css`
     justify-content: space-between;
     align-items: center;
     padding: 12px;
-    border-radius: var(--nile-radius-radius-xs);
-    color: var(--nile-colors-dark-900);
-    border: 1px dashed var(--nile-colors-neutral-500);
-    background-color: var(--nile-colors-white-base);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    border: 1px dashed var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     position: relative;
   }
 
   .vertical-div:hover {
-    border-color: var(--nile-colors-blue-500);
+    border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));
   }
 
   .outer-div-border {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .inner-div {
@@ -126,9 +126,9 @@ export const styles = css`
 
   .content h4 {
     margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-dark-900);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     text-align: center;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -138,8 +138,8 @@ export const styles = css`
       
   .content p {
     margin: 0px;
-    font-size: var(--nile-type-scale-2);
-    color: var(--nile-colors-neutral-700);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
     text-align: center;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -159,26 +159,38 @@ export const styles = css`
     cursor: pointer;
   }
 
+  nile-button::part(base) {
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));
+  }
+
+  nile-button:active::part(base) {
+    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-neutral));
+  }
+
+  nile-button[disabled]::part(base) {
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+  }
+
   /*  DISABLED STATE */
   .disable {
-    background-color: var(--nile-colors-dark-200);
+    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
     opacity: 0.8;
     cursor: not-allowed;
-    color: var(--nile-colors-neutral-500);
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
     pointer-events: none;
   }
 
   /* DRAGGING */
   .dragging {
-    background-color: var(--nile-colors-blue-100);
-    border-color: var(--nile-colors-primary-600);
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
+    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 18px;
-    color: var(--nile-colors-blue-700);
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-blue-700, var(--ng-colors-text-brand-secondary-700));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .icons-container {
@@ -209,11 +221,11 @@ export const styles = css`
     align-items: center;
     gap: 18px;
     box-sizing: border-box;
-    border: 1px solid var(--nile-colors-neutral-400)
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary))
   }
-  
+
   .uploading:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .progress-bar-container {
@@ -227,8 +239,8 @@ export const styles = css`
     width: 100%;
     display: flex;
     justify-content: space-between;
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .progress-bar-container p {
@@ -236,17 +248,17 @@ export const styles = css`
   }
 
   .progress-bar-container > p {
-    font-size: var(--nile-type-scale-1);
-    color: var(--nile-colors-dark-500);
+    font-size: var(--nile-type-scale-1, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
   }
 
   /* PREVIEW STATE */
   .preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .preview-inner {
@@ -263,8 +275,8 @@ export const styles = css`
     height: 42px;
     width: 42px;
     object-fit: contain;
-    border-radius: var(--nile-radius-radius-xs);
-    border: 1px solid var(--nile-colors-neutral-400);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
   
   .preview-file-info {
@@ -278,14 +290,14 @@ export const styles = css`
 
   .preview-file-info p {
     margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .preview-file-info p:last-of-type{
-    color: var(--nile-colors-neutral-700);
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .preview nile-icon:hover {
@@ -294,11 +306,11 @@ export const styles = css`
 
   /* NO PREVIEW STATE */
   .no-preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .no-preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .no-preview-container {
@@ -309,13 +321,13 @@ export const styles = css`
   .document-icon {
     height: 40px;
     width: 40px;
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
     padding: 2px 3px 2px 3px;
     display: flex;
     justify-content: center;
     align-items: center;
-    border: 1px solid var(--nile-colors-blue-400);
-    background-color: var(--nile-colors-blue-100);
+    border: 1px solid var(--nile-colors-blue-400, var(--ng-componentcolors-utility-blue-400));
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
   }
 
   .document-icon nile-icon {
@@ -334,14 +346,14 @@ export const styles = css`
 
   .preview-file-info p {
     margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .preview-file-info p:last-of-type{
-    color: var(--nile-colors-neutral-700);
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .no-preview > nile-icon:hover {
@@ -351,11 +363,11 @@ export const styles = css`
   /* ERROR STATE */
   
   .error {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .error:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .error-container {
@@ -367,13 +379,13 @@ export const styles = css`
   .error-icon {
     height: 40px;
     width: 40px;
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
     padding: 2px 3px 2px 3px;
     display: flex;
     justify-content: center;
     align-items: center;
-    border: 1px solid var(--nile-colors-red-400);
-    background-color: var(--nile-colors-red-100);
+    border: 1px solid var(--nile-colors-red-400, var(--ng-colors-border-error-subtle));
+    background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));
   }
 
   .error-icon nile-icon {
@@ -392,14 +404,14 @@ export const styles = css`
 
   .file-info p {
     margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .file-info p:last-of-type{
-    color: var(--nile-colors-red-700);
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
   }
 
   .error > nile-icon:hover {
@@ -426,9 +438,9 @@ export const styles = css`
   }
 
   .content-container div.title {
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-dark-900);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     text-align: center;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -437,9 +449,9 @@ export const styles = css`
   }
 
   .content-container div.subtitle {
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-dark-500);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
     text-align: center;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -454,10 +466,10 @@ export const styles = css`
     justify-content: center;
     align-items: center;
     gap:18px;
-    font-size: var(--nile-type-scale-3);
-    color: var(--nile-colors-blue-700);
-    background-color: var(--nile-colors-blue-100);
-    border-color: var(--nile-colors-blue-500);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-blue-700, var(--ng-colors-text-brand-secondary-700));
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
+    border-color: var(--nile-colors-blue-500, var(--ng-colors-border-brand));
   }
 
   /* Uploading State */
@@ -466,11 +478,11 @@ export const styles = css`
     flex-direction: column;
     justify-content: flex-end;
     align-items: center;
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .vertical-uploading:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .loading {
@@ -487,28 +499,28 @@ export const styles = css`
 
   /* Preview State */
   .vertical-preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .vertical-preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .image-preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     object-fit: cover;
     width: 80px;
     height: 80px;
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
   }
 
   /* Vertical No Preview State */
   .vertical-no-preview {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .vertical-no-preview:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .vertical-document-icon {
@@ -518,23 +530,23 @@ export const styles = css`
     display: flex;
     justify-content: center;
     align-items: center;
-    border-radius: var(--nile-radius-radius-xs);
-    border: 1px solid var(--nile-colors-blue-400);
-    background-color: var(--nile-colors-blue-100);
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    border: 1px solid var(--nile-colors-blue-400, var(--ng-componentcolors-utility-blue-400));
+    background-color: var(--nile-colors-blue-100, var(--ng-colors-bg-brand-secondary));
   }
 
   /* Veritcal Error State */
   .vertical-error {
-    border: 1px solid var(--nile-colors-neutral-400);
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .vertical-error:hover {
-    border-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
   }
 
   .error-bg {
-    background-color: var(--nile-colors-red-100);
-    border: 1px solid var(--nile-colors-red-400);
+    background-color: var(--nile-colors-red-100, var(--ng-colors-bg-error-secondary));
+    border: 1px solid var(--nile-colors-red-400, var(--ng-colors-border-error-subtle));
   }
 
   .error-message {
@@ -544,14 +556,14 @@ export const styles = css`
     align-items: center;
     gap: 8px;
     margin: 0px;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     text-align: start;
   }
 
   .error-p {
-    color: var(--nile-colors-red-700);
-    font-size: var(--nile-type-scale-2);
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     width: 216px;
     white-space: nowrap;
     overflow: hidden;
@@ -578,8 +590,8 @@ export const styles = css`
     min-width: 230px;
     max-height: 200px;
     overflow-y: auto;
-    border: 1px solid var(--nile-colors-neutral-700);
-    border-radius: var(--nile-radius-radius-xs);
+    border: 1px solid var(--nile-colors-neutral-700, var(--ng-colors-border-neutral));
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
     scrollbar-width: none;
     padding: 12px;
   }
@@ -594,18 +606,18 @@ export const styles = css`
 
   /* for the upload error messages */
   .upload-error {
-    font-size: var(--nile-type-scale-2);
-    font-weight: var(--nile-font-weight-regular);
-    color: var(--nile-colors-red-700);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--nile-spacing-one-half-x);
+    gap: var(--nile-spacing-one-half-x, var(--ng-spacing-xxs));
     margin-top: 10px;
   }
 
   .upload-error > nile-tooltip > span {
-    color: var(--nile-colors-red-700);
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
     white-space: nowrap;
     text-align: left;
     max-width: 560px;
@@ -615,20 +627,29 @@ export const styles = css`
 
   .vertical-upload-error {
     display: flex;
+    align-items: center;
     gap: 4px;
     margin-top: 10px;
   }
 
   .vertical-upload-error nile-tooltip span, .vertical-upload-error span {
-    color: var(--nile-colors-red-700);
+    color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));
     white-space: nowrap;
     text-align: left;
     width: 222px;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-size: var(--nile-type-scale-2);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     display: inline-block;
   }
+
+  .upload-error nile-lite-tooltip,
+  .vertical-upload-error nile-lite-tooltip {
+    display: flex;
+    align-items: center;
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    line-height: 1;
+  }
 `;
 
 export default [styles];

package/src/nile-menu/nile-menu.ts

@@ -61,7 +61,7 @@ export class NileMenu extends NileElement {
       return;
     }
 
-    if (item.type === 'checkbox') {
+    if (item.type === 'checkbox' || item.type === 'multiple') {
       item.checked = !item.checked;
     }
 

package/src/nile-menu-item/nile-menu-item.css.ts

@@ -125,6 +125,14 @@ export const styles = css`
     visibility: visible;
   }
 
+  .menu-item .menu-item__checkbox {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
+    pointer-events: none;
+  }
+  
   @media (forced-colors: active) {
     :host(:hover:not([aria-disabled='true'])) .menu-item,
     :host(:focus-visible) .menu-item {

package/src/nile-menu-item/nile-menu-item.ts

@@ -14,6 +14,7 @@ import {
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-menu-item.css';
 import '../nile-icon';
+import '../nile-checkbox';
 import { classMap } from 'lit/directives/class-map.js';
 import { query } from 'lit/decorators.js';
 import { getTextContent } from '../internal/slot';
@@ -53,8 +54,13 @@ export class NileMenuItem extends NileElement {
 
   @query('.menu-item') menuItem: HTMLElement;
 
-  /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
-  @property() type: 'normal' | 'checkbox' = 'normal';
+  /** The type of menu item to render. To use `checked`, this value must be set to `checkbox` or `multiple` (both render a checkbox and behave identically). */
+  @property() type: 'normal' | 'checkbox' | 'multiple' = 'normal';
+
+  /** Whether this item renders as a checkbox (true for both `checkbox` and `multiple` types). */
+  private get isCheckable(): boolean {
+    return this.type === 'checkbox' || this.type === 'multiple';
+  }
 
   /** Draws the item in a checked state. */
   @property({ type: Boolean, reflect: true }) checked = false;
@@ -108,18 +114,18 @@ export class NileMenuItem extends NileElement {
 
   @watch('checked')
   handleCheckedChange() {
-    // For proper accessibility, users have to use type="checkbox" to use the checked attribute
-    if (this.checked && this.type !== 'checkbox') {
+    // For proper accessibility, users have to use type="checkbox" or type="multiple" to use the checked attribute
+    if (this.checked && !this.isCheckable) {
       this.checked = false;
       console.error(
-        'The checked attribute can only be used on menu items with type="checkbox"',
+        'The checked attribute can only be used on menu items with type="checkbox" or type="multiple"',
         this
       );
       return;
     }
 
-    // Only checkbox types can receive the aria-checked attribute
-    if (this.type === 'checkbox') {
+    // Only checkable types can receive the aria-checked attribute
+    if (this.isCheckable) {
       this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
     } else {
       this.removeAttribute('aria-checked');
@@ -133,7 +139,7 @@ export class NileMenuItem extends NileElement {
 
   @watch('type')
   handleTypeChange() {
-    if (this.type === 'checkbox') {
+    if (this.isCheckable) {
       this.setAttribute('role', 'menuitemcheckbox');
       this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
     } else {
@@ -159,7 +165,18 @@ export class NileMenuItem extends NileElement {
           'menu-item--has-submenu': this.hasSubMenu,
         })}
       >
-        ${this.checked
+      ${this.isCheckable
+          ? html`
+              <nile-checkbox
+                part="checkbox"
+                class="menu-item__checkbox"
+                .checked=${this.checked}
+                .disabled=${this.disabled}
+                aria-hidden="true"
+                tabindex="-1"
+              ></nile-checkbox>
+            `
+          : this.checked
           ? html`
               <span part="checked-icon" class="menu-item__check">
                 <nile-icon