@universal-material/web 3.0.139 → 3.0.140

package/docs/src/app/app.component.scss

@@ -0,0 +1,109 @@
+@use "../../../src/scss/mixins";
+
+:host {
+  display: block;
+  height: 100vh;
+}
+
+.navigation-headline {
+  padding-block: 16px;
+  margin-block: 0;
+}
+
+.hash-navigation-item {
+  display: block;
+  margin-top: 8px;
+}
+
+.color-picker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  border-radius: 9999px;
+
+  input {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    width: 32px;
+    height: 32px;
+    border: none;
+
+    &::-webkit-color-swatch {
+      border-radius: 50%;
+      border: 1px solid var(--u-color-outline);
+    }
+
+    &::-moz-color-swatch {
+      border-radius: 50%;
+      border: 1px solid var(--u-color-outline);
+    }
+  }
+}
+
+.pane-layout {
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: minmax(0, 1fr);
+  width: 1600px;
+  max-width: 100%;
+  margin-inline: auto;
+  gap: 16px;
+  flex: 1;
+
+  @include mixins.media-breakpoint-up(md) {
+    grid-template-columns: minmax(500px, 992px) minmax(250px, auto);
+    overflow: hidden;
+    padding-inline: 16px;
+    padding-block-end: 16px;
+  }
+}
+
+.pane {
+  position: relative;
+  background: var(--u-color-surface);
+  overflow: hidden;
+  border-radius: 24px;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+
+  @include mixins.media-breakpoint-up(md) {
+    border-radius: 24px;
+  }
+
+  u-elevation {
+    --u-elevation-level: 1;
+  }
+}
+
+.side-pane {
+  display: none;
+  position: relative;
+
+  @include mixins.media-breakpoint-up(md) {
+    display: block;
+  }
+}
+
+.scroll-wrapper {
+  height: 100%;
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
+@include mixins.media-breakpoint-up(md) {
+  .u-container {
+    --u-grid-margin: 24px;
+  }
+}
+
+@include mixins.media-breakpoint-up(lg) {
+  .u-container {
+    --u-grid-margin: 40px;
+  }
+}

package/docs/src/app/app.component.ts

@@ -0,0 +1,158 @@
+import { ThemeBuilder } from '@universal-material/web';
+import { Subject, throttleTime } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ChildActivationEnd, Router, RouterLink, RouterOutlet } from '@angular/router';
+
+import { NavigationItem } from '@docs/components/navigation-item.model';
+
+import { LinkActiveDirective } from './docs/link-active.directive';
+import { SubmenuComponent } from './docs/submenu/submenu.component';
+
+enum ThemeMode {
+  Auto,
+  Light,
+  Dark,
+}
+
+@Component({
+  selector: 'docs-root',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterLink,
+    LinkActiveDirective,
+    SubmenuComponent,
+    RouterOutlet,
+  ],
+  templateUrl: 'app.component.pug',
+  styleUrl: './app.component.scss',
+})
+export class AppComponent {
+  ThemeMode = ThemeMode;
+
+  currentThemeMode = parseInt(localStorage['currentThemeMode'], 10) || 0;
+  themeColor = '#6750a4';
+  $themeColorChange = new Subject<string>();
+
+  anchorsNavigation: { hash: string; title: string }[] = [];
+
+  @ViewChild('scrollWrapper') scrollWrapper!: ElementRef<HTMLElement>;
+
+  constructor(router: Router) {
+    this.applyThemeMode();
+
+    const themeColor = localStorage['currentThemeColor'] || this.themeColor;
+    this.setThemeColor(themeColor);
+
+    this.$themeColorChange
+      .pipe(throttleTime(1000, undefined, { leading: true, trailing: true }))
+      .subscribe(color => this.setThemeColor(color));
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => this.applyThemeMode());
+
+    router.events.subscribe(event => {
+      if (!(event instanceof ChildActivationEnd)) {
+        return;
+      }
+
+      setTimeout(() => this.buildNavigation(), 100);
+    });
+
+    if (localStorage['direction'] === 'rtl') {
+      document.body.setAttribute('dir', 'rtl');
+    }
+  }
+
+  toggleRtl() {
+    const currentDirection = localStorage['direction'];
+
+    localStorage['direction'] = currentDirection === 'rtl' ? '' : 'rtl';
+
+    location.reload();
+  }
+
+  setThemeColor(color: string) {
+    if (localStorage['ignoreThemeColor'] === 'true') {
+      return;
+    }
+
+    const styles = ThemeBuilder.create(color).build();
+
+    let themeStylesElement = document.getElementById('theme-styles');
+
+    if (!themeStylesElement) {
+      themeStylesElement = document.createElement('style');
+      themeStylesElement.id = 'theme-styles';
+      document.head.appendChild(themeStylesElement);
+    }
+
+    themeStylesElement.textContent = styles;
+    localStorage['currentThemeColor'] = color;
+    this.themeColor = color;
+  }
+
+  setThemeMode(mode: ThemeMode) {
+    this.currentThemeMode = mode;
+    localStorage['currentThemeMode'] = mode;
+    this.applyThemeMode();
+  }
+
+  private applyThemeMode() {
+
+    if (this.currentThemeMode === ThemeMode.Light) {
+      document.documentElement.classList.add('u-light');
+      document.documentElement.classList.remove('u-dark');
+      return;
+    }
+
+    if (this.currentThemeMode === ThemeMode.Dark) {
+      document.documentElement.classList.add('u-dark');
+      document.documentElement.classList.remove('u-light');
+      return;
+    }
+
+    document.documentElement.classList.remove('u-light');
+    document.documentElement.classList.remove('u-dark');
+  }
+
+  private buildNavigation() {
+    const anchors = Array.from(document.querySelectorAll('a'));
+
+    this.anchorsNavigation.length = 0;
+
+    for (const anchor of anchors) {
+      if (anchor.host !== location.host) {
+        anchor.target = '_blank';
+        continue;
+      }
+
+      if (!anchor.hash?.startsWith('#')) {
+        continue;
+      }
+
+      const navigationItem = {
+        hash: anchor.hash,
+        title: anchor.textContent!,
+      };
+
+      anchor.addEventListener('click', e => this.navigateToAnchor(e, navigationItem));
+      this.anchorsNavigation.push(navigationItem);
+    }
+  }
+
+  navigateToAnchor(e: Event, item: NavigationItem) {
+    e.preventDefault();
+    const target = document.querySelector<HTMLElement>(`a[href="${item.hash}"]`);
+
+    if (!target) {
+      return;
+    }
+
+    this.scrollWrapper.nativeElement.scrollTo({
+      top: target.offsetTop - 24,
+    });
+  }
+}

