@aquera/nile-elements 1.9.1 → 1.9.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-calendar/nile-calendar.css.ts

@@ -99,6 +99,7 @@ export const styles = css`
     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));
@@ -432,6 +433,12 @@ export const styles = css`
     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 {
@@ -453,6 +460,7 @@ export const styles = css`
     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/src/nile-card/nile-card.css.ts

@@ -91,6 +91,32 @@ export const styles = css`
   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;
@@ -128,6 +154,41 @@ export const styles = css`
   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 default [styles];

package/src/nile-card/nile-card.ts

@@ -10,8 +10,9 @@ import {
   html,
   CSSResultArray,
   TemplateResult,
+  PropertyValues,
 } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { styles } from './nile-card.css';
 import { classMap } from 'lit/directives/class-map.js';
 import { HasSlotController } from '../internal/slot';
@@ -30,18 +31,100 @@ export class NileCard extends NileElements {
 
   private readonly hasSlotController = new HasSlotController(this, 'footer');
 
+  private readonly _internals: ElementInternals = this.attachInternals();
+
   @property({ type: Boolean, reflect: true })active = false;
   @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: String, reflect: true }) variant: 'default' | 'container' = 'default';
+  @property({ type: String, attribute: true, reflect: true }) skipOn = '';
+
+  /** Reactive states used by the `container` variant. */
+  @state() private _hover = false;
+  @state() private _active = false;
+  @state() private _disabled = false;
+
+  /** Set the `hover` state on pointer enter (container variant only). */
+  private handlePointerEnter = () => {
+    if (this.variant === 'container') {
+      this._hover = true;
+    }
+  };
+
+  private handlePointerLeave = () => {
+    this._hover = false;
+  };
+
+  private setCustomState(name: string, on: boolean) {
+    if (on) {
+      this._internals.states.add(name);
+    } else {
+      this._internals.states.delete(name);
+    }
+  }
+
+  private syncCustomStates() {
+    this.setCustomState('hover', this._hover);
+    this.setCustomState('active', this._active);
+    this.setCustomState('disabled', this._disabled);
+  }
+
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has('variant') ||
+      changedProperties.has('active') ||
+      changedProperties.has('disabled')
+    ) {
+      const isContainer = this.variant === 'container';
+      this._active = isContainer && this.active;
+      this._disabled = isContainer && this.disabled;
+      if (!isContainer) {
+        this._hover = false;
+      }
+    }
+    this.syncCustomStates();
+  }
+
+  private get base(): HTMLElement | null {
+    return this.renderRoot?.querySelector('.card') ?? null;
+  }
+
+  private handlePointerDown = (event: PointerEvent) => {
+    if (!this.skipOn) return;
+    let skip = false;
+    try {
+      skip = event
+        .composedPath()
+        .some(node => node instanceof Element && node.matches(this.skipOn));
+    } catch {
+      skip = false;
+    }
+    this.base?.classList.toggle('card--skip-active', skip);
+  };
+
+  private handlePointerEnd = () => {
+    this.base?.classList.remove('card--skip-active');
+  };
 
   render() {
     return html`
       <div
         part="base"
+        @mouseenter=${this.handlePointerEnter}
+        @mouseleave=${this.handlePointerLeave}
+        @pointerdown=${this.handlePointerDown}
+        @pointerup=${this.handlePointerEnd}
+        @pointerleave=${this.handlePointerEnd}
+        @pointercancel=${this.handlePointerEnd}
         class=${classMap({
-          card: true,
+          card: this.variant !== 'container',
           'card--has-footer': this.hasSlotController.test('footer'),
-          'card--active': this.active,
-          'card--disabled': this.disabled,
+          'card--active': this.variant !== 'container' && this.active,
+          'card--disabled': this.variant !== 'container' && this.disabled,
+          'card--container': this.variant === 'container',
+          'container--hover': this._hover,
+          'container--active': this._active,
+          'container--disabled': this._disabled,
         })}
       >
         <div class="body__wrapper" part="body__wrapper"

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

package/vscode-html-custom-data.json

@@ -686,7 +686,7 @@
     },
     {
       "name": "nile-card",
-      "description": "Nile icon component.\n\nAttributes:\n\n  * `active` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\nProperties:\n\n  * `styles` - \n\n  * `hasSlotController` - \n\n  * `active` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nAttributes:\n\n  * `active` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `variant` {`\"default\" | \"container\"`} - \n\n  * `skipOn` {`string`} - \n\nProperties:\n\n  * `styles` - \n\n  * `hasSlotController` - \n\n  * `_internals` - \n\n  * `active` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `variant` {`\"default\" | \"container\"`} - \n\n  * `skipOn` {`string`} - \n\n  * `_hover` {`boolean`} - Reactive states used by the `container` variant.\n\n  * `_active` {`boolean`} - \n\n  * `_disabled` {`boolean`} - \n\n  * `handlePointerEnter` - Set the `hover` state on pointer enter (container variant only).\n\n  * `handlePointerLeave` - \n\n  * `base` {`HTMLElement | null`} - \n\n  * `handlePointerDown` - \n\n  * `handlePointerEnd` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "active",
@@ -697,6 +697,22 @@
           "name": "disabled",
           "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
           "valueSet": "v"
+        },
+        {
+          "name": "variant",
+          "description": "`variant` {`\"default\" | \"container\"`} - \n\nProperty: variant\n\nDefault: default",
+          "values": [
+            {
+              "name": "default"
+            },
+            {
+              "name": "container"
+            }
+          ]
+        },
+        {
+          "name": "skipOn",
+          "description": "`skipOn` {`string`} - \n\nProperty: skipOn\n\nDefault: "
         }
       ]
     },
