@universal-material/web 3.0.138 → 3.0.140

package/src/index.ts

@@ -0,0 +1,81 @@
+import '@bart-krakowski/get-week-info-polyfill';
+
+import './app-bar/top-app-bar.js';
+import './button/button.js';
+import './button/button-set.js';
+import './button/fab.js';
+import './button/icon-button.js';
+import './card/card.js';
+import './chip/chip.js';
+import './chip/chip-set.js';
+import './chip-field/chip-field.js';
+import './dialog/dialog.js';
+import './checkbox/checkbox.js';
+import './checkbox/checkbox-list-item.js';
+import './radio/radio.js';
+import './radio/radio-list-item.js';
+import './switch/switch.js';
+import './switch/switch-list-item.js';
+import './elevation/elevation.js';
+import './field/field.js';
+import './text-field/text-field.js';
+import './text-area/text-area.js';
+import './select/select.js';
+import './list/list.js';
+import './list/list-item.js';
+import './menu/menu.js';
+import './menu/menu-item.js';
+import './navigation/drawer.js';
+import './navigation/drawer-item.js';
+import './navigation/side-navigation.js';
+import './progress/circular-progress.js';
+import './progress/progress-bar.js';
+import './ripple/ripple.js';
+import './snackbar/snackbar.js';
+import './tab-bar/tab-bar.js';
+import './tab-bar/tab.js';
+import './typeahead/highlight.js';
+import './typeahead/typeahead.js';
+
+export * from './app-bar/top-app-bar.js';
+export * from './button/button.js';
+export * from './button/button-base.js';
+export * from './button/button-set.js';
+export * from './button/fab.js';
+export * from './button/icon-button.js';
+export * from './button-field/button-field.js';
+export * from './calendar/calendar.js';
+export * from './calendar/range-calendar.js';
+export * from './card/card.js';
+export * from './card/card-content.js';
+export * from './card/card-media.js';
+export * from './chip/chip.js';
+export * from './chip-field/chip-field.js';
+export * from './chip/chip-set.js';
+export * from './dialog/dialog.js';
+export * from './checkbox/checkbox.js';
+export * from './radio/radio.js';
+export * from './switch/switch.js';
+export * from './switch/switch-list-item.js';
+export * from './elevation/elevation.js';
+export * from './field/field.js';
+export * from './text-field/text-field.js';
+export * from './text-area/text-area.js';
+export * from './select/select.js';
+export * from './select/option.js';
+export * from './list/list.js';
+export * from './list/list-item.js';
+export * from './menu/menu.js';
+export * from './menu/menu-item.js';
+export * from './navigation/drawer.js';
+export * from './navigation/drawer-item.js';
+export * from './navigation/side-navigation.js';
+export * from './progress/circular-progress.js';
+export * from './progress/progress-bar.js';
+export * from './ripple/ripple.js';
+export * from './snackbar/snackbar.js';
+export * from './tab-bar/tab-bar.js';
+export * from './tab-bar/tab.js';
+export * from './theme/theme-builder.js';
+export * from './typeahead/highlight.js';
+export * from './typeahead/typeahead.js';

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