package/docs/src/app/app.config.ts

@@ -0,0 +1,26 @@
+import { provideHighlightOptions } from 'ngx-highlightjs';
+import { provideMarkdown } from 'ngx-markdown';
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter, withHashLocation } from '@angular/router';
+
+import { routes } from './app.routes';
+
+// config.navigationDrawer.useSwiperJs = true;
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes, withHashLocation()),
+    provideHighlightOptions({
+      coreLibraryLoader: () => import('highlight.js/lib/core'),
+      lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'), // Optional, add line numbers if needed
+      languages: {
+        shell: () => import('highlight.js/lib/languages/shell'),
+        javascript: () => import('highlight.js/lib/languages/javascript'),
+        typescript: () => import('highlight.js/lib/languages/typescript'),
+        css: () => import('highlight.js/lib/languages/css'),
+        xml: () => import('highlight.js/lib/languages/xml'),
+      },
+    }),
+    provideMarkdown(),
+  ],
+};

package/docs/src/app/app.routes.ts

@@ -0,0 +1,140 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  {
+    path: 'content/typography',
+    loadComponent: () => import('@docs/content/typography/typography.component').then(c => c.TypographyComponent)
+  },
+  {
+    path: 'components/button-set',
+    loadComponent: () => import('@docs/components/button-set/button-set.component').then(c => c.ButtonSetComponent)
+  },
+  {
+    path: 'components/cards',
+    loadComponent: () => import('@docs/components/cards/cards.component').then(c => c.CardsComponent)
+  },
+  {
+    path: 'components/checkbox',
+    loadComponent: () => import('@docs/components/checkbox/checkbox.component').then(c => c.CheckboxComponent)
+  },
+  {
+    path: 'components/chips',
+    loadComponent: () => import('@docs/components/chips/chips.component').then(c => c.ChipsComponent)
+  },
+  {
+    path: 'components/chip-field',
+    loadComponent: () => import('@docs/components/chip-field/chip-field.component').then(c => c.ChipFieldComponent)
+  },
+  {
+    path: 'components/common-buttons',
+    loadComponent: () => import('@docs/components/common-buttons/common-buttons.component').then(c => c.CommonButtonsComponent)
+  },
+  {
+    path: 'components/tables',
+    loadComponent: () => import('@docs/components/tables/tables.component').then(c => c.TablesComponent)
+  },
+  {
+    path: 'components/datepicker',
+    loadComponent: () => import('@docs/components/datepicker/datepicker.component').then(c => c.DatepickerComponent)
+  },
+  {
+    path: 'components/dialogs',
+    loadComponent: () => import('@docs/components/dialogs/dialogs.component').then(c => c.DialogsComponent)
+  },
+  {
+    path: 'utilities/dividers',
+    loadComponent: () => import('@docs/utilities/dividers/dividers.component').then(c => c.DividersComponent)
+  },
+  {
+    path: 'components/expansion-panel',
+    loadComponent: () => import('@docs/components/expansion-panel/expansion-panel.component').then(c => c.ExpansionPanelComponent)
+  },
+  {
+    path: 'components/fab',
+    loadComponent: () => import('@docs/components/fab/fab.component').then(c => c.FabComponent)
+  },
+  {
+    path: 'components/icon-buttons',
+    loadComponent: () => import('@docs/components/icon-buttons/icon-buttons.component').then(c => c.IconButtonsComponent)
+  },
+  {
+    path: 'components/lists',
+    loadComponent: () => import('@docs/components/lists/lists.component').then(c => c.ListsComponent)
+  },
+  {
+    path: 'components/menus',
+    loadComponent: () => import('@docs/components/menus/menus.component').then(c => c.MenusComponent)
+  },
+  {
+    path: 'components/progress',
+    loadComponent: () => import('@docs/components/progress/progress.component').then(c => c.ProgressComponent)
+  },
+  {
+    path: 'components/ripple',
+    loadComponent: () => import('@docs/components/ripple/ripple.component').then(c => c.RippleComponent)
+  },
+  {
+    path: 'components/selection-controls',
+    loadComponent: () => import('@docs/components/selection-controls/selection-controls.component').then(c => c.SelectionControlsComponent)
+  },
+  {
+    path: 'components/sliders',
+    loadComponent: () => import('@docs/components/sliders/sliders.component').then(c => c.SlidersComponent)
+  },
+  {
+    path: 'components/snackbars',
+    loadComponent: () => import('@docs/components/snackbars/snackbars.component').then(c => c.SnackbarsComponent)
+  },
+  {
+    path: 'components/steppers',
+    loadComponent: () => import('@docs/components/steppers/steppers.component').then(c => c.SteppersComponent)
+  },
+  {
+    path: 'components/tabs',
+    loadComponent: () => import('@docs/components/tabs/tabs.component').then(c => c.TabsComponent)
+  },
+  {
+    path: 'components/text-fields',
+    loadComponent: () => import('@docs/components/text-fields/text-fields.component').then(c => c.TextFieldsComponent)
+  },
+  {
+    path: 'components/select',
+    loadComponent: () => import('@docs/components/select/select.component').then(c => c.SelectComponent)
+  },
+  {
+    path: 'components/typeahead',
+    loadComponent: () => import('@docs/components/typeahead/typeahead.component').then(c => c.TypeaheadComponent)
+  },
+  {
+    path: 'components/toolbars',
+    loadComponent: () => import('@docs/components/toolbars/toolbars.component').then(c => c.ToolbarsComponent)
+  },
+  {
+    path: 'layout/container',
+    loadComponent: () => import('@docs/layout/container/container.component').then(c => c.ContainerComponent)
+  },
+  {
+    path: 'layout/grid',
+    loadComponent: () => import('@docs/layout/grid/grid.component').then(c => c.GridComponent)
+  },
+  {
+    path: 'utilities/background-colors',
+    loadComponent: () => import('@docs/utilities/background-colors/background-colors.component').then(c => c.BackgroundColorsComponent)
+  },
+  {
+    path: 'utilities/text-and-background-colors',
+    loadComponent: () => import('@docs/utilities/text-and-background-colors/text-and-background-colors.component').then(c => c.TextAndBackgroundColorsComponent)
+  },
+  {
+    path: 'utilities/text-colors',
+    loadComponent: () => import('@docs/utilities/text-colors/text-colors.component').then(c => c.TextColorsComponent)
+  },
+  {
+    path: 'utilities/text-emphasis',
+    loadComponent: () => import('@docs/utilities/text-emphasis/text-emphasis.component').then(c => c.TextEmphasisComponent)
+  },
+  {
+    path: '',
+    loadComponent: () => import('@docs/introduction/introduction.component').then(c => c.IntroductionComponent)
+  }
+];

