@ilo-org/styles 1.13.1 → 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.13.1",
+  "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/_dropdown.scss

@@ -35,7 +35,7 @@
       @include globaltransition("background-color");
     }
 
-    &:has(select:hover):before {
+    &:has(select:enabled:hover):before {
       background-color: var(--ilo-dropdown-background-color-active);
     }
 
@@ -49,6 +49,28 @@
       top: var(--ilo-dropdown-button-icon-offset);
       @include icon("chevron_down", var(--ilo-dropdown-button-icon-color));
     }
+
+    &:has(select:disabled) {
+      --ilo-dropdown-button-icon-color: var(--ilo-dropdown-color);
+
+      &:after {
+        opacity: 0.45;
+      }
+
+      // manually adjusted the left border color to be slightly darker
+      &:before {
+        border-color: color-mix(
+          in srgb,
+          var(--ilo-dropdown-border-color) 45%,
+          transparent
+        );
+        border-inline-start-color: color-mix(
+          in srgb,
+          var(--ilo-dropdown-border-color) 60%,
+          transparent
+        );
+      }
+    }
   }
 
   appearance: none;
@@ -58,6 +80,7 @@
   color: var(--ilo-dropdown-color);
   width: 100%;
   margin: spacing(0);
+
   padding: 0 spacing(14) 0 spacing(4);
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -68,15 +91,18 @@
   @include typography("body-medium");
   @include globaltransition("background-color, border-color, color");
 
-  &:hover,
-  &:focus,
-  &:active {
+  &:enabled:is(:hover, :focus, :active) {
     border-inline-start-color: var(--ilo-color-blue);
     box-shadow: inset px-to-rem(1px) 0 0 0 var(--ilo-color-blue);
     background-color: var(--ilo-dropdown-background-color-active);
     --ilo-dropdown-color: var(--ilo-color-gray-charcoal);
   }
 
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.45;
+  }
+
   [dir="rtl"] &:hover,
   [dir="rtl"] &:focus,
   [dir="rtl"] &:active {

package/scss/components/_hero.scss

@@ -242,7 +242,10 @@
         &[class*="semi-transparent"] {
           #{$c}--card-offset {
             background: rgba(35, 0, 80, 0.6);
-            box-shadow: 0.3px 0 0 0 rgba(35, 0, 80, 0.6);
+            // No seam-bridging box-shadow here: with a translucent fill the
+            // shadow composites over the card's own semi-transparent layer,
+            // producing a darker hairline at the offset/card boundary.
+            box-shadow: none;
           }
         }
       }
@@ -256,7 +259,9 @@
         &[class*="semi-transparent"] {
           #{$c}--card-offset {
             background: rgba(255, 255, 255, 0.6);
-            box-shadow: 0.3px 0 0 0 rgba(255, 255, 255, 0.6);
+            // See dark variant above: no box-shadow for translucent fills,
+            // otherwise the shadow doubles up into a darker seam line.
+            box-shadow: none;
           }
         }
       }

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);
@@ -167,6 +167,10 @@
       .vjs-volume-panel {
         display: none;
       }
+
+      .vjs-subs-caps-button {
+        display: none;
+      }
     }
   }
 
@@ -210,6 +214,154 @@
       @include videobutton("fullscreen");
     }
 
+    // Closed captions control
+    .vjs-subs-caps-button {
+      order: 3;
+      margin-right: px-to-rem(2px);
+      position: relative;
+      z-index: 30;
+
+      > .vjs-menu-button {
+        @include videobutton("closed_captions");
+      }
+
+      &.vjs-hover > .vjs-menu-button,
+      &:hover > .vjs-menu-button,
+      &:focus-within > .vjs-menu-button {
+        background-color: var(--ilo-color-blue-light);
+        @include dataurlicon("closed_captions", rgba(30, 45, 190, 1));
+      }
+
+      .vjs-menu {
+        background: var(--ilo-color-brand-100);
+        border: 0;
+        bottom: calc(100% + #{px-to-rem(8px)});
+        display: none;
+        left: 50%;
+        min-width: px-to-rem(190px);
+        position: absolute;
+        right: auto;
+        transform: translateX(-50%);
+        z-index: 40;
+        padding-top: px-to-rem(8px);
+
+        // gap added to ensure vjs-hover persists when hovering to menu from captions button
+        &::after {
+          content: "";
+          height: px-to-rem(8px);
+          left: 0;
+          position: absolute;
+          right: 0;
+          top: 100%;
+        }
+
+        &:before {
+          @include typography("highlight-medium-bold");
+          content: var(--ilo-video-choose-subtitle-text, "Choose subtitles");
+          color: var(--ilo-color-gray-charcoal);
+          display: block;
+          margin-bottom: spacing(2);
+          padding-left: px-to-rem(12px);
+        }
+      }
+
+      .vjs-menu.vjs-lock-showing:not(.vjs-hidden),
+      &.vjs-hover .vjs-menu:not(.vjs-hidden),
+      &:hover .vjs-menu:not(.vjs-hidden),
+      &:focus-within .vjs-menu:not(.vjs-hidden) {
+        display: block;
+      }
+
+      .vjs-menu-content {
+        margin: 0;
+        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-small");
+        align-items: center;
+        color: var(--ilo-color-gray-charcoal);
+        display: flex;
+        gap: px-to-rem(8px);
+        line-height: px-to-rem(20px);
+        padding: px-to-rem(2px) px-to-rem(12px);
+        position: relative;
+        text-shadow: none;
+        white-space: nowrap;
+
+        &: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 {
+          content: "";
+          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 {
+            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-small");
+          content: var(--ilo-video-none, "None");
+          line-height: px-to-rem(20px);
+        }
+      }
+
+      .vjs-menu .vjs-icon-placeholder {
+        display: none;
+      }
+    }
+
     // Duration Bar
     .vjs-progress-control {
       order: 2;
@@ -287,7 +439,7 @@
 
     // Volume Control
     .vjs-volume-panel {
-      order: 3;
+      order: 4;
       border-bottom: 1px solid;
       bottom: 0;
       flex-direction: column;