@ilo-org/styles 1.14.0 → 1.14.2

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.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",

package/scss/components/_audioplayer.scss

@@ -38,12 +38,27 @@
     padding-block-end: spacing(3);
   }
   &--track-name {
+    // `display: block` is required for the ellipsis to apply: when `nameHref`
+    // is set the name renders as an inline `<a>`, and text-overflow/overflow
+    // are no-ops on inline elements, so long linked titles would overflow
+    // instead of truncating.
+    display: block;
     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;
+    // Block (not flex) so the combined "programme • creator" line truncates
+    // with an ellipsis when it overflows; text-overflow is a no-op on a flex
+    // container. The child spans stay inline, so the bullet separator and
+    // spacing are unchanged.
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     font-size: var(--ilo-font-size-xsm);
     line-height: var(--ilo-line-height-xlg);
     color: var(--ilo-color-gray-light);
@@ -186,18 +201,34 @@
 
   @include breakpoint("md") {
     &--body {
-      grid-template-columns: 1fr 1fr 1fr;
+      // The center column hugs its content while the equal minmax(0, 1fr) side
+      // tracks keep it optically centered. minmax(0, 1fr) (not plain 1fr, which
+      // has an implicit min-content floor) lets the side tracks shrink below
+      // their content so the title/authors can truncate instead of pushing the
+      // center off-axis.
+      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
       grid-template-rows: auto;
       grid-template-areas: "left center right";
     }
     &--left {
       border-bottom: none;
-      padding-inline: spacing(3) 0;
       padding-block: 0;
+      // Trailing gap separating the title/authors from the centered controls.
+      // The 5vw term scales with the viewport — tighter when narrow, roomier
+      // when wide. vw (not %, which resolves against this item's own narrow grid
+      // track and so never reaches the bounds) ties the gap to viewport width so
+      // the clamp's floor (narrow `md`) and ceiling (ultra-wide) actually engage.
+      padding-inline: spacing(3) clamp(spacing(3), 4vw, spacing(11));
+      // Allow the column to shrink below its content's intrinsic width so the
+      // title/authors can truncate.
+      min-width: 0;
     }
     &--center {
       justify-content: center;
-      padding: 0;
+      // Horizontal padding gives the play controls breathing room from the
+      // title (left) and time/volume cluster (right). The center track is
+      // auto-sized, so this widens the gap on both sides while staying centered.
+      padding-block: 0;
     }
     &--volume-slider {
       width: 40%;

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);
         }
       }