package/docs/src/app/components/button-set/button-set.component.pug

@@ -0,0 +1,13 @@
+docs-title(title="Button set")
+
+docs-example(
+  sectionTitle="Usage",
+  [html]="usageHtml")
+
+docs-example(
+  sectionTitle="Stack",
+  [html]="stackHtml")
+
+docs-example(
+  sectionTitle="Alignment",
+  [html]="alignmentHtml")

package/docs/src/app/components/button-set/button-set.component.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+import { ApisTableComponent } from '@docs/docs/apis-table/apis-table.component';
+import { ExampleComponent } from '@docs/docs/example/example.component';
+import { TitleComponent } from '@docs/docs/title/title.component';
+
+// @ts-ignore
+import usageHtml from '!raw-loader!./examples/usage.html';
+// @ts-ignore
+import stackHtml from '!raw-loader!./examples/stack.html';
+// @ts-ignore
+import alignmentHtml from '!raw-loader!./examples/alignment.html';
+
+@Component({
+  selector: 'docs-button-set',
+  templateUrl: './button-set.component.pug',
+  styleUrl: './button-set.component.scss',
+  standalone: true,
+  imports: [
+    ApisTableComponent,
+    ExampleComponent,
+    TitleComponent
+  ]
+})
+export class ButtonSetComponent {
+  usageHtml = usageHtml;
+  stackHtml = stackHtml;
+  alignmentHtml = alignmentHtml;
+}

