@mjsz-vbr-elements/shared 2.32.0 → 2.33.0

package/assets/css/base/borders.css

@@ -0,0 +1,8 @@
+:where(:host) {
+  --radius-1: 2px;
+  --radius-2: 5px;
+  --radius-3: 16px;
+  --radius-4: 32px;
+  --radius-5: 64px;
+  --radius-6: 96px;
+}

package/assets/css/base/color.primary.css

@@ -0,0 +1,17 @@
+:where(:host, :root) {
+  --mvw-color-white: #fff;
+  --mvw-color-black: #000;
+
+  --mvw-color-primary-0: #ffffff;
+  --mvw-color-primary-50: #eceff1;
+  --mvw-color-primary-100: #cfd8dc;
+  --mvw-color-primary-200: #b0bec5;
+  --mvw-color-primary-300: #90a4ae;
+  --mvw-color-primary-400: #78909c;
+  --mvw-color-primary-500: #607d8b;
+  --mvw-color-primary-600: #546e7a;
+  --mvw-color-primary-700: #455a64;
+  --mvw-color-primary-800: #37474f;
+  --mvw-color-primary-900: #263238;
+  --mvw-color-primary-950: #182024;
+}

package/assets/css/base/color.secondary.css

@@ -0,0 +1,11 @@
+:where(:host, :root) {
+  --mvw-color-secondary-100: #dcedc8;
+  --mvw-color-secondary-200: #badb94;
+  --mvw-color-secondary-300: #aed581;
+  --mvw-color-secondary-400: #9ccc65;
+  --mvw-color-secondary-500: #8bc34a;
+  --mvw-color-secondary-700: #689f38;
+  --mvw-color-secondary-800: #558b2f;
+  --mvw-color-secondary-900: #33691e;
+  --mvw-color-secondary-950: #14290c;
+}

package/assets/css/base/ease.css

@@ -0,0 +1,30 @@
+:where(:host) {
+  --ease-spring-1: linear(
+    0,
+    0.009,
+    0.035 2.1%,
+    0.141,
+    0.281 6.7%,
+    0.723 12.9%,
+    0.938 16.7%,
+    1.017,
+    1.077,
+    1.121,
+    1.149 24.3%,
+    1.159,
+    1.163,
+    1.161,
+    1.154 29.9%,
+    1.129 32.8%,
+    1.051 39.6%,
+    1.017 43.1%,
+    0.991,
+    0.977 51%,
+    0.974 53.8%,
+    0.975 57.1%,
+    0.997 69.8%,
+    1.003 76.9%,
+    1.004 83.8%,
+    1
+  );
+}

package/assets/css/base/font.css

@@ -0,0 +1,22 @@
+:where(:host) {
+  --font-size-50: 0.625rem; /* 10px */
+  --font-size-100: 0.6875rem; /* 11px */
+  --font-size-200: 0.75rem; /* 12px */
+  --font-size-300: 0.8125rem; /* 13px */
+  --font-size-400: 0.875rem; /* 14px */
+  --font-size-500: 1rem; /* 16px */
+  --font-size-600: 1.125rem; /* 18px */
+  --font-size-700: 1.25rem; /* 20px */
+  --font-size-800: 1.5rem; /* 24px */
+  --font-size-900: 1.75rem; /* 28px */
+  --font-size-950: 2rem; /* 32px */
+
+  --font-lineheight-50: 0.95;
+  --font-lineheight-100: 1;
+  --font-lineheight-200: 1.1;
+  --font-lineheight-300: 1.25;
+  --font-lineheight-400: 1.375;
+  --font-lineheight-500: 1.5;
+  --font-lineheight-600: 1.75;
+  --font-lineheight-700: 2;
+}

package/assets/css/base/shadow.css

