@mjsz-vbr-elements/shared 2.32.0 → 2.33.1

package/assets/css/components/list.css

@@ -0,0 +1,138 @@
+@layer components.variables {
+  :where(:host) {
+    --mvw-list-item-font-size: var(--font-size-400);
+    --mvw-list-item-color: light-dark(var(--mvw-color-primary-500), var(--mvw-color-primary-200));
+    --mvw-list-item-hover-color: light-dark(var(--mvw-color-primary-800), var(--mvw-color-primary-50));
+    --mvw-list-item-hover-bg-color: light-dark(var(--mvw-color-primary-50), var(--mvw-color-primary-900));
+    --mvw-list-item-selected-color: light-dark(var(--mvw-color-secondary-700), var(--mvw-color-secondary-300));
+  }
+}
+@layer components {
+  :where(.list) {
+    list-style: none;
+    margin: 0;
+    padding: var(--size-4);
+
+    @media (pointer: coarse) {
+      &,
+      * {
+        user-select: none;
+      }
+    }
+
+    :where(li, option, [role='group'] > label) {
+      align-items: center;
+      /* background: var(--_bg-color) var(--ripple, none); */
+      display: flex;
+      /* font-size: var(--font-size-sm); */
+      gap: var(--size-4);
+      isolation: isolate;
+      min-block-size: 40px;
+      /* padding: var(--size-4) var(--size-6); */
+      position: relative;
+
+      &::before {
+        display: none; /* removing checkmark from option */
+      }
+
+      * {
+        font-size: inherit;
+      }
+
+      /* Clickable list item */
+      &:has(> a, > button, > label) {
+        background: transparent;
+        display: block;
+        min-block-size: auto;
+        padding: 0;
+      }
+
+      /* Select option */
+      /* &:where(option) {
+        align-items: center;
+        background-color: var(--_bg-color);
+        color: inherit;
+        cursor: pointer;
+        display: flex;
+        gap: var(--size-8);
+        inline-size: 100%;
+        margin: 0;
+        min-block-size: 40px;
+        padding: var(--size-4) var(--size-8);
+        text-align: start;
+        text-decoration: none;
+        z-index: 0;
+
+        &:hover {
+          background-color: light-dark(var(--gray-2), var(--gray-14));
+        }
+
+        &:checked {
+          background-color: oklch(from var(--primary) l c h / 30%);
+        }
+      } */
+
+      & > a,
+      & > button,
+      & > label {
+        align-items: center;
+        color: var(--mvw-list-item-color);
+        cursor: pointer;
+        display: flex;
+        gap: var(--size-8);
+        inline-size: 100%;
+        margin: 0;
+        outline-offset: -1px;
+        font-size: var(--mvw-list-item-font-size);
+        padding: var(--size-4) var(--size-6);
+        text-align: start;
+        text-decoration: none;
+        border-radius: var(--radius-2);
+        z-index: 0;
+
+        &:focus,
+        &:focus-visible,
+        &:hover {
+          color: var(--mvw-list-item-hover-color);
+          background-color: var(--mvw-list-item-hover-bg-color);
+        }
+
+        &[aria-selected='true'] {
+          color: var(--mvw-list-item-selected-color);
+        }
+
+        /* Text */
+        .text {
+          flex: 1;
+          line-height: 1.6;
+
+          :where(h1, h2, h3, h4, h5, h6, p, span) {
+            color: inherit;
+            font-weight: 400;
+          }
+
+          p + p {
+            font-size: var(--font-size-100);
+          }
+        }
+
+        /* Leading content */
+        .start {
+          align-self: center;
+          align-items: center;
+          display: grid;
+          z-index: 1;
+
+          /* &:has(svg) {
+            max-inline-size: calc(var(--mvw-list-item-font-size) - 10px);
+          } */
+
+          svg {
+            /* padding-block-start: 0.125rem; */
+            inline-size: var(--mvw-list-item-font-size);
+          }
+        }
+      }
+    }
+  }
+}

package/assets/css/components/loading-indicator.css

@@ -0,0 +1,8 @@
+@layer components {
+  :where(.loading-indicator) {
+    padding: var(--size-16);
+    font-weight: 600;
+    color: var(--mvw-loading-indicator-text-color, var(--mvw-text-toned));
+    text-align: center;
+  }
+}

package/assets/css/components/paginator.css

