@ilo-org/styles 1.14.0 → 1.14.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.14.0",
+  "version": "1.14.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",

package/scss/components/_audioplayer.scss

@@ -41,6 +41,9 @@
     font-size: var(--ilo-font-size-sm);
     font-weight: var(--ilo-font-weight-medium);
     line-height: var(--ilo-line-height-lg);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
   }
   &--track-details {
     display: flex;
@@ -195,6 +198,9 @@
       padding-inline: spacing(3) 0;
       padding-block: 0;
     }
+    &--track-name {
+      width: 30vw;
+    }
     &--center {
       justify-content: center;
       padding: 0;

package/scss/components/_video.scss

@@ -6,7 +6,7 @@
 // Video Button
 // ======================================
 @mixin videobutton($name, $size: "standard") {
-  $height: if($size == "big", 72px, 32px);
+  $height: if($size == "big", 72px, 24px);
   $box: if($size == "big", 80px, 40px);
   $width: $height;
   $icon-color-default: rgba(237, 240, 242, 1);
@@ -233,7 +233,7 @@
       }
 
       .vjs-menu {
-        background: var(--ilo-color-brand-200);
+        background: var(--ilo-color-brand-100);
         border: 0;
         bottom: calc(100% + #{px-to-rem(8px)});
         display: none;
@@ -243,7 +243,7 @@
         right: auto;
         transform: translateX(-50%);
         z-index: 40;
-        padding-top: px-to-rem(28px);
+        padding-top: px-to-rem(8px);
 
         // gap added to ensure vjs-hover persists when hovering to menu from captions button
         &::after {
@@ -256,13 +256,12 @@
         }
 
         &:before {
-          @include typography("body-xsmall");
+          @include typography("highlight-medium-bold");
           content: var(--ilo-video-choose-subtitle-text, "Choose subtitles");
           color: var(--ilo-color-gray-charcoal);
-          font-weight: var(--ilo-font-weight-bold);
-          left: px-to-rem(12px);
-          position: absolute;
-          top: px-to-rem(8px);
+          display: block;
+          margin-bottom: spacing(2);
+          padding-left: px-to-rem(12px);
         }
       }
 
@@ -278,10 +277,13 @@
         max-height: px-to-rem(120px);
         overflow-y: auto;
         padding: 0 0 px-to-rem(4px);
+        display: flex;
+        flex-direction: column;
+        gap: spacing(2);
       }
 
       .vjs-menu-item {
-        @include typography("body-xsmall");
+        @include typography("body-small");
         align-items: center;
         color: var(--ilo-color-gray-charcoal);
         display: flex;
@@ -294,37 +296,63 @@
 
         &:hover {
           background: var(--ilo-color-neutrals-200);
+          cursor: pointer;
         }
 
+        // Radio control — mirrors .ilo--radio in _radio.scss:
+        // :before is the outer 20px circle (in flow, reserves space),
+        // :after is the inner 14px dot overlaid on top.
         &:before {
-          background: transparent;
-          border: 2px solid var(--ilo-color-neutrals-500);
-          border-radius: 50%;
           content: "";
-          display: inline-block;
-          height: px-to-rem(10px);
-          width: px-to-rem(10px);
+          background-color: var(--ilo-color-gray-base);
+          border-radius: 50%;
+          height: px-to-rem(20px);
+          width: px-to-rem(20px);
           flex-shrink: 0;
+          display: inline-block;
+        }
+
+        &:after {
+          content: "";
+          background-color: var(--ilo-color-gray-base);
+          border: px-to-rem(4px) solid var(--ilo-color-gray-base);
+          border-radius: 50%;
+          height: px-to-rem(14px);
+          width: px-to-rem(14px);
+          // padding-left (12px) + radio's 3px inset
+          left: px-to-rem(15px);
+          top: 50%;
+          transform: translateY(-50%);
+          position: absolute;
+          z-index: 1;
+          pointer-events: none;
         }
 
         &.vjs-selected {
           color: var(--ilo-color-gray-charcoal);
 
           &:before {
-            border-color: var(--ilo-color-neutrals-black);
-            box-shadow: inset 0 0 0 px-to-rem(2px) var(--ilo-color-neutrals-200);
-            background: var(--ilo-color-neutrals-black);
+            background-color: var(--ilo-color-blue-dark);
           }
+
+          &:after {
+            background-color: var(--ilo-color-blue-lighter);
+            border-color: var(--ilo-color-blue-dark);
+          }
+        }
+
+        &:focus:before {
+          background-color: var(--ilo-color-yellow);
         }
       }
 
       .vjs-menu-item[tabindex="-1"]:first-child .vjs-menu-item-text {
         font-size: 0;
+        line-height: 0; // collapse the zeroed-text strut so it can't inflate the row
 
         &:after {
-          @include typography("body-xsmall");
+          @include typography("body-small");
           content: var(--ilo-video-none, "None");
-          font-size: px-to-rem(12px);
           line-height: px-to-rem(20px);
         }
       }