package/docs/src/app/components/button-set/examples/alignment.html

@@ -0,0 +1,29 @@
+<u-button-set>
+  <u-button variant="outlined">Cancel</u-button>
+  <u-button>Ok</u-button>
+</u-button-set>
+
+<u-button-set alignment="center">
+  <u-button variant="outlined">Cancel</u-button>
+  <u-button>Ok</u-button>
+</u-button-set>
+
+<u-button-set alignment="start">
+  <u-button variant="outlined">Cancel</u-button>
+  <u-button>Ok</u-button>
+</u-button-set>
+
+<u-button-set stack>
+  <u-button variant="outlined">Cancel</u-button>
+  <u-button>Ok</u-button>
+</u-button-set>
+
+<u-button-set alignment="center" stack>
+  <u-button variant="outlined">Cancel</u-button>
+  <u-button>Ok</u-button>
+</u-button-set>
+
+<u-button-set alignment="start" stack>
+  <u-button variant="outlined">Cancel</u-button>
+  <u-button>Ok</u-button>
+</u-button-set>

package/docs/src/app/components/button-set/examples/stack.html

@@ -0,0 +1,5 @@
+<u-button-set stack>
+  <u-button variant="text">Set</u-button>
+  <u-button variant="text">Cancel</u-button>
+  <u-button variant="text">Clear</u-button>
+</u-button-set>

package/docs/src/app/components/button-set/examples/usage.html

@@ -0,0 +1,35 @@
+<u-button-set>
+  <u-fab>
+    <span class="material-symbols-outlined">edit</span>
+  </u-fab>
+
+  <u-button>Filled</u-button>
+
+  <u-icon-button variant="outlined">
+    <span class="material-symbols-outlined material-symbols-fill">favorite</span>
+  </u-icon-button>
+</u-button-set>
+
+<u-button-set alignment="center">
+  <u-fab>
+    <span class="material-symbols-outlined">edit</span>
+  </u-fab>
+
+  <u-button>Filled</u-button>
+
+  <u-icon-button variant="outlined">
+    <span class="material-symbols-outlined material-symbols-fill">favorite</span>
+  </u-icon-button>
+</u-button-set>
+
+<u-button-set alignment="start">
+  <u-fab>
+    <span class="material-symbols-outlined">edit</span>
+  </u-fab>
+
+  <u-button>Filled</u-button>
+
+  <u-icon-button variant="outlined">
+    <span class="material-symbols-outlined material-symbols-fill">favorite</span>
+  </u-icon-button>
+</u-button-set>

package/docs/src/app/components/cards/cards.component.pug

@@ -0,0 +1,15 @@
+docs-title(title="Cards")
+
+docs-example(
+  sectionTitle="Variants",
+  [html]="variantsHtml")
+
+docs-example(
+  sectionTitle="Card with actions",
+  [html]="cardWithActionsHtml")
+
+docs-example(
+  sectionTitle="Card media",
+  [html]="cardMediaHtml")
+
+docs-apis-table(key="card")