@@ -0,0 +1,63 @@
+@layer components.variables {
+  :where(:host) {
+    --mvw-paginator-color: light-dark(var(--mvw-color-primary-500), var(--mvw-color-primary-400));
+    --mvw-paginator-bg-color: light-dark(var(--mvw-color-white), var(--mvw-color-primary-950));
+    --mvw-paginator-hover-color: light-dark(var(--mvw-color-primary-700), var(--mvw-color-primary-300));
+    --mvw-paginator-hover-bg-color: light-dark(var(--mvw-color-primary-100), var(--mvw-color-primary-900));
+    --mvw-paginator-border-color: light-dark(var(--mvw-color-primary-100), var(--mvw-color-primary-700));
+    --mvw-paginator-active-color: light-dark(var(--mvw-color-white), var(--mvw-color-black));
+    --mvw-paginator-active-bg-color: light-dark(var(--mvw-color-primary-900), var(--mvw-color-primary-50));
+    --mvw-paginator-disabled-color: light-dark(var(--mvw-color-primary-200), var(--mvw-color-primary-600));
+  }
+}
+
+@layer components {
+  :where(.paginator) {
+    display: flex;
+    flex-direction: row;
+    list-style-type: none;
+    margin: 10px 0;
+    padding: 0;
+
+    button,
+    div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--size-6) var(--size-12); /* 6px 12px; */
+      text-decoration: none;
+      cursor: pointer;
+      color: var(--mvw-paginator-color);
+      border: 1px solid var(--mvw-paginator-border-color);
+      background-color: var(--mvw-paginator-bg-color);
+      margin-left: -1px;
+
+      .icon {
+        width: var(--size-16);
+        height: var(--size-16);
+        margin: 0 -4px;
+        max-inline-size: var(--size-16);
+      }
+
+      &:hover:not(&.is-disabled, &.is-active) {
+        color: var(--mvw-paginator-hover-color);
+        background-color: var(--mvw-paginator-hover-bg-color);
+      }
+
+      &:disabled,
+      &.is-disabled {
+        color: var(--mvw-paginator-disabled-color);
+        background-color: var(--mvw-paginator-bg-color);
+        pointer-events: none;
+        cursor: default;
+      }
+
+      &.is-active {
+        color: var(--mvw-paginator-active-color);
+        background-color: var(--mvw-paginator-active-bg-color);
+        border-color: var(--mvw-paginator-active-bg-color);
+        cursor: default;
+      }
+    }
+  }
+}

package/assets/css/components/playoffs.css

@@ -0,0 +1,81 @@
+@layer components.variables {
+  :where(:host) {
+    --mvw-playoffs-header-bg: light-dark(var(--mvw-color-primary-800), var(--mvw-color-primary-300));
+    --mvw-playoffs-header-color: light-dark(var(--mvw-color-primary-100), var(--mvw-color-primary-800));
+    --mvw-playoffs-header-size: var(--font-size-500);
+    --mvw-playoffs-details-bg: light-dark(var(--mvw-color-primary-100), var(--mvw-color-primary-800));
+  }
+}
+
+@layer components {
+  :where(.playoffs) {
+    --_logo-size: 70px;
+
+    .section-title {
+      padding: var(--size-8);
+      text-align: center;
+      font-size: var(--mvw-playoffs-header-size);
+      font-weight: 700;
+      color: var(--mvw-playoffs-header-color);
+      background-color: var(--mvw-playoffs-header-bg);
+    }
+
+    .section-details {
+      display: grid;
+      align-items: center;
+      justify-items: center;
+      gap: var(--size-16);
+      padding: var(--size-16);
+      background-color: var(--mvw-playoffs-details-bg);
+
+      @media (width > 576px) {
+        grid-template-columns:
+          1fr fit-content(var(--_logo-size)) fit-content(var(--_logo-size)) fit-content(var(--_logo-size))
+          1fr;
+      }
+
+      .is-result {
+        font-size: var(--mvw-playoffs-reasult-size, calc(var(--font-size-500) * 4));
+        font-weight: 700;
+        text-align: center;
+        color: var(--mvw-text-highlighted);
+      }
+
+      .is-team-name {
+        font-size: var(--font-size-700);
+        font-weight: 700;
+        color: var(--mvw-text-highlighted);
+      }
+    }
+
+    .table-grid {
+      display: grid;
+      grid-template-columns:
+        70px 160px 60px minmax(160px, 1fr) minmax(40px, 60px) 5ch minmax(160px, 1fr)
+        minmax(180px, 1.2fr);
+      color: var(--mvw-table-color);
+
+      &:nth-child(odd) > div {
+        background-color: var(
+          --mvw-table-stripped-bg-color,
+          light-dark(var(--mvw-color-primary-50), var(--mvw-color-primary-900))
+        );
+      }
+
+      &:hover > div {
+        background-color: var(
+          --mvw-table-hover-bg-color,
+          light-dark(var(--mvw-color-secondary-100), var(--mvw-color-secondary-400))
+        );
+      }
+
+      &.is-optional {
+        opacity: 0.5;
+      }
+
+      > div {
+        padding: var(--size-8);
+      }
+    }
+  }
+}