@@ -4378,17 +4394,20 @@
     },
     {
       "name": "nile-menu-item",
-      "description": "Nile icon component.\n\nSlots:\n\n  * ` ` {} - The menu item's label.\n\n  * `prefix` {} - Used to prepend an icon or similar element to the menu item.\n\n  * `suffix` {} - Used to append an icon or similar element to the menu item.\n\nAttributes:\n\n  * `type` {`\"normal\" | \"checkbox\"`} - The type of menu item to render. To use `checked`, this value must be set to `checkbox`.\n\n  * `checked` {`boolean`} - Draws the item in a checked state.\n\n  * `value` {`string`} - A unique value to store in the menu item. This can be used as a way to identify menu items when selected.\n\n  * `disabled` {`boolean`} - Draws the menu item in a disabled state, preventing selection.\n\n  * `active` {`boolean`} - Draws the menu item in an active/selected state.\n\n  * `hasSubMenu` {`boolean`} - Draws the item in a checked state.\n\nProperties:\n\n  * `styles` - \n\n  * `cachedTextLabel` {`string`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `menuItem` {`HTMLElement`} - \n\n  * `type` {`\"normal\" | \"checkbox\"`} - The type of menu item to render. To use `checked`, this value must be set to `checkbox`.\n\n  * `checked` {`boolean`} - Draws the item in a checked state.\n\n  * `value` {`string`} - A unique value to store in the menu item. This can be used as a way to identify menu items when selected.\n\n  * `disabled` {`boolean`} - Draws the menu item in a disabled state, preventing selection.\n\n  * `active` {`boolean`} - Draws the menu item in an active/selected state.\n\n  * `hasSubMenu` {`boolean`} - Draws the item in a checked state.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nSlots:\n\n  * ` ` {} - The menu item's label.\n\n  * `prefix` {} - Used to prepend an icon or similar element to the menu item.\n\n  * `suffix` {} - Used to append an icon or similar element to the menu item.\n\nAttributes:\n\n  * `type` {`\"normal\" | \"checkbox\" | \"multiple\"`} - 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).\n\n  * `checked` {`boolean`} - Draws the item in a checked state.\n\n  * `value` {`string`} - A unique value to store in the menu item. This can be used as a way to identify menu items when selected.\n\n  * `disabled` {`boolean`} - Draws the menu item in a disabled state, preventing selection.\n\n  * `active` {`boolean`} - Draws the menu item in an active/selected state.\n\n  * `hasSubMenu` {`boolean`} - Draws the item in a checked state.\n\nProperties:\n\n  * `styles` - \n\n  * `cachedTextLabel` {`string`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `menuItem` {`HTMLElement`} - \n\n  * `type` {`\"normal\" | \"checkbox\" | \"multiple\"`} - 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).\n\n  * `isCheckable` {`boolean`} - Whether this item renders as a checkbox (true for both `checkbox` and `multiple` types).\n\n  * `checked` {`boolean`} - Draws the item in a checked state.\n\n  * `value` {`string`} - A unique value to store in the menu item. This can be used as a way to identify menu items when selected.\n\n  * `disabled` {`boolean`} - Draws the menu item in a disabled state, preventing selection.\n\n  * `active` {`boolean`} - Draws the menu item in an active/selected state.\n\n  * `hasSubMenu` {`boolean`} - Draws the item in a checked state.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "type",
-          "description": "`type` {`\"normal\" | \"checkbox\"`} - The type of menu item to render. To use `checked`, this value must be set to `checkbox`.\n\nProperty: type\n\nDefault: normal",
+          "description": "`type` {`\"normal\" | \"checkbox\" | \"multiple\"`} - 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).\n\nProperty: type\n\nDefault: normal",
           "values": [
             {
               "name": "normal"
             },
             {
               "name": "checkbox"
+            },
+            {
+              "name": "multiple"
             }
           ]
         },
