@covalent/components 0.0.0-COVALENT

package/src/list/list-item.scss

@@ -0,0 +1,56 @@
+:host {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+:host([graphic='avatar']) .mdc-deprecated-list-item__graphic {
+  --mdc-theme-text-icon-on-background: var(--cv-theme-on-secondary-container);
+
+  color: var(--cv-theme-on-secondary-container);
+  background-color: var(--cv-theme-secondary-container);
+  border-radius: 9999px;
+}
+
+:host([disabled]) {
+  color: var(--cv-theme-on-surface-38);
+
+  &:host([graphic='avatar']) .mdc-deprecated-list-item__graphic,
+  .mdc-deprecated-list-item__meta {
+    --mdc-theme-text-icon-on-background: var(--cv-theme-on-surface-38);
+  }
+}
+
+.mdc-deprecated-list-item__meta.material-icons ::slotted(cv-icon) {
+  font-family: var(--mdc-icon-font);
+  font-size: var(--mdc-icon-size, 24px);
+  line-height: 1;
+}
+
+.mdc-deprecated-list-item__text {
+  padding-left: var(--cv-list-item-text-padding, 0);
+}
+
+.mdc-deprecated-list-item__secondary-text {
+  --mdc-icon-size: var(--mdc-typography-body2-font-size);
+
+  ::slotted(*) {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+.mdc-deprecated-list-item__meta {
+  display: flex;
+  align-items: center;
+}
+
+:host(:not([left])) .mdc-deprecated-list-item__meta {
+  width: auto;
+  min-width: 40px;
+}
+
+.mdc-deprecated-list-item__meta ::slotted(*),
+.mdc-deprecated-list-item__graphic ::slotted(*) {
+  display: flex;
+  align-items: center;
+}

package/src/list/list-item.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentListItem } from './list-item';
+
+describe('List item', () => {
+  it('should work', () => {
+    expect(new CovalentListItem()).toBeDefined();
+  });
+});

package/src/list/list-item.ts

@@ -0,0 +1,31 @@
+import { ListItemBase } from '@material/mwc-list/mwc-list-item-base';
+
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { styles as controlStyle } from '@material/mwc-list/mwc-control-list-item.css';
+import { styles as listItemStyle } from '@material/mwc-list/mwc-list-item.css';
+import styles from './list-item.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-list-item': CovalentListItem;
+  }
+}
+
+@customElement('cv-list-item')
+export class CovalentListItem extends ListItemBase {
+  static override styles = [
+    css`
+      ${unsafeCSS(listItemStyle)}
+    `,
+    css`
+      ${unsafeCSS(controlStyle)}
+    `,
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+}
+
+export default CovalentListItem;

package/src/list/list.scss

@@ -0,0 +1,25 @@
+:host {
+  padding-right: var(--cv-list-padding-right, 0);
+  padding-left: var(--cv-list-padding-left, 0);
+}
+
+:host(.subnav) ::slotted(*),
+:host([subnav]) ::slotted(*) {
+  height: 32px;
+  font-weight: var(--mdc-typography-body2-font-weight);
+  border-radius: var(--cv-list-item-border-radius, 100px);
+  padding-right: var(--cv-list-padding-right, 16px);
+  padding-left: var(--cv-list-padding-left, 16px);
+}
+
+:host(.subnav),
+:host([subnav]) {
+  --cv-list-padding-right: 0;
+  --cv-list-padding-left: 16px;
+
+  padding-left: 32px;
+}
+
+.mdc-deprecated-list {
+  width: 100%;
+}

package/src/list/list.stories.js

@@ -0,0 +1,120 @@
+import './list';
+import './list-item';
+import './check-list-item';
+import './radio-list-item';
+import '../icon/icon';
+
+export default {
+  title: 'Components/List',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+const BasicTemplate = ({ selected, disabled }) => {
+  return `
+    <cv-list activatable>
+        <cv-list-item ${disabled ? `disabled` : null}>Item 0</cv-list-item>
+        <cv-list-item ${
+          selected ? `selected activated` : null
+        }>Item 1</cv-list-item>
+        <cv-list-item>Item 2</cv-list-item>
+        <cv-list-item>Item 3</cv-list-item>
+    </cv-list>`;
+};
+
+const IconTemplate = ({ icon, iconStyle = 'avatar', disabled }) => {
+  return `
+    <cv-list>
+        <cv-list-item graphic="${iconStyle}" ${disabled ? `disabled` : null}>
+            <span>${iconStyle} 0</span>
+            <cv-icon slot="graphic">${icon}</cv-icon>
+        </cv-list-item>
+        <cv-list-item graphic="${iconStyle}">
+            <span>${iconStyle} 2</span>
+            <cv-icon slot="graphic">${icon}</cv-icon>
+        </cv-list-item>
+        <cv-list-item graphic="${iconStyle}">
+            <span>${iconStyle} 3</span>
+            <cv-icon slot="graphic">${icon}</cv-icon>
+        </cv-list-item>
+        <cv-list-item graphic="${iconStyle}">
+            <span>${iconStyle} 4</span>
+            <cv-icon slot="graphic">${icon}</cv-icon>
+        </cv-list-item>
+        <cv-list-item graphic="${iconStyle}">
+            <span>${iconStyle} 5</span>
+            <cv-icon slot="graphic">${icon}</cv-icon>
+        </cv-list-item>
+    </cv-list>`;
+};
+
+const TwoLineTemplate = ({ icon, style, required, helper, disabled }) => {
+  return `
+    <cv-list>
+        <cv-list-item twoline ${disabled ? `disabled` : null}>
+            <span>Item 0</span>
+            <span slot="secondary">Secondary line</span>
+        </cv-list-item>
+        <cv-list-item twoline>
+            <span>Item 1</span>
+            <span slot="secondary">Secondary line</span>
+        </cv-list-item>
+        <cv-list-item twoline>
+            <span>Item 2</span>
+            <span slot="secondary">Secondary line</span>
+        </cv-list-item>
+        <cv-list-item twoline>
+            <span>Item 3</span>
+            <span slot="secondary">Secondary line</span>
+        </cv-list-item>
+    </cv-list>`;
+};
+
+const CheckRadioTemplate = ({ listType = 'check', disabled }) => {
+  return `
+    <cv-list multi>
+        <cv-${listType}-list-item selected ${
+    disabled ? `disabled` : null
+  }>Item 0</cv-${listType}-list-item>
+        <cv-${listType}-list-item selected>Item 1</cv-${listType}-list-item>
+        <li divider role="separator" padded></li>
+        <cv-${listType}-list-item left selected>Item 2 (left)</cv-${listType}-list-item>
+        <cv-${listType}-list-item left>Item 3 (left)</cv-${listType}-list-item>
+    </cv-list>`;
+};
+
+export const Basic = BasicTemplate.bind({});
+Basic.args = {
+  selected: false,
+  disabled: false,
+};
+
+export const WithAvatar = IconTemplate.bind({});
+WithAvatar.args = {
+  icon: 'folder',
+  iconStyle: 'avatar',
+  disabled: false,
+};
+WithAvatar.argTypes = {
+  iconStyle: {
+    options: ['avatar', 'icon', 'medium', 'large'],
+    control: { type: 'radio' },
+  },
+};
+
+export const TwoLine = TwoLineTemplate.bind({});
+TwoLine.args = {
+  disabled: false,
+};
+
+export const ChecksAndRadios = CheckRadioTemplate.bind({});
+ChecksAndRadios.args = {
+  disabled: false,
+};
+ChecksAndRadios.argTypes = {
+  listType: {
+    options: ['check', 'radio'],
+    control: { type: 'radio' },
+  },
+};

package/src/list/list.ts

@@ -0,0 +1,23 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ListBase } from '@material/mwc-list/mwc-list-base';
+import { styles as baseStyles } from '@material/mwc-list/mwc-list.css';
+import styles from './list.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-list': CovalentList;
+  }
+}
+
+@customElement('cv-list')
+export class CovalentList extends ListBase {
+  static override styles = [
+    baseStyles,
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+}
+
+export default CovalentList;

package/src/list/nav-list-item.scss

@@ -0,0 +1,159 @@
+@use '@material/animation';
+
+:host {
+  font-family: var(--mdc-typography-font-family);
+  font-size: var(--mdc-typography-body2-font-size);
+  font-weight: 600;
+  line-height: var(--mdc-typography-body2-line-height);
+  text-align: left;
+  border-radius: var(--cv-list-item-border-radius, 100px);
+  transition: border-radius 200ms animation.$standard-curve-timing-function,
+    width 200ms animation.$standard-curve-timing-function;
+  width: var(--cv-list-item-width, 100%);
+  color: var(--cv-theme-on-surface-variant);
+
+  ::slotted(cv-icon[slot='graphic']) {
+    color: var(--cv-theme-on-surface-variant);
+  }
+
+  --mdc-list-item-graphic-margin: 4px;
+}
+
+::slotted(*) {
+  --cv-list-padding-right: 0;
+  --cv-list-padding-left: 0;
+  --cv-list-item-text-padding: 16px;
+}
+
+:host([activated]) {
+  color: var(--cv-theme-on-secondary-container);
+
+  ::slotted(cv-icon[slot='graphic']) {
+    color: var(--cv-theme-on-secondary-container);
+  }
+}
+
+:host([selected]:not([activated])) .expansion-header {
+  transition: background-color 250ms animation.$standard-curve-timing-function
+    color 250ms animation.$standard-curve-timing-function;
+  background-color: var(--cv-list-item-selected-background-color);
+  color: var(--cv-list-item-selected-color);
+
+  .mdc-deprecated-list-item__graphic {
+    --mdc-theme-text-icon-on-background: var(--cv-list-item-selected-color);
+  }
+}
+
+:host([subnav]) {
+  --cv-list-item-text-padding: 16px;
+
+  height: 32px;
+  font-weight: var(--mdc-typography-body2-font-weight);
+  border-radius: var(--cv-list-item-border-radius, 100px);
+  padding: 0;
+  padding-right: var(--cv-list-padding-right, 12px);
+  padding-left: var(--cv-list-padding-left, 12px);
+}
+
+:host([graphic='avatar']) .mdc-deprecated-list-item__graphic {
+  --mdc-theme-text-icon-on-background: var(--cv-theme-on-surface);
+
+  margin-left: var(--cv-list-item-graphic-margin-left, 12px);
+  padding-left: 4px;
+  background-color: transparent;
+}
+
+:host([graphic='avatar']) {
+  padding: 0;
+  background-color: transparent;
+}
+
+:host([graphic='avatar']:not([twoline])) {
+  height: 48px;
+}
+
+:host([selected]),
+:host([activated]),
+:host([hasActivatedChild]) {
+  .mdc-deprecated-list-item__graphic.material-icons {
+    font-variation-settings: 'FILL' 1;
+  }
+}
+
+:host([hasChildren]) {
+  flex-direction: column;
+  overflow: visible;
+  height: var(--cv-list-item-height, inherit) !important;
+  background: none;
+  padding: 0;
+
+  --mdc-list-side-padding: 0;
+  --cv-list-item-graphic-margin-left: 0;
+
+  ::slotted(cv-list) {
+    padding-left: 32px;
+  }
+}
+
+:host([hasChildren][open]:hover:not([activated])) {
+  .expansion-header {
+    --mdc-ripple-color: transparent;
+
+    &:hover {
+      --mdc-ripple-color: var(--mdc-theme-on-surface-variant);
+    }
+  }
+}
+
+.expansion-header {
+  position: relative;
+  height: 48px;
+  width: 100%;
+  border-radius: var(--cv-list-item-border-radius, 100px);
+  overflow: hidden;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  background-color: var(--cv-list-item-background-color);
+  color: var(--cv-list-item-text-color);
+
+  mwc-ripple {
+    border-radius: var(--cv-list-item-border-radius, 100px);
+    overflow: hidden;
+  }
+}
+
+.expansion-header-inner {
+  padding: 0 16px;
+}
+
+.expansion-icon {
+  margin-right: var(--cv-list-item-expansion-icon-margin, 0);
+  font-size: var(--cv-list-item-expansion-icon-size, --mdc-icon-size);
+  color: var(
+    --cv-list-item-text-icon-on-background,
+    var(--mdc-theme-text-icon-on-background)
+  );
+}
+
+.expansion-panel {
+  display: block;
+  width: 100%;
+  max-height: var(--cv-list-menu-height, 0);
+  overflow: hidden;
+  transition: max-height 200ms animation.$acceleration-curve-timing-function;
+
+  --mdc-list-side-padding: 72px;
+}
+
+:host([open][hasChildren]:not([twoline])) {
+  height: inherit;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0;
+
+  .expansion-panel {
+    transition-timing-function: animation.$deceleration-curve-timing-function;
+    max-height: var(--cv-list-menu-height, inherit);
+  }
+}

package/src/list/nav-list-item.ts

@@ -0,0 +1,223 @@
+import { css, html, nothing, unsafeCSS } from 'lit';
+import {
+  customElement,
+  property,
+  queryAssignedElements,
+} from 'lit/decorators.js';
+import { CovalentListItem } from './list-item';
+import { styles as controlStyle } from '@material/mwc-list/mwc-control-list-item.css';
+import { styles as listItemStyle } from '@material/mwc-list/mwc-list-item.css';
+import { RequestSelectedDetail } from '@material/mwc-list/mwc-list-item-base';
+import styles from './list-item.scss?inline';
+import navListStyles from './nav-list-item.scss?inline';
+import CovalentList from './list';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-nav-list-item': CovalentNavRailListItem;
+  }
+}
+
+@customElement('cv-nav-list-item')
+export class CovalentNavRailListItem extends CovalentListItem {
+  static override styles = [
+    css`
+      ${unsafeCSS(listItemStyle)}
+    `,
+    css`
+      ${unsafeCSS(controlStyle)}
+    `,
+    css`
+      ${unsafeCSS(styles)}
+    `,
+    css`
+      ${unsafeCSS(navListStyles)}
+    `,
+  ];
+
+  @queryAssignedElements({ slot: 'expansion-panel', flatten: true })
+  expansionPanelElements!: CovalentList[];
+
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
+  @property({ type: Boolean, reflect: true })
+  hasChildren = false;
+
+  activated = false;
+
+  private lastKeySelected = 0;
+
+  private _toggleOpen() {
+    this.open = !this.open;
+  }
+
+  private _handleKeydown(event: KeyboardEvent) {
+    const firstEl = this.expansionPanelElements[0];
+    const nextIndex = firstEl ? firstEl?.getFocusedItemIndex() : 0;
+    const totalItems = firstEl?.items.length ?? 0;
+
+    if (!this.hasChildren) {
+      return;
+    }
+
+    if (event.code === 'Enter') {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      // Toggle only if target press is header else make sure the top headers is deselected
+      if ((event.target as CovalentNavRailListItem).hasChildren) {
+        this._toggleOpen();
+      } else {
+        this._deselectHeader(event);
+      }
+      return;
+    }
+
+    if (!this.open) {
+      return;
+    }
+
+    // Arrow up from top sub item
+    if (
+      event.code === 'ArrowUp' &&
+      nextIndex === 0 &&
+      this.lastKeySelected === 0 &&
+      !(event.target as CovalentNavRailListItem).hasChildren
+    ) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      firstEl.items[0].blur();
+      this.focus();
+      return;
+    }
+    // Arrow up from top sub item down
+    if (event.code === 'ArrowDown' && nextIndex === -1) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      firstEl.focusItemAtIndex(0);
+      this.lastKeySelected = 0;
+    }
+    if (event.code === 'ArrowUp' && nextIndex !== -1) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      firstEl.focusItemAtIndex(nextIndex);
+      this.lastKeySelected = nextIndex;
+    }
+    // Allow arrow up/down if within boundry
+    if (
+      (event.code === 'ArrowDown' || event.code === 'ArrowUp') &&
+      nextIndex !== -1 &&
+      this.lastKeySelected < totalItems - 1
+    ) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      firstEl.focusItemAtIndex(nextIndex);
+      this.lastKeySelected = nextIndex;
+    }
+  }
+
+  private _handleRequestSelected(event: Event) {
+    const ev = event as CustomEvent<RequestSelectedDetail>;
+    if (
+      this.hasChildren &&
+      ev.detail.selected === false &&
+      ev.detail.source === 'property'
+    ) {
+      this._deselectChildren();
+    }
+  }
+
+  private _deselectChildren() {
+    this.expansionPanelElements.forEach((subnav) => {
+      subnav.items.forEach((items) => (items.selected = false));
+    });
+  }
+
+  private _deselectHeader(event: Event) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    this.fireRequestSelected(false, 'interaction');
+    this.activated = false;
+  }
+
+  private _updateMaxHeight(open = this.open) {
+    const content = this.shadowRoot?.querySelector('.expansion-panel');
+    let contentHeight = '0';
+
+    if (open) {
+      contentHeight = content?.scrollHeight
+        ? `${content.scrollHeight}px`
+        : 'inherit';
+    }
+
+    this.style.setProperty('--cv-list-menu-height', contentHeight);
+  }
+
+  renderExpansionItem() {
+    const text = this.renderText();
+    const graphic = this.graphic ? this.renderGraphic() : nothing;
+    const meta = this.renderMeta();
+
+    return html`
+      <div
+        @mousedown=${this._toggleOpen}
+        @touchstart="${this._toggleOpen}"
+        @keydown=${this._toggleOpen}
+        class="expansion-header"
+      >
+        ${this.renderRipple()} ${graphic} ${text} ${meta}
+      </div>
+      <div class="expansion-panel" @click=${this._deselectHeader}>
+        <slot name="expansion-panel"></slot>
+      </div>
+    `;
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    this.addEventListener('keydown', this._handleKeydown);
+    this.addEventListener('request-selected', this._handleRequestSelected);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+
+    this.removeEventListener('keydown', this._handleKeydown);
+    this.addEventListener('request-selected', this._handleRequestSelected);
+  }
+
+  protected override renderMeta() {
+    const arrowIcon = this.open ? 'arrow_drop_up' : 'arrow_drop_down';
+    const arrow = this.hasChildren
+      ? html`<cv-icon class="expansion-icon">${arrowIcon}</cv-icon>`
+      : '';
+
+    return html`<span class="mdc-deprecated-list-item__meta material-icons">
+      ${arrow}
+      <slot name="meta"></slot>
+    </span>`;
+  }
+
+  override firstUpdated() {
+    super.firstUpdated();
+
+    if (this.hasChildren) {
+      this._updateMaxHeight();
+    }
+  }
+
+  override updated(changedProperties: Map<string | number | symbol, unknown>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('open') && this.hasChildren) {
+      this._updateMaxHeight();
+    }
+  }
+
+  override render() {
+    return this.hasChildren ? this.renderExpansionItem() : super.render();
+  }
+}
+
+export default CovalentNavRailListItem;

package/src/list/radio-list-item.ts

@@ -0,0 +1,25 @@
+import { RadioListItemBase } from '@material/mwc-list/mwc-radio-list-item-base';
+import { styles as controlStyle } from '@material/mwc-list/mwc-control-list-item.css';
+import { styles } from '@material/mwc-list/mwc-list-item.css';
+import covalentStyles from './list-item.scss?inline';
+import { customElement } from 'lit/decorators.js';
+import { css, unsafeCSS } from 'lit';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-radio-list-item': CovalentRadioListItem;
+  }
+}
+
+@customElement('cv-radio-list-item')
+export class CovalentRadioListItem extends RadioListItemBase {
+  static override styles = [
+    styles,
+    controlStyle,
+    css`
+      ${unsafeCSS(covalentStyles)}
+    `,
+  ];
+}
+
+export default CovalentRadioListItem;

package/src/menu/menu.scss

@@ -0,0 +1,3 @@
+mwc-menu-surface {
+  --mdc-theme-surface: var(--cv-theme-surface-container);
+}

package/src/menu/menu.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentMenu } from './menu';
+
+describe('Menu', () => {
+  it('should work', () => {
+    expect(new CovalentMenu()).toBeDefined();
+  });
+});