@universal-material/web 3.0.140 → 3.0.141

package/src/index.ts

@@ -1,81 +0,0 @@
-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

@@ -1,38 +0,0 @@
-@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

@@ -1,39 +0,0 @@
-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

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

package/src/list/list.ts

@@ -1,19 +0,0 @@
-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

@@ -1,50 +0,0 @@
-@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

@@ -1,101 +0,0 @@
-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

@@ -1,70 +0,0 @@
-@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);
-  }
-}