@@ -0,0 +1,49 @@
+:where(:host) {
+  --shadow-color: 220 3% 15%;
+  --shadow-strength: 1%;
+  --inner-shadow-highlight: inset 0 -0.5px 0 0 #fff, inset 0 0.5px 0 0 #0001;
+  /* --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
+  --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)); */
+  --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%)),
+    0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
+    0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+    0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
+    0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
+  /* --shadow-4: 0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%)),
+    0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+    0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
+    0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)); */
+  /* --shadow-5: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%)),
+    0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+    0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
+    0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%)); */
+  --shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%)),
+    0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+    0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
+    0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
+    0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
+  /* --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
+  --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
+    var(--inner-shadow-highlight);
+  --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
+    var(--inner-shadow-highlight);
+  --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
+    var(--inner-shadow-highlight);
+  --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)),
+    var(--inner-shadow-highlight); */
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(:host) {
+    --shadow-color: 220 40% 2%;
+    --shadow-strength: 25%;
+    --inner-shadow-highlight: inset 0 -0.5px 0 0 #fff1, inset 0 0.5px 0 0 #0007;
+  }
+}

package/assets/css/base/sizes.css

@@ -0,0 +1,21 @@
+:where(:host) {
+  /* --size-000: -0.5rem;
+  --size-00: -0.25rem; */
+  --size-1: 1px;
+  --size-2: 0.125rem;
+  /* --size-3: 3px; */
+  --size-4: 0.25rem;
+  /* --size-5: 5px; */
+  --size-6: 0.375rem;
+  /* --size-7: 7px; */
+  --size-8: 0.5rem;
+  /* --size-9: 9px; */
+  --size-10: 0.625rem;
+  /* --size-11: 11px; */
+  --size-12: 0.75rem;
+  /* --size-13: 13px; */
+  --size-16: 1rem;
+  /* --size-20: 20px; */
+  --size-24: 1.5rem;
+  --size-32: 2rem;
+}

package/assets/css/components/accordion.css

@@ -0,0 +1,86 @@
+@layer components.variables {
+  :where(:host) {
+    --mvw-card-color: light-dark(var(--mvw-color-primary-950), var(--mvw-color-primary-200));
+    --mvw-card-bg-color: light-dark(var(--mvw-color-white), var(--mvw-color-primary-950));
+    --mvw-card-tonal-active-bg-color: light-dark(var(--mvw-color-primary-50), var(--mvw-color-primary-900));
+  }
+}
+
+@layer components {
+  :where(details) {
+    --_accordion-transition-time: 0.2s;
+    --_bg-color: var(--mvw-card-bg-color);
+    --_shadow: none;
+
+    container-type: inline-size;
+    display: block;
+    background-color: var(--_bg-color);
+    border-radius: var(--radius-2);
+    color: var(--mvw-card-color);
+    box-shadow: var(--_shadow);
+    transition: all var(--_accordion-transition-time) ease-out;
+
+    @media (prefers-reduced-motion: no-preference) {
+      interpolate-size: allow-keywords;
+    }
+
+    &::details-content {
+      block-size: 0;
+      opacity: 0;
+      overflow-y: clip;
+      transition:
+        content-visibility var(--_accordion-transition-time) allow-discrete,
+        opacity var(--_accordion-transition-time),
+        block-size var(--_accordion-transition-time);
+    }
+
+    &[open]::details-content {
+      block-size: auto;
+      opacity: 1;
+    }
+
+    & > summary {
+      background-color: inherit;
+      cursor: pointer;
+      font-weight: 700;
+      padding-block: var(--size-16);
+      user-select: none;
+
+      align-items: center;
+      display: flex;
+      gap: var(--size-8);
+      list-style: none;
+
+      &::marker,
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      strong {
+        flex: 1;
+      }
+
+      svg {
+        transition: rotate 0.8s var(--ease-spring-1, ease);
+      }
+    }
+
+    &[open] > summary svg {
+      rotate: 180deg;
+    }
+
+    &.elevated {
+      --_shadow: var(--shadow-3);
+    }
+
+    &.tonal {
+      &[open] {
+        background-color: var(--mvw-card-tonal-active-bg-color);
+      }
+    }
+
+    &:where(.tonal) > * {
+      padding-inline: var(--size-16);
+    }
+  }
+}

package/assets/css/components/avatar.css