package/assets/css/components/progress.css

@@ -0,0 +1,67 @@
+@layer components.variables {
+  :where(:host) {
+    --mvw-progress-height: 10px;
+    --mvw-progress-border-radius: 5px;
+    --mvw-progress-bg-color: light-dark(var(--mvw-color-primary-50), var(--mvw-color-primary-900));
+    --mvw-progress-bar-color: var(--mvw-color-live);
+    --mvw-progress-bar-stripe-color: rgba(from var(--mvw-color-white) r g b / 20%);
+    --mvw-progress-bar-stripe-angle: 45deg;
+  }
+}
+
+@layer components {
+  :where(.progress) {
+    display: flex;
+    height: var(--mvw-progress-height, 10px);
+    overflow: hidden;
+    /* font-size: var(--font-size-50); */
+    background-color: var(--mvw-progress-bg-color);
+    border-radius: var(--mvw-progress-border-radius);
+
+    .progress-bar {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      overflow: hidden;
+      width: 100%;
+      color: var(--mvw-color-white);
+      text-align: center;
+      white-space: nowrap;
+      background-color: var(--mvw-progress-bar-color);
+      transition: width 1s ease;
+    }
+
+    .progress-bar-stripped {
+      --color: var(--mvw-progress-bar-stripe-color);
+      --angle: var(--mvw-progress-bar-stripe-angle);
+
+      background-image: linear-gradient(
+        var(--angle),
+        var(--color) 25%,
+        transparent 25%,
+        transparent 50%,
+        var(--color) 50%,
+        var(--color) 75%,
+        transparent 75%,
+        transparent
+      );
+
+      background-size: var(--mvw-progress-height) var(--mvw-progress-height);
+      background-repeat: repeat;
+    }
+
+    .progress-bar-animated {
+      animation: 1s linear infinite progress-bar-stripes;
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+    }
+  }
+
+  @keyframes progress-bar-stripes {
+    0% {
+      background-position-x: var(--mvw-progress-height);
+    }
+  }
+}

package/assets/css/components/responsive-table.css

@@ -0,0 +1,13 @@
+@layer components {
+  :where(.table-responsive) {
+    container-name: table-wrapper;
+    container-type: inline-size;
+
+    width: 100%;
+    overflow-x: auto;
+
+    :where(table) {
+      width: 100%;
+    }
+  }
+}

package/assets/css/components/standings-selector.css

