@bryntum/scheduler-thin-trial 7.2.3 → 7.3.0

package/scheduler.css

@@ -99,6 +99,7 @@ div.b-resource-info {
 :root,
 :host {
   --b-column-lines-zindex: 2;
+  --b-column-lines-major-z-index: 1;
   --b-column-lines-tick-style: solid;
   --b-column-lines-major-style: solid;
   --b-column-lines-tick-color: var(--b-neutral-95);
@@ -122,7 +123,7 @@ div.b-resource-info {
   border-inline-start-style: var(--b-column-lines-tick-style);
 }
 .b-column-line-major {
-  z-index: 1;
+  z-index: var(--b-column-lines-major-z-index);
   border-color: var(--b-column-lines-major-color);
   border-inline-start-style: var(--b-column-lines-major-style);
 }
@@ -145,6 +146,8 @@ div.b-resource-info {
 /* lib/Scheduler/feature/Dependencies.css */
 :root,
 :host {
+  --b-dependency-remove-icon-z-index: 1000;
+  --b-dependency-terminals-visible-z-index: 2;
   --b-dependency-zindex: 5;
   --b-dependency-stroke-width: 1;
   --b-dependency-hover-stroke-width: 2;
@@ -260,9 +263,9 @@ div.b-resource-info {
   translate: -50% -50%;
   pointer-events: all;
   cursor: pointer;
-  z-index: 1000;
   animation: b-anim-show-dependency-remove-icon .2s ease-in-out 1;
   font-size: 1.1em;
+  z-index: var(--b-dependency-remove-icon-z-index);
   color: var(--b-dependency-selected-color);
 }
 .b-sch-dependency-remove-icon:before {
@@ -279,7 +282,7 @@ div.b-resource-info {
   animation: b-anim-hide-dependency-remove-icon .15s linear 1;
 }
 :is(.b-sch-event, .b-gantt-task).b-sch-terminals-visible {
-  z-index: 2;
+  z-index: var(--b-dependency-terminals-visible-z-index);
 }
 @keyframes b-anim-show-dependency-remove-icon {
   0% {
@@ -327,6 +330,7 @@ div.b-resource-info {
 /* lib/Scheduler/feature/EventDragSelect.css */
 :root,
 :host {
+  --b-event-drag-select-z-index: 100;
   --b-event-drag-select-border-width: 1px;
   --b-event-drag-select-border-style: dashed;
   --b-event-drag-select-border-radius: var(--b-widget-border-radius);
@@ -338,7 +342,7 @@ div.b-resource-info {
   top: 0;
   transform-origin: 0 0;
   pointer-events: none;
-  z-index: 100;
+  z-index: var(--b-event-drag-select-z-index);
   border: var(--b-event-drag-select-border-width) var(--b-event-drag-select-border-style) var(--b-event-drag-select-border-color);
   border-radius: var(--b-event-drag-select-border-radius);
 }
@@ -377,9 +381,10 @@ div.b-resource-info {
 :root,
 :host {
   --b-event-non-working-time-opacity: 0.7;
+  --b-event-non-working-time-z-index: 0;
 }
 .b-timeline-base .b-sch-event-wrap .b-sch-non-working-time {
-  z-index: 0;
+  z-index: var(--b-event-non-working-time-z-index);
   --b-time-range-opacity: var(--b-event-non-working-time-opacity);
 }
 .b-dragging-event .b-sch-event-wrap.b-dragging .b-sch-non-working-time {
@@ -417,6 +422,7 @@ div.b-resource-info {
 /* lib/Scheduler/feature/Labels.css */
 :root,
 :host {
+  --b-event-label-z-index: 1;
   --b-event-label-font-size: .9em;
   --b-event-label-font-weight: var(--b-sch-event-font-weight);
   --b-event-label-gap: 0.5em;
@@ -427,11 +433,11 @@ div.b-resource-info {
 :is(.b-sch-event-wrap, .b-gantt-task-wrap) .b-sch-label {
   text-align: center;
   white-space: nowrap;
-  z-index: 1;
   min-width: 1em;
   pointer-events: all;
   user-select: none;
   -webkit-user-select: none;
+  z-index: var(--b-event-label-z-index);
   background: var(--b-event-label-background);
   color: var(--b-event-label-color);
   font-size: var(--b-event-label-font-size);
@@ -485,6 +491,8 @@ div.b-resource-info {
 /* lib/Scheduler/feature/ResourceColumnReorder.css */
 :root,
 :host {
+  --b-resource-column-reorder-drop-indicator-z-index: 2000;
+  --b-resource-column-reorder-proxy-z-index: 10000;
   --b-resource-column-reorder-indicator-size: 2px;
   --b-resource-column-reorder-indicator-color: var(--b-secondary);
   --b-resource-column-reorder-indicator-invalid-color: var(--b-color-red);
@@ -500,7 +508,7 @@ div.b-resource-info {
   display: block;
   top: 0;
   height: 100%;
-  z-index: 2000;
+  z-index: var(--b-resource-column-reorder-drop-indicator-z-index);
   inset-inline-start: calc(var(--b-resource-column-reorder-indicator-size) / -2);
   width: var(--b-resource-column-reorder-indicator-size);
   background-color: var(--b-resource-column-reorder-indicator-color);
@@ -513,8 +521,8 @@ div.b-resource-info {
 }
 .b-resource-column-reorder-proxy {
   position: absolute;
-  z-index: 10000;
   pointer-events: none;
+  z-index: var(--b-resource-column-reorder-proxy-z-index);
   box-shadow: var(--b-resource-column-reorder-box-shadow);
   opacity: var(--b-resource-column-reorder-proxy-opacity);
 }
@@ -535,17 +543,18 @@ div.b-resource-info {
   --b-active-tick-cell-focused-outline-color: var(--b-grid-cell-focused-outline-color);
   --b-active-tick-cell-focused-outline-offset: -2px;
   --b-active-tick-cell-focused-outline-width: var(--b-grid-cell-focused-outline-width);
+  --b-schedule-context-tick-z-index: 7;
 }
 .b-schedule-selected-tick {
   position: absolute;
   justify-content: center;
   overflow: hidden;
-  z-index: 7;
+  z-index: var(--b-schedule-context-tick-z-index);
 }
 .b-schedule-selected-tick.b-widget,
 .b-schedule-selected-tick .b-contains-widget {
-  z-index: 7;
   box-shadow: none;
+  z-index: var(--b-schedule-context-tick-z-index);
 }
 .b-schedule-selected-tick:not(.b-widget, .b-contains-widget) {
   pointer-events: none;
@@ -617,13 +626,17 @@ div.b-resource-info {
 }
 
 /* lib/Scheduler/feature/SimpleEventEdit.css */
+:root,
+:host {
+  --b-simple-event-edit-z-index: 100;
+}
 .b-simple-event-editor {
   --b-simple-event-edit-editor-background: var(--b-primary-100);
 }
 .b-simple-event-editor {
   border-radius: inherit;
-  z-index: 100;
   --b-widget-floating-box-shadow: none;
+  z-index: var(--b-simple-event-edit-z-index);
 }
 .b-simple-event-editor.b-target-has-border .b-field {
   --b-text-field-border-width: 0;
@@ -710,6 +723,7 @@ div.b-resource-info {
   --b-time-range-line-primary: var(--b-color-amber);
   --b-time-range-line-label-color: #fff;
   --b-current-time-color: var(--b-color-deep-orange);
+  --b-mouse-indicator-zindex: 15;
 }
 .b-colorize {
   --b-time-range-header-background: var(--b-primary-75);
@@ -736,6 +750,7 @@ div.b-resource-info {
   align-items: center;
   justify-content: center;
   bottom: 0;
+  white-space: nowrap;
   background: var(--b-time-range-header-background);
   color: var(--b-time-range-color);
   font-weight: var(--b-time-range-header-font-weight);
@@ -758,6 +773,12 @@ div.b-resource-info {
   z-index: calc(var(--b-time-range-range-zindex) + 1);
   --b-primary: var(--b-current-time-color);
 }
+.b-time-ranges-header-canvas.b-interactive .b-sch-time-range:not(.b-read-only) {
+  cursor: pointer;
+}
+.b-time-ranges-header-canvas.b-interactive .b-sch-time-range:not(.b-read-only).b-over-resize-handle {
+  cursor: ew-resize;
+}
 .b-time-ranges-body-canvas {
   display: contents;
 }
@@ -804,6 +825,26 @@ div.b-resource-info {
 .b-timeline-sub-grid .b-sch-current-time {
   --b-primary: var(--b-current-time-color);
 }
+.b-sch-line.b-sch-mouse-indicator {
+  pointer-events: none;
+  transition: none !important;
+  z-index: var(--b-mouse-indicator-zindex);
+  --b-primary: var(--b-mouse-indicator-color, var(--b-color-blue));
+  --b-time-range-line-color: var(--b-primary-85);
+  --b-time-range-line-opacity: 1;
+  --b-time-range-header-background: var(--b-primary);
+  --b-time-range-line-header-background: var(--b-primary);
+  --b-time-range-color: #fff;
+  --b-time-range-header-font-size: 0.8em;
+  --b-time-range-header-font-weight: 500;
+  --b-time-range-line-width: 1px;
+}
+.b-time-ranges-header-canvas .b-sch-mouse-indicator {
+  height: auto;
+  padding: 0.2em 0.6em;
+  border-radius: var(--b-time-range-line-header-border-radius);
+  translate: -50%;
+}
 .b-timeline-base:not(.b-sch-vertical) .b-time-ranges-header-canvas .b-sch-line {
   padding-inline: var(--b-time-range-line-header-padding-inline);
   border-start-end-radius: var(--b-time-range-line-header-border-radius);
@@ -814,6 +855,9 @@ div.b-resource-info {
   border-start-start-radius: var(--b-time-range-line-header-border-radius);
   border-end-start-radius: var(--b-time-range-line-header-border-radius);
 }
+.b-sch-vertical .b-time-ranges-header-canvas .b-sch-mouse-indicator {
+  translate: 0 -50%;
+}
 .b-sch-vertical .b-sch-time-range {
   inset-inline-start: auto;
   inset-block-start: 0;
@@ -860,6 +904,7 @@ div.b-resource-info {
 :root,
 :host {
   --b-time-selection-opacity: 0.2;
+  --b-time-selection-z-index: 10;
 }
 .b-sch-time-axis-column .b-selected-time-span,
 .b-vertical-time-axis-column .b-selected-time-span {
@@ -898,7 +943,7 @@ div.b-resource-info {
 }
 :is(.b-grid-header, .b-timeline-sub-grid, .b-vertical-time-axis-column) .b-selected-time-span {
   transition: none;
-  z-index: 10;
+  z-index: var(--b-time-selection-z-index);
 }
 .b-timeline-sub-grid .b-selected-time-span {
   --b-time-range-background: var(--b-time-selection-background, var(--b-primary-85));
@@ -1049,6 +1094,7 @@ div.b-resource-info {
   --b-dependency-terminal-size: 14px;
   --b-dependency-terminal-offset: -4px;
   --b-dependency-terminal-z-index: calc(var(--b-event-resize-handle-zindex) + 1);
+  --b-dependency-connector-z-index: 10;
   --b-dependency-terminal-border-width: 1px;
   --b-dependency-terminal-border-style: solid;
   --b-dependency-terminal-border-color: inherit;
@@ -1088,8 +1134,8 @@ div.b-resource-info {
   border-width: var(--b-dependency-terminal-border-width);
   height: var(--b-dependency-terminal-size);
   width: var(--b-dependency-terminal-size);
-  z-index: var(--b-dependency-terminal-z-index);
   --bi-terminal-start-end-offset: 80%;
+  z-index: var(--b-dependency-terminal-z-index);
 }
 @media (pointer: coarse) {
   .b-sch-terminal {
@@ -1163,9 +1209,9 @@ div.b-resource-info {
   position: absolute;
   contain: strict;
   border-top: 2px dashed var(--b-dependency-color);
-  z-index: 10;
   transform-origin: 0 0;
   pointer-events: none;
+  z-index: var(--b-dependency-connector-z-index);
 }
 .b-sch-dependency-connector.b-removing {
   transition: width 0.2s ease-out;
@@ -1223,6 +1269,10 @@ div.b-resource-info {
 }
 
 /* lib/Scheduler/feature/mixin/HeaderDragSelect.css */
+:root,
+:host {
+  --b-header-drag-select-z-index: 100;
+}
 .b-colorize {
   --b-header-drag-select-background: color-mix(in srgb, var(--b-primary), transparent 70%);
 }
@@ -1233,7 +1283,7 @@ div.b-resource-info {
   height: 100%;
   transform-origin: 0 0;
   pointer-events: none;
-  z-index: 100;
+  z-index: var(--b-header-drag-select-z-index);
   background: var(--b-header-drag-select-background);
 }
 
@@ -1493,6 +1543,10 @@ div.b-resource-info {
   cursor: pointer;
   background: var(--b-grid-header-hover-background);
 }
+.b-resource-header-cell:focus-visible {
+  outline: var(--b-widget-focus-outline-width) solid var(--b-widget-focus-outline-color);
+  outline-offset: calc(var(--b-widget-focus-outline-width) * -1);
+}
 .b-resource-header-cell.b-align-start,
 .b-resource-header-cell.b-align-end {
   padding-inline: 0.3em;
@@ -1524,6 +1578,7 @@ div.b-resource-info {
 :root,
 :host {
   --b-top-canvas-zindex: 1000;
+  --b-timeline-loading-indicator-z-index: 100;
 }
 .b-timeline-base.b-animating .b-grid-row {
   transition:
@@ -1533,7 +1588,6 @@ div.b-resource-info {
 }
 .b-time-axis-cell:not(.b-group-title) {
   --b-grid-cell-padding-inline: 0;
-  --b-grid-cell-focused-outline-width: 0;
 }
 .b-sch-canvas {
   position: absolute;
@@ -1547,6 +1601,11 @@ div.b-resource-info {
 .b-time-axis-sub-grid .b-sch-foreground-canvas {
   z-index: var(--b-events-zindex);
 }
+.b-wheel-zooming .b-sch-event-wrap,
+.b-wheel-zooming .b-gantt-task-wrap,
+.b-wheel-zooming svg rect {
+  pointer-events: none;
+}
 .b-sch-top-canvas {
   z-index: var(--b-top-canvas-zindex);
 }
@@ -1557,7 +1616,7 @@ div.b-resource-info {
   display: flex;
   width: 100%;
   height: 2px;
-  z-index: 100;
+  z-index: var(--b-timeline-loading-indicator-z-index);
 }
 .b-timeline-loading-indicator-wrap {
   background: color-mix(in srgb, var(--b-color-green), transparent 80%);
@@ -1703,6 +1762,10 @@ div.b-resource-info {
   --b-sch-milestone-gap: 0.5em;
   --b-sch-milestone-border-width: var(--b-sch-event-border-width);
   --b-sch-event-border-color: var(--b-sch-event-background);
+  --b-sch-event-wrap-z-index: 1;
+  --b-sch-event-z-index: 1;
+  --b-sch-event-active-z-index: 100;
+  --b-sch-milestone-diamond-z-index: 0;
 }
 .b-grid-row {
   --b-resource-event-color: var(--b-primary);
@@ -1717,10 +1780,10 @@ div.b-resource-info {
   contain: layout style;
   align-items: center;
   pointer-events: all;
-  z-index: 1;
   grid-template-areas: "top    top    top    top    top" "before start  body   end  after" "bottom bottom bottom bottom bottom";
   grid-template-columns: 0 auto 1fr auto 0;
   grid-template-rows: min-content auto min-content;
+  z-index: var(--b-sch-event-wrap-z-index);
   opacity: var(--b-sch-event-opacity);
   transition: var(--b-sch-event-transition);
 }
@@ -1782,10 +1845,10 @@ div.b-resource-info {
 .b-timeline-base:not(.b-sch-vertical.b-event-layout-mixed, .b-dragging-event) .b-sch-event-wrap.b-hover,
 .b-timeline-base:not(.b-sch-vertical.b-event-layout-mixed, .b-dragging-event) .b-sch-event-wrap.b-selected,
 .b-timeline-base:not(.b-sch-vertical.b-event-layout-mixed, .b-dragging-event) .b-sch-event-wrap:focus {
-  z-index: 100 !important;
+  z-index: var(--b-sch-event-active-z-index) !important;
 }
 .b-sch-vertical.b-event-layout-mixed .b-sch-event-wrap:focus {
-  z-index: 100 !important;
+  z-index: var(--b-sch-event-active-z-index) !important;
 }
 .b-sch-event-wrap:where(:not(.b-sch-vertical)) {
   max-height: calc(var(--b-event-size) * 1px);
@@ -1809,7 +1872,7 @@ div.b-resource-info {
   min-height: 0;
   height: 100%;
   opacity: 1;
-  z-index: 1;
+  z-index: var(--b-sch-event-z-index);
   transition: opacity var(--b-default-transition-duration);
   border-color: var(--b-sch-event-border-color);
   min-width: var(--b-sch-event-min-size);
@@ -1902,7 +1965,7 @@ div.b-resource-info {
 }
 .b-sch-layout-milestones .b-milestone-wrap .b-sch-event.b-milestone .b-sch-event-content {
   justify-content: center;
-  z-index: 1;
+  z-index: var(--b-sch-event-z-index);
 }
 .b-sch-layout-milestones .b-milestone-wrap .b-sch-event.b-milestone .b-sch-event-content::before {
   content: none;
@@ -1914,7 +1977,7 @@ div.b-resource-info {
   content: " ";
   height: calc(var(--b-milestone-size) * 0.707107);
   aspect-ratio: 1 / 1;
-  z-index: 0;
+  z-index: var(--b-sch-milestone-diamond-z-index);
 }
 .b-sch-layout-milestones .b-milestone-wrap .b-sch-event.b-milestone::before {
   top: 50%;
@@ -2083,9 +2146,6 @@ div.b-resource-info {
   --b-date-picker-cell-badge-background: var(--b-color-red);
   --b-date-picker-cell-badge-color: #fff;
   --b-date-picker-cell-badge-size: 1.7em;
-  --b-date-picker-1-to-3-events-color: var(--b-color-yellow);
-  --b-date-picker-4-to-6-events-color: var(--b-color-orange);
-  --b-date-picker-7-or-more-events-color: var(--b-color-red);
   --b-date-picker-dots-padding-bottom: 0.75em;
 }
 .b-date-picker .b-cell-events-badge {
@@ -2099,14 +2159,6 @@ div.b-resource-info {
   color: var(--b-date-picker-cell-badge-color);
   width: var(--b-date-picker-cell-badge-size);
 }
-.b-date-picker .b-calendar-panel-cell.b-date-picker-1-to-3-events:hover,
-.b-date-picker .b-calendar-panel-cell.b-date-picker-4-to-6-events:hover,
-.b-date-picker .b-calendar-panel-cell.b-date-picker-7-or-more-events:hover {
-  border-radius: 0;
-}
-:is(.b-date-picker .b-calendar-panel-cell.b-date-picker-1-to-3-events:hover, .b-date-picker .b-calendar-panel-cell.b-date-picker-4-to-6-events:hover, .b-date-picker .b-calendar-panel-cell.b-date-picker-7-or-more-events:hover) .b-calendar-cell-inner {
-  background-color: var(--b-year-view-heatmap-hover-background, var(--b-primary-75));
-}
 .b-date-picker .b-calendar-panel-cell.b-has-bullet .b-date-picker-cell-inner {
   justify-content: flex-start;
   padding-top: 2px;
@@ -2118,17 +2170,13 @@ div.b-resource-info {
   justify-content: flex-start;
   padding-top: 2px;
 }
-.b-date-picker .b-show-events-heatmap .b-calendar-panel-cell:not(:hover) {
-  --b-date-picker-heatmap-background: var(--b-neutral-95);
+.b-date-picker .b-show-events-heatmap .b-calendar-panel-cell:not(:hover) .b-date-picker-cell-inner {
+  --bi-input: clamp(0, (var(--bi-event-count) - 1) / 9, 1);
+  --bi-bg-color: color-mix( in oklab, var(--b-heatmap-end) calc(var(--bi-input) * 100%), var(--b-heatmap-start) calc((1 - var(--bi-input)) * 100%) );
 }
-.b-date-picker .b-show-events-heatmap .b-calendar-panel-cell:not(:hover).b-date-picker-1-to-3-events .b-date-picker-cell-inner {
-  background: color-mix(in srgb, var(--b-date-picker-1-to-3-events-color), var(--b-date-picker-heatmap-background));
-}
-.b-date-picker .b-show-events-heatmap .b-calendar-panel-cell:not(:hover).b-date-picker-4-to-6-events .b-date-picker-cell-inner {
-  background: color-mix(in srgb, var(--b-date-picker-4-to-6-events-color), var(--b-date-picker-heatmap-background));
-}
-.b-date-picker .b-show-events-heatmap .b-calendar-panel-cell:not(:hover).b-date-picker-7-or-more-events .b-date-picker-cell-inner {
-  background: color-mix(in srgb, var(--b-date-picker-7-or-more-events-color), var(--b-date-picker-heatmap-background));
+.b-date-picker .b-show-events-heatmap .b-calendar-panel-cell:not(:hover) .b-date-picker-cell-inner:not([data-event-count="0"]) {
+  background-color: var(--bi-bg-color);
+  font-weight: calc(var(--b-calendar-panel-cell-font-weight) + 100);
 }
 .b-date-picker .b-show-events-dots .b-calendar-panel-cell {
   --bi-extra-cell-padding: calc(var(--bi-event-count-margin-top) + var(--bi-event-count-dot-size));
@@ -2164,6 +2212,11 @@ div.b-resource-info {
 }
 
 /* lib/Scheduler/feature/EventDrag.css */
+:root,
+:host {
+  --b-event-drag-z-index: 200;
+  --b-event-drag-main-z-index: 201;
+}
 .b-sch-event-wrap.b-aborting,
 .b-sch-event-wrap.b-drag-unified-animation {
   transition:
@@ -2173,10 +2226,10 @@ div.b-resource-info {
     top 0.2s;
 }
 .b-sch-event-wrap.b-dragging {
-  z-index: 200 !important;
+  z-index: var(--b-event-drag-z-index) !important;
 }
 .b-sch-event-wrap.b-dragging.b-drag-main {
-  z-index: 201 !important;
+  z-index: var(--b-event-drag-main-z-index) !important;
 }
 .b-event-drag-tooltip .b-tooltip-content > div {
   display: flex;
@@ -2196,6 +2249,7 @@ div.b-resource-info {
 /* lib/Scheduler/feature/EventResize.css */
 :root,
 :host {
+  --b-event-resize-wrap-resizing-z-index: 2;
   --b-event-resize-handle-other-size: 3px;
   --b-event-resize-handle-hover-other-size: 3px;
   --b-event-resize-handle-border-radius: 3px;
@@ -2302,7 +2356,7 @@ div.b-resource-info {
   pointer-events: none;
 }
 .b-sch-event-wrap-resizing {
-  z-index: 2;
+  z-index: var(--b-event-resize-wrap-resizing-z-index);
 }
 .b-sch-event-resize-tip .b-tooltip-content > div {
   display: flex;
@@ -2704,6 +2758,10 @@ div.b-resource-info {
 }
 
 /* lib/Scheduler/view/TimelineHistogram.css */
+:root,
+:host {
+  --b-timeline-histogram-transition-duration: var(--b-histogram-transition-duration);
+}
 .b-timeline-histogram {
   --b-non-working-time-zindex: calc(var(--b-column-lines-zindex) + 3);
 }
@@ -2721,6 +2779,73 @@ div.b-resource-info {
   padding: 0;
   background-color: transparent;
 }
+.b-histogram-canvas {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
+  overflow: visible;
+  width: var(--bi-total-column-width);
+  z-index: calc(var(--b-column-lines-zindex) + 3);
+}
+.b-histogram-canvas > g {
+  contain: unset;
+}
+.b-histogram-canvas * {
+  vector-effect: non-scaling-stroke;
+}
+.b-histogram-canvas .b-histogram rect,
+.b-histogram-canvas .b-histogram path {
+  transition: none;
+}
+.b-animating .b-histogram-canvas .b-histogram rect {
+  transition-property:
+    x,
+    y,
+    width,
+    height,
+    fill;
+  transition-duration: var(--b-timeline-histogram-transition-duration);
+}
+@starting-style {
+  .b-animating .b-histogram-canvas .b-histogram rect {
+    y: 1;
+    height: 0;
+  }
+}
+.b-animating .b-histogram-canvas .b-histogram rect.b-removing {
+  y: 1;
+  height: 0;
+}
+.b-animating .b-histogram-canvas .b-histogram path {
+  transition-property: d;
+  transition-duration: var(--b-timeline-histogram-transition-duration);
+}
+.b-histogram-canvas > g.b-histogram.b-toggle-remove > * {
+  transition: fill-opacity var(--b-default-transition-duration), stroke-opacity var(--b-default-transition-duration);
+  fill-opacity: 0;
+  stroke-opacity: 0;
+}
+.b-histogram-canvas > g.b-histogram.b-toggle-add > * {
+  animation: b-histogram-toggle-add var(--b-default-transition-duration);
+}
+.b-histogram-canvas rect {
+  pointer-events: visiblePainted;
+}
+.b-histogram-canvas-ghost {
+  pointer-events: none;
+  transition: opacity 300ms ease-out;
+}
+@keyframes b-histogram-toggle-add {
+  from {
+    fill-opacity: 0;
+    stroke-opacity: 0;
+  }
+  to {
+    fill-opacity: 1;
+    stroke-opacity: 1;
+  }
+}
 
 /* build/temp-entry-Scheduler.css */
 /*# sourceMappingURL=scheduler.css.map */