@@ -0,0 +1,29 @@
+@layer components.variables {
+  :where(:host) {
+    --mvw-avatar-border-color: light-dark(var(--mvw-color-primary-100), var(--mvw-color-primary-700));
+  }
+}
+
+@layer components {
+  :where(.avatar) {
+    --_width: 20px;
+
+    display: inline-flex;
+    vertical-align: middle;
+    aspect-ratio: 1;
+    inline-size: var(--_width);
+    justify-content: center;
+    overflow: clip;
+    position: relative;
+    border-radius: 100%;
+    border: 1px solid var(--mvw-avatar-border-color);
+
+    img {
+      block-size: 100%;
+      inline-size: 100%;
+      inset: 0;
+      object-fit: cover;
+      position: absolute;
+    }
+  }
+}

package/assets/css/components/badge.css

@@ -0,0 +1,54 @@
+@layer components {
+  :where(.badge) {
+    --_bg-color: var(--mvw-bg-muted);
+    --_color: var(--mvw-text-muted);
+
+    padding: var(--size-2) var(--size-4);
+    display: inline-flex;
+    gap: var(--size-2);
+    font-size: var(--font-size-100);
+    font-weight: 700;
+    line-height: var(--font-lineheight-300);
+    color: var(--_color);
+    background-color: var(--_bg-color);
+    border-radius: var(--radius-2);
+
+    svg {
+      fill: currentColor;
+    }
+
+    /* Variant */
+    &.inverted {
+      --_bg-color: var(--mvw-bg-inverted);
+      --_color: var(--mvw-text-inverted);
+    }
+
+    &.live {
+      --_bg-color: var(--mvw-color-live);
+      --_color: var(--mvw-color-white);
+    }
+
+    &.error {
+      --_bg-color: var(--mvw-color-error);
+      --_color: var(--mvw-color-white);
+    }
+
+    &.warning {
+      --_bg-color: var(--mvw-color-warning);
+      --_color: var(--mvw-color-white);
+    }
+
+    /* Size */
+    &.xs {
+      font-size: var(--font-size-50);
+    }
+    &.lg {
+      font-size: var(--font-size-300);
+      padding: var(--size-4) var(--size-6);
+    }
+
+    & + & {
+      margin-inline-start: var(--size-4);
+    }
+  }
+}

package/assets/css/components/card.css

@@ -0,0 +1,22 @@
+@layer components {
+  :where(.card) {
+    --_border: none;
+    --_bg-color: light-dark(var(--mvw-color-white), var(--mvw-color-primary-900));
+
+    container-type: inline-size;
+    container-name: card-wrapper;
+
+    padding: var(--size-16);
+    background-color: var(--_bg-color);
+    border: var(--_border);
+    border-radius: var(--radius-2);
+    box-shadow: var(--shadow-3);
+
+    &.bordered {
+      --_bg-color: light-dark(var(--mvw-color-primary-50), var(--mvw-color-primary-950));
+      --_border: 1px solid light-dark(var(--mvw-color-primary-100), var(--mvw-color-primary-900));
+      box-shadow: none;
+      border-radius: 0;
+    }
+  }
+}

package/assets/css/components/countdown.css