@@ -7553,17 +7572,17 @@
     },
     {
       "name": "nile-tree",
-      "description": "Events:\n\n  * `nile-selection-change` - Emitted when a tree item is selected or deselected.\n\nSlots:\n\n  * ` ` {} - The default slot.\n\n  * `expand-icon` {} - The icon to show when the tree item is expanded. Works best with `<nile-icon>`.\n\n  * `collapse-icon` {} - The icon to show when the tree item is collapsed. Works best with `<nile-icon>`.\n\nAttributes:\n\n  * `selection` {`\"single\" | \"multiple\" | \"leaf\"`} - The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple\ndisplays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.\n\nProperties:\n\n  * `styles` - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `expandedIconSlot` {`HTMLSlotElement`} - \n\n  * `collapsedIconSlot` {`HTMLSlotElement`} - \n\n  * `selection` {`\"single\" | \"multiple\" | \"leaf\"`} - The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple\ndisplays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.\n\n  * `lastFocusedItem` - \n\n  * `mutationObserver` {`MutationObserver`} - \n\n  * `clickTarget` - \n\n  * `initTreeItem` - \n\n  * `selectedItems` {`NileTreeItem[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Events:\n\n  * `nile-selection-change` - Emitted when a tree item is selected or deselected.\n\nSlots:\n\n  * ` ` {} - The default slot.\n\n  * `expand-icon` {} - The icon to show when the tree item is expanded. Works best with `<nile-icon>`.\n\n  * `collapse-icon` {} - The icon to show when the tree item is collapsed. Works best with `<nile-icon>`.\n\nAttributes:\n\n  * `selection` {`\"multiple\" | \"single\" | \"leaf\"`} - The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple\ndisplays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.\n\nProperties:\n\n  * `styles` - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `expandedIconSlot` {`HTMLSlotElement`} - \n\n  * `collapsedIconSlot` {`HTMLSlotElement`} - \n\n  * `selection` {`\"multiple\" | \"single\" | \"leaf\"`} - The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple\ndisplays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.\n\n  * `lastFocusedItem` - \n\n  * `mutationObserver` {`MutationObserver`} - \n\n  * `clickTarget` - \n\n  * `initTreeItem` - \n\n  * `selectedItems` {`NileTreeItem[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "selection",
-          "description": "`selection` {`\"single\" | \"multiple\" | \"leaf\"`} - The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple\ndisplays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.\n\nProperty: selection\n\nDefault: leaf",
+          "description": "`selection` {`\"multiple\" | \"single\" | \"leaf\"`} - The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple\ndisplays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.\n\nProperty: selection\n\nDefault: leaf",
           "values": [
             {
-              "name": "single"
+              "name": "multiple"
             },
             {
-              "name": "multiple"
+              "name": "single"
             },
             {
               "name": "leaf"