@fluentui/web-components 3.0.0-rc.25 → 3.0.0-rc.27

package/dist/esm/slider/slider.styles.css

@@ -1,189 +1,193 @@
-
-  :host([hidden]){display:none}:host{display:inline-grid}
-
-  :host {
-    --thumb-size: 20px;
-    --track-margin-inline: calc(var(--thumb-size) / 2);
-    --track-size: 4px;
-    --track-overhang: calc(var(--track-size) / -2);
-    --rail-color: var(--colorCompoundBrandBackground);
-    --track-color: var(--colorNeutralStrokeAccessible);
-    --slider-direction: 90deg;
-    --border-radius: var(--borderRadiusMedium);
-    --step-marker-inset: var(--track-overhang) -1px;
-
-    position: relative;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    outline: none;
-    user-select: none;
-    touch-action: none;
-    min-width: 120px;
-    min-height: 32px;
-    grid-template-rows: 1fr var(--thumb-size) 1fr;
-    grid-template-columns: var(--track-margin-inline) 1fr var(--track-margin-inline);
-  }
-
-  :host(:hover) {
-    --rail-color: var(--colorCompoundBrandBackgroundHover);
-  }
-
-  :host(:active) {
-    --rail-color: var(--colorCompoundBrandBackgroundPressed);
-  }
-
-  :host(:disabled) {
-    --rail-color: var(--colorNeutralForegroundDisabled);
-    --track-color: var(--colorNeutralBackgroundDisabled);
-  }
-
-  :host(:not(:disabled)) {
-    cursor: pointer;
-  }
-
-  :host(:dir(rtl)) {
-    --slider-direction: -90deg;
-  }
-
-  :host([size='small']) {
-    --thumb-size: 16px;
-    --track-overhang: -1px;
-    --track-size: 2px;
-    --border-radius: var(--borderRadiusSmall);
-  }
-
-  :host([orientation='vertical']) {
-    --slider-direction: 0deg;
-    --step-marker-inset: -1px var(--track-overhang);
-    min-height: 120px;
-    grid-template-rows: var(--track-margin-inline) 1fr var(--track-margin-inline);
-    grid-template-columns: 1fr var(--thumb-size) 1fr;
-    width: unset;
-    min-width: 32px;
-    justify-items: center;
-  }
-
-  :host(:not([slot='input']):focus-visible) {
-    box-shadow: 0 0 0 2pt var(--colorStrokeFocus2);
-    outline: 1px solid var(--colorStrokeFocus1);
-  }
-
-  :host:after,
-  .track {
-    height: var(--track-size);
-    width: 100%;
-  }
-
-  :host:after {
-    background-image: linear-gradient(
-      var(--slider-direction),
-      var(--rail-color) 0%,
-      var(--rail-color) 50%,
-      var(--track-color) 50.1%,
-      var(--track-color) 100%
-    );
-    border-radius: var(--border-radius);
-    content: '';
-    grid-row: 1 / -1;
-    grid-column: 1 / -1;
-  }
-
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-grid;
+}
+
+:host {
+  --thumb-size: 20px;
+  --track-margin-inline: calc(var(--thumb-size) / 2);
+  --track-size: 4px;
+  --track-overhang: calc(var(--track-size) / -2);
+  --rail-color: var(--colorCompoundBrandBackground);
+  --track-color: var(--colorNeutralStrokeAccessible);
+  --slider-direction: 90deg;
+  --border-radius: var(--borderRadiusMedium);
+  --step-marker-inset: var(--track-overhang) -1px;
+
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  outline: none;
+  user-select: none;
+  touch-action: none;
+  min-width: 120px;
+  min-height: 32px;
+  grid-template-rows: 1fr var(--thumb-size) 1fr;
+  grid-template-columns: var(--track-margin-inline) 1fr var(--track-margin-inline);
+}
+
+:host(:hover) {
+  --rail-color: var(--colorCompoundBrandBackgroundHover);
+}
+
+:host(:active) {
+  --rail-color: var(--colorCompoundBrandBackgroundPressed);
+}
+
+:host(:disabled) {
+  --rail-color: var(--colorNeutralForegroundDisabled);
+  --track-color: var(--colorNeutralBackgroundDisabled);
+}
+
+:host(:not(:disabled)) {
+  cursor: pointer;
+}
+
+:host(:dir(rtl)) {
+  --slider-direction: -90deg;
+}
+
+:host([size='small']) {
+  --thumb-size: 16px;
+  --track-overhang: -1px;
+  --track-size: 2px;
+  --border-radius: var(--borderRadiusSmall);
+}
+
+:host([orientation='vertical']) {
+  --slider-direction: 0deg;
+  --step-marker-inset: -1px var(--track-overhang);
+  min-height: 120px;
+  grid-template-rows: var(--track-margin-inline) 1fr var(--track-margin-inline);
+  grid-template-columns: 1fr var(--thumb-size) 1fr;
+  width: unset;
+  min-width: 32px;
+  justify-items: center;
+}
+
+:host(:not([slot='input']):focus-visible) {
+  box-shadow: 0 0 0 2pt var(--colorStrokeFocus2);
+  outline: 1px solid var(--colorStrokeFocus1);
+}
+
+:host:after,
+.track {
+  height: var(--track-size);
+  width: 100%;
+}
+
+:host:after {
+  background-image: linear-gradient(
+    var(--slider-direction),
+    var(--rail-color) 0%,
+    var(--rail-color) 50%,
+    var(--track-color) 50.1%,
+    var(--track-color) 100%
+  );
+  border-radius: var(--border-radius);
+  content: '';
+  grid-row: 1 / -1;
+  grid-column: 1 / -1;
+}
+
+.track {
+  position: relative;
+  background-color: var(--track-color);
+  grid-row: 2 / 2;
+  grid-column: 2 / 2;
+  forced-color-adjust: none;
+  overflow: hidden;
+}
+
+:host([orientation='vertical'])::after,
+:host([orientation='vertical']) .track {
+  height: 100%;
+  width: var(--track-size);
+}
+
+.track::before {
+  content: '';
+  position: absolute;
+  height: 100%;
+  border-radius: inherit;
+  inset-inline-start: 0;
+  width: var(--slider-progress);
+}
+
+:host(:dir(rtl)) .track::before {
+  width: calc(100% - var(--slider-progress));
+}
+
+:host([orientation='vertical']) .track::before {
+  width: 100%;
+  bottom: 0;
+  height: var(--slider-progress);
+}
+
+:host([step]) .track::after {
+  content: '';
+  position: absolute;
+  border-radius: inherit;
+  inset: var(--step-marker-inset);
+  background-image: repeating-linear-gradient(
+    var(--slider-direction),
+    #0000 0%,
+    #0000 calc(var(--step-rate) - 1px),
+    var(--colorNeutralBackground1) calc(var(--step-rate) - 1px),
+    var(--colorNeutralBackground1) var(--step-rate)
+  );
+}
+
+.thumb-container {
+  position: absolute;
+  grid-row: 2 / 2;
+  grid-column: 2 / 2;
+  transform: translateX(-50%);
+  left: var(--slider-thumb);
+}
+
+:host([orientation='vertical']) .thumb-container {
+  transform: translateY(50%);
+  left: unset;
+  bottom: var(--slider-thumb);
+}
+
+:host(:not(:active)) :is(.thumb-container, .track::before) {
+  transition: all 0.2s ease;
+}
+
+.thumb {
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border-radius: var(--borderRadiusCircular);
+  box-shadow: 0 0 0 calc(var(--thumb-size) * 0.2) var(--colorNeutralBackground1) inset;
+  border: calc(var(--thumb-size) * 0.05) solid var(--colorNeutralStroke1);
+  box-sizing: border-box;
+}
+
+.thumb,
+.track::before {
+  background-color: var(--rail-color);
+}
+
+@media (forced-colors: active) {
+  .track:hover,
+  .track:active,
   .track {
-    position: relative;
-    background-color: var(--track-color);
-    grid-row: 2 / 2;
-    grid-column: 2 / 2;
-    forced-color-adjust: none;
-    overflow: hidden;
-  }
-
-  :host([orientation='vertical'])::after,
-  :host([orientation='vertical']) .track {
-    height: 100%;
-    width: var(--track-size);
-  }
-
-  .track::before {
-    content: '';
-    position: absolute;
-    height: 100%;
-    border-radius: inherit;
-    inset-inline-start: 0;
-    width: var(--slider-progress);
-  }
-
-  :host(:dir(rtl)) .track::before {
-    width: calc(100% - var(--slider-progress));
-  }
-
-  :host([orientation='vertical']) .track::before {
-    width: 100%;
-    bottom: 0;
-    height: var(--slider-progress);
+    background: WindowText;
   }
-
-  :host([step]) .track::after {
-    content: '';
-    position: absolute;
-    border-radius: inherit;
-    inset: var(--step-marker-inset);
-    background-image: repeating-linear-gradient(
-      var(--slider-direction),
-      #0000 0%,
-      #0000 calc(var(--step-rate) - 1px),
-      var(--colorNeutralBackground1) calc(var(--step-rate) - 1px),
-      var(--colorNeutralBackground1) var(--step-rate)
-    );
-  }
-
-  .thumb-container {
-    position: absolute;
-    grid-row: 2 / 2;
-    grid-column: 2 / 2;
-    transform: translateX(-50%);
-    left: var(--slider-thumb);
-  }
-
-  :host([orientation='vertical']) .thumb-container {
-    transform: translateY(50%);
-    left: unset;
-    bottom: var(--slider-thumb);
-  }
-
-  :host(:not(:active)) :is(.thumb-container, .track::before) {
-    transition: all 0.2s ease;
-  }
-
+  .thumb:hover,
+  .thumb:active,
   .thumb {
-    width: var(--thumb-size);
-    height: var(--thumb-size);
-    border-radius: var(--borderRadiusCircular);
-    box-shadow: 0 0 0 calc(var(--thumb-size) * 0.2) var(--colorNeutralBackground1) inset;
-    border: calc(var(--thumb-size) * 0.05) solid var(--colorNeutralStroke1);
-    box-sizing: border-box;
+    background: ButtonText;
   }
 
-  .thumb,
+  :host(:hover) .track::before,
+  :host(:active) .track::before,
   .track::before {
-    background-color: var(--rail-color);
-  }
-
-  @media (forced-colors: active) {
-    .track:hover,
-    .track:active,
-    .track {
-      background: WindowText;
-    }
-    .thumb:hover,
-    .thumb:active,
-    .thumb {
-      background: ButtonText;
-    }
-
-    :host(:hover) .track::before,
-    :host(:active) .track::before,
-    .track::before {
-      background: Highlight;
-    }
+    background: Highlight;
   }
+}

package/dist/esm/slider/slider.template.html

@@ -1,17 +1,15 @@
 <f-template name="fluent-slider" shadowrootmode="open">
-<template
-      @pointerdown="{handlePointerDown($e)}"
-      @keydown="{handleKeydown($e)}"
-    >{{styles}}
-      <div f-ref="{track}" part="track-container" class="track" style="{{position}}"></div>
-      <div
-        f-ref="{thumb}"
-        part="thumb-container"
-        class="thumb-container"
-        style="{{position}}"
-        @pointerdown="{handleThumbPointerDown($e)}"
-      >
-        <slot name="thumb"><div class="thumb"></div></slot>
-      </div>
-    </template>
+  <template @pointerdown="{handlePointerDown($e)}" @keydown="{handleKeydown($e)}">
+    {{styles}}
+    <div f-ref="{track}" part="track-container" class="track" style="{{position}}"></div>
+    <div
+      f-ref="{thumb}"
+      part="thumb-container"
+      class="thumb-container"
+      style="{{position}}"
+      @pointerdown="{handleThumbPointerDown($e)}"
+    >
+      <slot name="thumb"><div class="thumb"></div></slot>
+    </div>
+  </template>
 </f-template>