@@ -0,0 +1,79 @@
+@layer components.variables {
+  :where(:host) {
+    --mvw-standings-selector-title-size: var(--font-size-500);
+    --mvw-standings-selector-title-color: light-dark(var(--mvw-color-primary-700), var(--mvw-color-primary-300));
+    --mvw-standings-selector-title-transform: none;
+    --mvw-standings-selector-title-padding: 0 0.625em 0.5625em;
+    --mvw-standings-selector-title-bg-color: transparent;
+
+    --mvw-standings-selector-section-title-bg: light-dark(var(--mvw-color-primary-50), var(--mvw-color-primary-900));
+    --mvw-standings-selector-section-title-size: var(--font-size-400);
+    --mvw-standings-selector-section-title-color: light-dark(
+      var(--mvw-color-primary-700),
+      var(--mvw-color-primary-300)
+    );
+    --mvw-standings-selector-section-title-padding: var(--size-8);
+    --mvw-standings-selector-section-logo-size: 30px;
+  }
+}
+
+@layer components {
+  :where(.standings-selector) {
+    .standings-selector-title {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      align-items: center;
+      padding: var(--mvw-standings-selector-title-padding);
+      text-transform: var(--mvw-standings-selector-title-transform);
+      font-size: var(--mvw-standings-selector-title-size);
+      color: var(--mvw-standings-selector-title-color);
+      background: var(--mvw-standings-selector-title-bg-color);
+    }
+
+    .is-title-text {
+      svg {
+        height: 16px;
+        vertical-align: middle;
+      }
+    }
+
+    :where(.playoffs) {
+      ul {
+        display: grid;
+        grid-template-columns:
+          minmax(0, 1fr) var(--mvw-standings-selector-section-logo-size) auto var(
+            --mvw-standings-selector-section-logo-size
+          )
+          minmax(0, 1fr);
+        gap: 12px;
+        align-items: center;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      li {
+        padding-block: 8px;
+
+        &:first-of-type {
+          text-align: end;
+        }
+      }
+
+      img {
+        display: block;
+        width: 100%;
+        aspect-ratio: 1;
+      }
+
+      .section-title {
+        padding: var(--mvw-standings-selector-section-title-padding);
+        color: var(--mvw-standings-selector-section-title-color);
+        background-color: var(--mvw-standings-selector-section-title-bg);
+        font-size: var(--mvw-standings-selector-section-title-size);
+        font-weight: 700;
+        text-align: center;
+      }
+    }
+  }
+}

package/assets/css/components/table.css

@@ -0,0 +1,205 @@
+@layer components.variables {
+  :where(:host) {
+    /* Table */
+    --mvw-table-header-font-size: var(--font-size-200);
+    --mvw-table-default-column-width: 40px;
+    --mvw-table-default-bg-color: light-dark(var(--mvw-color-white), var(--mvw-color-primary-900));
+    --mvw-table-color: light-dark(var(--mvw-color-primary-800), var(--mvw-color-primary-200));
+    --mvw-table-neutral-color: light-dark(var(--mvw-color-primary-300), var(--mvw-color-primary-700));
+    --mvw-table-header-bg-color: light-dark(var(--mvw-color-primary-800), var(--mvw-color-primary-200));
+    --mvw-table-header-color: light-dark(var(--mvw-color-primary-200), var(--mvw-color-primary-800));
+    --mvw-table-header-hover-bg-color: light-dark(var(--mvw-color-primary-700), var(--mvw-color-primary-300));
+    --mvw-table-header-active-bg-color: light-dark(var(--mvw-color-primary-700), var(--mvw-color-primary-300));
+    --mvw-table-header-active-color: light-dark(var(--mvw-color-white), var(--mvw-color-primary-900));
+    --mvw-table-hover-color: light-dark(var(--mvw-color-primary-900), var(--mvw-color-white));
+    --mvw-table-hover-bg-color: light-dark(var(--mvw-color-secondary-100), var(--mvw-color-primary-950));
+    --mvw-table-active-color: light-dark(var(--mvw-color-secondary-900), var(--mvw-color-secondary-100));
+    --mvw-table-active-bg-color: light-dark(var(--mvw-color-secondary-200), var(--mvw-color-secondary-800));
+    --mvw-table-active-even-bg-color: light-dark(var(--mvw-color-secondary-300), var(--mvw-color-secondary-700));
+    --mvw-table-active-hover-color: light-dark(var(--mvw-color-secondary-900), var(--mvw-color-secondary-100));
+    --mvw-table-active-hover-bg-color: light-dark(var(--mvw-color-secondary-400), var(--mvw-color-secondary-500));
+    --mvw-table-portrait-border-color: light-dark(var(--mvw-color-primary-100), var(--mvw-color-primary-900));
+    --mvw-table-portrait-bg-color: light-dark(var(--mvw-color-primary-50), var(--mvw-color-primary-900));
+    --mvw-table-stripped-bg-color: light-dark(
+      hsl(from var(--mvw-color-primary-50) h s calc(l + 3)),
+      hsl(from var(--mvw-color-primary-900) h s calc(l + 2))
+    );
+    --mvw-table-label-color: light-dark(var(--mvw-color-primary-500), var(--mvw-color-primary-400));
+    --mvw-table-label-bg-color: light-dark(var(--mvw-color-primary-50), var(--mvw-color-primary-900));
+    --mvw-table-cell-logo-size: 20px;
+    --mvw-table-cell-portrait-size: 26px;
+    --mvw-table-caption-color: light-dark(var(--mvw-color-primary-400), var(--mvw-color-primary-600));
+    --mvw-table-caption-font-size: var(--font-size-200);
+  }
+}
+
+@layer components {
+  :where(.table) {
+    border-collapse: collapse;
+    max-inline-size: 100%;
+    position: relative;
+    color: var(--mvw-table-color);
+    background-color: var(--mvw-table-default-bg-color);
+
+    /* Rows */
+    tr {
+      background-color: var(--surface-default);
+      border-top: 1px solid var(--border-color);
+
+      &:hover {
+        background-color: oklch(from var(--surface-filled) l c h / 75%);
+      }
+
+      &:nth-child(even) {
+        background: var(--mvw-table-stripped-bg-color);
+
+        td.is-active {
+          background-color: var(--mvw-table-active-even-bg-color);
+        }
+      }
+
+      &.is-highlighted {
+        color: var(--mvw-color-error);
+      }
+      &.is-optional {
+        opacity: 0.5;
+      }
+    }
+
+    /* Cells */
+    :is(th, td) {
+      padding: var(--size-8);
+      white-space: nowrap;
+      text-align: center;
+    }
+
+    th {
+      background: var(--mvw-table-header-bg-color);
+      color: var(--mvw-table-header-color);
+      font-size: var(--mvw-table-header-font-size);
+      font-weight: 700;
+      text-align: center;
+      width: var(--mvw-table-default-column-width);
+
+      &:focus-visible,
+      &:hover {
+        background-color: var(--mvw-table-header-hover-bg-color);
+        outline: none;
+      }
+
+      &.is-sortable {
+        position: relative;
+        cursor: pointer;
+
+        .is-icon-sort {
+          opacity: 0.5;
+        }
+      }
+
+      &.is-active {
+        background-color: var(--mvw-table-header-active-bg-color);
+        color: var(--mvw-table-header-active-color);
+
+        .is-icon-sort {
+          opacity: 1;
+        }
+      }
+
+      &.is-has-image,
+      &.has-avatar {
+        width: 0;
+      }
+
+      .is-icon-sort {
+        width: var(--size-12);
+        height: var(--size-12);
+        margin-inline-start: var(--size-4);
+      }
+    }
+
+    td {
+      &.is-active {
+        font-weight: 700;
+        color: var(--mvw-table-active-color);
+        background: var(--mvw-table-active-bg-color);
+      }
+
+      &.has-avatar {
+        .avatar {
+          --_width: var(--mvw-table-cell-portrait-size);
+        }
+      }
+
+      &[data-value='0'],
+      &.is-zero {
+        color: var(--mvw-text-faded);
+      }
+
+      &.is-possible-empty:empty:before {
+        content: '0';
+        color: var(--mvw-text-faded);
+      }
+
+      &.is-horizontal-content {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      /* &:has(.is-logo-image) {
+        padding-inline-end: 0;
+      } */
+
+      .is-logo-image {
+        display: inline-block;
+        vertical-align: middle;
+        width: var(--mvw-table-cell-logo-size);
+        height: var(--mvw-table-cell-logo-size);
+        max-inline-size: fit-content;
+      }
+
+      .is-duplicated {
+        color: var(--mvw-table-neutral-color);
+      }
+
+      .is-team-name-long {
+        display: inline-block;
+      }
+
+      .is-team-name-short {
+        display: none;
+      }
+
+      @container table-wrapper (max-width: 768px) {
+        .is-team-name-long {
+          display: none;
+        }
+        .is-team-name-short {
+          display: inline-block;
+        }
+      }
+    }
+
+    /* Caption */
+    caption {
+      caption-side: bottom;
+      color: var(--mvw-table-caption-color);
+      font-size: var(--mvw-table-caption-font-size, 0.75rem);
+      padding: var(--size-12) 0;
+      text-align: start;
+    }
+
+    /* Body */
+    tbody {
+      tr:focus-within,
+      tr:hover {
+        color: var(--mvw-table-hover-color);
+        background-color: var(--mvw-table-hover-bg-color);
+
+        td.is-active {
+          color: var(--mvw-table-active-hover-color);
+          background-color: var(--mvw-table-active-hover-bg-color);
+        }
+      }
+    }
+  }
+}