package/docs/src/app/components/cards/cards.component.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+import { ApisTableComponent } from '@docs/docs/apis-table/apis-table.component';
+import { ExampleComponent } from '@docs/docs/example/example.component';
+import { TitleComponent } from '@docs/docs/title/title.component';
+
+// @ts-ignore
+import variantsHtml from '!raw-loader!./examples/simple-card.html';
+// @ts-ignore
+import cardWithActionsHtml from '!raw-loader!./examples/card-with-actions.html';
+// @ts-ignore
+import cardMediaHtml from '!raw-loader!./examples/card-media.html';
+
+@Component({
+  selector: 'docs-cards',
+  templateUrl: './cards.component.pug',
+  styleUrl: './cards.component.scss',
+  standalone: true,
+  imports: [
+    ApisTableComponent,
+    ExampleComponent,
+    TitleComponent
+  ]
+})
+export class CardsComponent {
+  variantsHtml = variantsHtml;
+  cardWithActionsHtml = cardWithActionsHtml;
+  cardMediaHtml = cardMediaHtml;
+}

package/docs/src/app/components/cards/examples/card-media.html

@@ -0,0 +1,39 @@
+<div class="u-grid u-gutter-small" style="--u-grid-columns: 2">
+  <u-card variant="filled">
+    <u-card-media wide class="example-card-media" slot="before-content"></u-card-media>
+    <div class="u-headline-l">Headline</div>
+    <div class="u-headline-s mb-3">Subhead</div>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
+  </u-card>
+
+  <u-card variant="filled">
+    <div class="u-headline-l">Headline</div>
+    <div class="u-headline-s">Subhead</div>
+    <u-card-media wide class="example-card-media u-my-small"></u-card-media>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
+  </u-card>
+
+  <u-card variant="filled">
+    <u-card-media class="example-card-media u-dark-mode" slot="before-content">
+      <u-card-content class="u-dark">
+        <div class="u-headline-s">Headline</div>
+        <div class="u-title-m u-text-low-emphasis u-mb-small">Subhead</div>
+        <u-button-set>
+          <u-button variant="outlined">Action 1</u-button>
+          <u-button>Action 2</u-button>
+        </u-button-set>
+      </u-card-content>
+    </u-card-media>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
+  </u-card>
+
+  <u-card variant="filled">
+    <u-card-media class="example-card-media u-dark-mode" wide slot="before-content">
+      <u-card-content class="u-dark">
+        <div class="u-headline-s">Headline</div>
+        <div class="u-title-m u-text-low-emphasis">Subhead</div>
+      </u-card-content>
+    </u-card-media>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
+  </u-card>
+</div>

package/docs/src/app/components/cards/examples/card-with-actions.html

@@ -0,0 +1,40 @@
+<div class="u-grid u-gutter-small">
+  <u-card variant="filled">
+    <div class="u-headline-l">Headline</div>
+    <div class="u-headline-s mb-3">Subhead</div>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
+    <u-button-set>
+      <u-button variant="text">Cancel</u-button>
+      <u-button variant="text">Ok</u-button>
+    </u-button-set>
+  </u-card>
+
+  <u-card variant="filled">
+    <div class="u-headline-l">Headline</div>
+    <div class="u-headline-s mb-3">Subhead</div>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
+    <div class="u-divider"></div>
+    <u-button-set>
+      <u-icon-button>
+        <span class="material-symbols-outlined">share</span>
+      </u-icon-button>
+      <u-icon-button>
+        <span class="material-symbols-outlined">star</span>
+      </u-icon-button>
+    </u-button-set>
+  </u-card>
+
+  <u-card variant="filled">
+    <div class="u-headline-l">Headline</div>
+    <div class="u-headline-s mb-3">Subhead</div>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum tristique risus vitae eleifend. Vivamus augue nulla, malesuada vel efficitur eu, ornare et ex. Duis vel lobortis est. Ut quis imperdiet tellus, in vestibulum justo. Aenean placerat ex at ex ultrices feugiat.</p>
+    <div slot="after-content">
+      <div class="u-divider-no-margin"></div>
+      <u-card-content>
+        <u-button-set>
+          <u-button variant="text">Expand</u-button>
+        </u-button-set>
+      </u-card-content>
+    </div>
+  </u-card>
+</div>