@@ -0,0 +1,190 @@
+@layer components.variables {
+  :where(:host) {
+    /* Countdown */
+    --mvw-countdown-title-height: calc(var(--size-16) * 2);
+    --mvw-countdown-title-bg: light-dark(var(--mvw-color-primary-900), var(--mvw-color-primary-100));
+    --mvw-countdown-gamedata-height: calc(var(--size-16) * 4);
+    --mvw-countdown-active-color: light-dark(var(--mvw-color-secondary-500), var(--mvw-color-secondary-800));
+    --mvw-countdown-gamedata-bg: light-dark(var(--mvw-color-primary-700), var(--mvw-color-primary-300));
+    --mvw-countdown-result-bg: light-dark(var(--mvw-color-primary-800), var(--mvw-color-primary-200));
+  }
+}
+
+@layer components {
+  :where(.game-countdown) {
+    display: grid;
+    grid-template-rows: var(--mvw-countdown-title-height) 1fr var(--mvw-countdown-gamedata-height);
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
+
+    .game-countdown-title {
+      text-align: center;
+      font-size: var(--font-size-400);
+      font-weight: 700;
+      line-height: var(--mvw-countdown-title-height);
+      color: var(--mvw-text-faded);
+      background-color: var(--mvw-countdown-title-bg);
+    }
+
+    .game-countdown-container {
+      display: grid;
+      grid-template-areas: 'stack';
+      place-items: center;
+      background-color: var(--mvw-countdown-result-bg);
+
+      > div {
+        visibility: hidden;
+      }
+
+      > div.is-visible {
+        visibility: visible;
+      }
+    }
+
+    .game-countdown-result {
+      grid-area: stack;
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+      grid-template-areas: 'period period period' 'home-score separator away-score' 'period-results period-results period-results';
+      gap: 0 var(--size-8);
+      align-items: center;
+
+      color: var(--mvw-text-dimmed);
+      font-weight: 700;
+
+      .is-separator {
+        grid-area: separator;
+        /* font-size: 3.125rem; */
+        line-height: 1;
+        font-size: clamp(2rem, 10vw, 5rem);
+      }
+
+      :is(.is-home-score, .is-away-score) {
+        display: flex;
+      }
+
+      .is-home-score {
+        grid-area: home-score;
+      }
+
+      .is-away-score {
+        grid-area: away-score;
+      }
+
+      .is-period-results {
+        grid-area: period-results;
+        font-size: var(--font-size-400);
+        text-align: center;
+      }
+
+      .is-period {
+        grid-area: period;
+        font-size: var(--font-size-50);
+        font-weight: 700;
+        text-align: center;
+        text-transform: uppercase;
+      }
+
+      .is-live {
+        color: var(--mvw-countdown-active-color);
+      }
+    }
+
+    .game-countdown-counter {
+      grid-area: stack;
+      display: flex;
+      gap: var(--size-16);
+      justify-content: space-around;
+      padding: var(--size-16);
+
+      font-size: var(--font-size-100);
+      font-weight: 700;
+      text-transform: uppercase;
+      color: var(--mvw-text-dimmed);
+
+      .is-number {
+        color: var(--mvw-countdown-active-color);
+      }
+    }
+
+    .game-countdown-gamedata {
+      display: grid;
+      grid-template-columns: 40px 1fr auto 1fr 40px;
+      grid-template-areas: 'home-team-logo game-date game-date game-date away-team-logo' 'home-team-logo home-team separator away-team away-team-logo';
+      gap: 0 0.5rem;
+      align-content: center;
+      align-items: center;
+      padding-inline: var(--size-16);
+      background-color: var(--mvw-countdown-gamedata-bg);
+      font-size: var(--mvw-font-size-500);
+      font-weight: 700;
+      line-height: var(--font-lineheight-400);
+      color: light-dark(var(--mvw-color-primary-50), var(--mvw-color-primary-800));
+
+      .is-game-date {
+        grid-area: game-date;
+        text-align: center;
+        color: var(--mvw-text-faded);
+        font-size: var(--font-size-200);
+      }
+
+      .is-home-team-logo {
+        grid-area: home-team-logo;
+      }
+      .is-away-team-logo {
+        grid-area: away-team-logo;
+      }
+
+      :is(.is-home-team, .is-away-team) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .is-home-team {
+        grid-area: home-team;
+        text-align: end;
+      }
+      .is-away-team {
+        grid-area: away-team;
+      }
+
+      .is-separator {
+        grid-area: separator;
+        text-align: center;
+      }
+
+      img {
+        display: block;
+        width: 100%;
+        aspect-ratio: 1;
+      }
+    }
+
+    .is-number {
+      display: grid;
+      grid-template-areas: 'stack';
+      justify-items: center;
+      position: relative;
+      overflow: hidden;
+      mask-image: linear-gradient(to bottom, transparent 0, black 16%, black 84%, transparent 100%);
+      animation: 400ms fade-in ease-out;
+
+      > span {
+        grid-area: stack;
+        font-size: clamp(3.125rem, 10vw, 5rem);
+        line-height: 1;
+        font-weight: 700;
+      }
+
+      @keyframes fade-in {
+        from {
+          opacity: 0;
+        }
+
+        to {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}

package/assets/css/components/definition-list.css

@@ -0,0 +1,69 @@
+@layer components {
+  :where(.definition-list) {
+    --_border-style: solid;
+    --_border-width: 1px;
+    --_border-color: var(--mvw-border-muted);
+
+    display: grid;
+    gap: var(--size-8);
+    padding: 0;
+
+    &.dotted {
+      --_border-style: dotted;
+      --_border-width: 2px;
+    }
+
+    li {
+      display: grid;
+      margin: 0;
+      padding: 0;
+
+      .term {
+        display: block;
+        font-weight: 700;
+        overflow: hidden;
+        position: relative;
+        color: var(--mvw-text-muted);
+      }
+
+      hr {
+        display: none;
+        margin: 0;
+      }
+    }
+
+    @container (width > 30ch) {
+      gap: var(--size-8);
+
+      li {
+        align-items: baseline;
+        display: grid;
+        gap: var(--size-8);
+        grid-template-columns: 1fr auto;
+
+        &:has(hr) {
+          grid-template-columns: auto 1fr auto;
+        }
+
+        hr {
+          background-color: transparent;
+          border-block-end: var(--_border-width) var(--_border-style) var(--_border-color);
+          block-size: 2px;
+          display: block;
+        }
+
+        .term {
+          inline-size: max-content;
+
+          &::after {
+            display: inline-block;
+          }
+        }
+        .description {
+          color: var(--text-color-2);
+          text-align: end;
+        }
+      }
+    }
+  }
+}

package/assets/css/components/double-bar.css

@@ -0,0 +1,78 @@
+@layer components {
+  :where(.double-bar) {
+    display: grid;
+    grid-template-columns: 0.3fr 1fr 1fr 0.3fr;
+    grid-template-areas: 'value-start title title value-end' 'bar-start bar-start bar-end bar-end';
+    align-items: center;
+
+    @media (width > 500px) {
+      grid-template-areas: 'title title title title' 'value-start bar-start bar-end value-end';
+    }
+
+    .is-value {
+      font-weight: 700;
+      color: var(--mvw-text-highlighted);
+    }
+
+    .is-value-start {
+      grid-area: value-start;
+      padding-inline-end: 0.5rem;
+      justify-self: end;
+    }
+
+    .is-value-end {
+      grid-area: value-end;
+      padding-inline-start: 0.5rem;
+    }
+
+    .is-bar {
+      background-color: var(--mvw-bg-muted);
+      height: 8px;
+      margin-block: 5px;
+    }
+
+    .is-bar-start {
+      grid-area: bar-start;
+
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    .is-bar-start--progress {
+      background-color: var(--mvw-gamecenter-home-team-identifier-color);
+      outline: 1px solid
+        light-dark(
+          oklch(from var(--mvw-gamecenter-home-team-identifier-color) calc(l - 0.4) c h),
+          oklch(from var(--mvw-gamecenter-home-team-identifier-color) calc(l + 0.4) c h)
+        );
+      outline-offset: -1px;
+      height: 100%;
+      transition: width 0.3s ease-out;
+    }
+
+    .is-bar-end {
+      grid-area: bar-end;
+    }
+
+    .is-bar-end--progress {
+      background-color: var(--mvw-gamecenter-away-team-identifier-color);
+      outline: 1px solid
+        light-dark(
+          oklch(from var(--mvw-gamecenter-away-team-identifier-color) calc(l - 0.4) c h),
+          oklch(from var(--mvw-gamecenter-away-team-identifier-color) calc(l + 0.4) c h)
+        );
+      outline-offset: -1px;
+      height: 100%;
+    }
+
+    .is-title {
+      grid-area: title;
+
+      justify-self: center;
+      font-size: var(--font-size-400);
+      font-weight: 700;
+      line-height: 1.5rem;
+      color: var(--mvw-text-muted);
+    }
+  }
+}