@@ -0,0 +1,38 @@
+@use "../scss/api";
+
+:host {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: var(--u-list-item-min-height, 56px);
+  padding-block: var(--u-list-item-block-padding, 8px);
+  padding-inline: var(--u-list-item-inline-padding, 16px);
+  gap: var(--u-list-item-gap, 16px);
+}
+
+:host([selectable]) {
+  cursor: pointer;
+}
+
+slot:not([name]) {
+  display: block;
+  margin-inline-end: auto;
+}
+
+slot {
+  flex-shrink: 0;
+}
+
+.content {
+  flex: 1;
+  min-width: 0;
+}
+
+.headline {
+  @include api.typo(body-l, list-item-headline);
+}
+
+.supporting-text {
+  @include api.typo(body-m, list-item-supporting-text);
+  color: var(--u-list-item-supporting-text-color, #{api.get-color-var(on-surface-variant)});
+}

package/src/list/list-item.ts

@@ -0,0 +1,39 @@
+import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { styles } from './list-item.styles.js';
+
+import '../ripple/ripple.js';
+
+@customElement('u-list-item')
+export class UmListItem extends LitElement {
+  static override styles = styles;
+
+  @property({ type: Boolean, reflect: true }) selectable = false;
+
+  override render(): HTMLTemplateResult {
+    const ripple = html`
+      <u-ripple></u-ripple>
+    `;
+
+    return html`
+      ${this.selectable ? ripple : nothing}
+      <slot name="leading" part="leading"></slot>
+      <div class="content" part="content">
+        <div class="headline" part="headline">
+          <slot></slot>
+        </div>
+        <div class="supporting-text" part="supporting-text">
+          <slot name="supporting-text"></slot>
+        </div>
+      </div>
+      <slot name="trailing" part="trailing"></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-list-item': UmListItem;
+  }
+}

package/src/list/list.styles.scss

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  padding-block: var(--u-list-padding, 8px);
+}

package/src/list/list.ts

@@ -0,0 +1,19 @@
+import { html, HTMLTemplateResult, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { styles } from './list.styles.js';
+
+@customElement('u-list')
+export class UmList extends LitElement {
+  static override styles = styles;
+
+  override render(): HTMLTemplateResult {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-list': UmList;
+  }
+}

package/src/menu/menu-item.styles.scss

@@ -0,0 +1,50 @@
+@use '../scss/functions';
+@use '../scss/mixins';
+
+:host {
+  display: block;
+  --_menu-item-icon-size: var(--u-menu-item-icon-size, 1.5rem);
+  --_menu-item-padding: var(--u-menu-item-padding, 12px);
+  --u-focus-ring-outline-offset: -4px;
+
+  height: var(--u-menu-item-height, 56px);
+  padding-inline: var(--_menu-item-padding);
+  color: var(--u-menu-item-label-color, #{functions.get-color-var(on-surface)});
+  @include mixins.typo(label-l, menu-item-label);
+}
+
+:host(:not([has-leading-icon])) .leading {
+  display: none;
+}
+
+:host(:not([has-trailing-icon])) .trailing:has(slot[name=trailing-icon] span:empty) {
+  display: none;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_menu-item-icon-size);
+  height: var(--_menu-item-icon-size);
+  font-size: var(--_menu-item-icon-size);
+  color: var(--u-menu-item-label-color, #{functions.get-color-var(on-surface-variant)});
+}
+
+.content {
+  justify-content: flex-start;
+  gap: var(--u-menu-item-icon-margin, 12px);
+}
+
+:host(.force-focus-ring) .button,
+.button:focus-visible {
+  border-radius: #{functions.get-spacing-var(small)};
+}
+
+.label {
+  flex: 1;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/src/menu/menu-item.ts

@@ -0,0 +1,101 @@
+import { html, HTMLTemplateResult, nothing, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { UmButtonWrapper } from '../shared/button-wrapper.js';
+import { styles } from './menu-item.styles.js';
+
+@customElement('u-menu-item')
+export class UmMenuItem extends UmButtonWrapper {
+  static override styles = [UmButtonWrapper.styles, styles];
+
+  #active = false;
+
+  /**
+   * Force show focus ring
+   */
+  @property({ type: Boolean, reflect: true })
+  get active(): boolean {
+    return this.#active;
+  }
+
+  set active(active: boolean) {
+    this.#active = active;
+
+    if (active) {
+      this.classList.add('force-focus-ring');
+      return;
+    }
+
+    this.classList.remove('force-focus-ring');
+  }
+
+  /**
+   * Whether the menu item has leading icon or not
+   *
+   * _Note:_ Readonly
+   */
+  @property({ type: Boolean, attribute: 'has-leading-icon', reflect: true }) hasLeadingIcon = false;
+
+  /**
+   * Whether the menu item has trailing icon or not
+   *
+   * _Note:_ Readonly
+   */
+  @property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true }) hasTrailingIcon = false;
+
+  /**
+   * Whether the drawer item has badge or not
+   *
+   * _Note:_ Readonly
+   */
+  @property({ type: Boolean, attribute: 'has-badge', reflect: true }) hasBadge = false;
+
+  override innerRole = 'menuitem';
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.role = 'presentation';
+    this.addEventListener('mouseenter', this.#handleMouseEnter);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('mouseenter', this.#handleMouseEnter);
+  }
+
+  readonly #handleMouseEnter = () => this.dispatchEvent(new CustomEvent<UmMenuItem>('menu-item-mouseenter', { bubbles: true }));
+
+  protected override renderContent(): HTMLTemplateResult {
+    return html`
+      <div class="icon leading">
+        <slot name="leading-icon" aria-hidden="true" @slotchange="${this.#handleLeadingIconSlotChange}"></slot>
+      </div>
+      <span class="label" id="text">
+        <slot></slot>
+      </span>
+      <div class="icon trailing">
+        <slot name="trailing-icon" aria-hidden="true" @slotchange="${this.#handleTrailingIconSlotChange}">
+          <span>${this.renderDefaultTrailingIcon()}</span>
+        </slot>
+      </div>
+    `;
+  }
+
+  protected renderDefaultTrailingIcon(): TemplateResult | typeof nothing {
+    return nothing;
+  }
+
+  #handleLeadingIconSlotChange(e: Event) {
+    this.hasLeadingIcon = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;
+  }
+
+  #handleTrailingIconSlotChange(e: Event) {
+    this.hasTrailingIcon = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-menu-item': UmMenuItem;
+  }
+}

package/src/menu/menu.styles.scss

@@ -0,0 +1,70 @@
+@use "../scss/variables";
+@use "../scss/functions";
+
+:host {
+  --u-elevation-level: var(--u-menu-elevation-level, 2);
+  display: block;
+  width: 0;
+}
+
+:host([positioning=relative]) {
+  position: relative;
+}
+
+:host([positioning=fixed]) {
+  position: fixed;
+}
+
+.ref {
+  position: absolute;
+  inset-inline-start: 0;
+  pointer-events: none;
+}
+
+.content {
+  width: 100%;
+  padding-block: var(--u-menu-padding, 8px);
+  opacity: 0;
+  transition: opacity 1ms 400ms;
+  scroll-padding-block: 32px;
+  overflow: auto;
+}
+
+.menu {
+  position: absolute;
+  display: flex;
+  min-width: var(--u-menu-min-width, 112px);
+  max-width: var(--u-menu-max-width, 280px);
+  background: var(--u-menu-bg-color, #{functions.get-color-var(surface-container)});
+  border-radius: var(--u-menu-shape-corner, #{functions.get-shape-corner-var(extra-small)});
+  opacity: 0;
+  transition: transform 350ms variables.$awesome-cubic-bezier 350ms, opacity 350ms;
+  transform: scale3d(1, 0, 0);
+  transform-origin: top;
+  z-index: var(--u-menu-z-index, 1020);
+
+  &.up {
+    transform-origin: bottom;
+  }
+
+  &.open {
+    opacity: 1;
+    transition: transform 350ms variables.$awesome-cubic-bezier, opacity 250ms;
+    transform: scale3d(1, 1, 1);
+
+    .content {
+      opacity: 1;
+      transition: opacity 300ms 150ms;
+    }
+  }
+}
+@keyframes menu-open {
+  from {
+    opacity: 0;
+    transform: scale3d(1, 0, 0);
+  }
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}