@holoviz/panel 0.14.4 → 1.0.0-a.2

package/dist/bundled/bootstrap/css/bootstrap.css

@@ -0,0 +1,688 @@
+/* Variables */
+:host, :root {
+    --bs-primary-color: var(--jp-ui-font-color0, var(--panel-on-primary-color));
+    --bs-primary-bg: var(--jp-brand-color0, var(--panel-primary-color));
+    --bs-secondary-color: var(--panel-on-secondary-color);
+    --bs-secondary-bg: var(--panel-secondary-color);
+    --bs-form-control-bg: var(--panel-background-color);
+    --bs-body-bg: var(--jp-layout-color0, var(--panel-background-color));
+    --bs-body-color: var(--jp-widgets-label-color, var(--panel-on-background-color));
+    --bs-surface-bg: var(--jp-layout-color2, var(--panel-surface-color));
+    --bs-surface-color: var(--jp-ui-font-color1, var(--panel-on-surface-color));
+    --bs-form-control-bg: var(--jp-layout-color1, var(--panel-surface-color));
+    --bokeh-base-font: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+}
+
+:host {
+    --handle-width: 15px;
+    --handle-height: 15px;
+    --slider-size: 5px;
+    --bar-height: 16px;
+}
+
+:host-context(.navbar) h1, :host-context(.navbar) h2, :host-context(.navbar) h3,
+:host-context(.navbar) h4, :host-context(.navbar) h5, :host-context(.navbar) h6 {
+    margin-block-start: 0em;
+    margin-block-end: 0em;
+}
+
+.bk-clearfix {
+    color: var(--bs-body-color);
+}
+
+html {
+    scrollbar-face-color: var(--bs-surface-bg);
+    scrollbar-base-color: var(--bs-body-bg);
+}
+
+::-webkit-scrollbar-track {
+    background-color: var(--bs-body-bg);
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--bs-surface-bg);
+}
+
+/* Card styling */
+
+:host(.card), :host(.accordion) {
+    --bs-card-border-width: var(--bs-border-width);
+    --bs-card-border-color: var(--bs-border-color-translucent);
+    background-color: var(--bs-body-bg);
+    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
+    color: var(--bs-body-color);
+}
+
+:host(.card) {
+    --bs-card-border-radius: var(--bs-border-radius);
+    border-radius: var(--bs-card-border-radius);
+}
+
+button.card-header, button.accordion-header {
+    border: unset;
+    box-shadow: unset;
+    color: var(--bs-body-color);
+    padding: 0px 6px;
+}
+
+button.accordion-header {
+    border-radius: 0;
+}
+
+:host(.card-header-row) .card-title {
+    margin: 0;
+}
+
+.card-header > .card-header-row {
+    margin-left: 15px;
+}
+
+:host(.card-title) h1, :host(.card-title) h2, :host(.card-title) h3,
+:host(.card-title) h4, :host(.card-title) h5, :host(.card-title) h6 {
+    margin-block-end: 0.2em;
+    margin-block-start: 0.2em;
+}
+
+/* Tabs styling */
+
+.bk-header {
+  --bs-nav-link-padding-x: 1rem;
+  --bs-nav-link-padding-y: 0.5rem;
+  --bs-nav-tabs-border-width: var(--bs-border-width);
+  --bs-nav-tabs-border-color: var(--bs-border-color);
+  --bs-nav-tabs-border-radius: var(--bs-border-radius);
+  --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
+  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
+}
+
+:host(.bk-above) .bk-header {
+    --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
+    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
+}
+
+:host(.bk-left) .bk-header {
+    --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-border-color) var(--bs-secondary-bg) var(--bs-secondary-bg);
+    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-body-color) var(--bs-border-color) var(--bs-border-color);
+}
+
+:host(.bk-right) .bk-header {
+    --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
+    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
+}
+
+:host(.bk-below) .bk-header {
+    --bs-nav-tabs-link-hover-border-color: var(--bs-border-color) var(--bs-secondary-bg) var(--bs-secondary-bg);
+    --bs-nav-tabs-link-active-border-color: var(--bs-body-bg) var(--bs-border-color) var(--bs-border-color);
+}
+
+:host(.bk-above) .bk-header .bk-tab,
+:host(.bk-left) .bk-header .bk-tab,
+:host(.bk-right) .bk-header .bk-tab,
+:host(.bk-below) .bk-header .bk-tab {
+  background: none;
+  border: var(--bs-nav-tabs-border-width) solid transparent;
+  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
+}
+
+:host(.bk-above) .bk-header .bk-tab {
+  margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
+  border-bottom: 0;
+  border-top-left-radius: var(--bs-nav-tabs-border-radius);
+  border-top-right-radius: var(--bs-nav-tabs-border-radius);
+}
+
+:host(.bk-left) .bk-header .bk-tab {
+  margin-right: calc(-1 * var(--bs-nav-tabs-border-width));
+  border-right: 0;
+  border-top-left-radius: var(--bs-nav-tabs-border-radius);
+  border-bottom-left-radius: var(--bs-nav-tabs-border-radius);
+}
+
+:host(.bk-right) .bk-header .bk-tab {
+  margin-left: calc(-1 * var(--bs-nav-tabs-border-width));
+  border-left: 0;
+  border-top-right-radius: var(--bs-nav-tabs-border-radius);
+  border-bottom-right-radius: var(--bs-nav-tabs-border-radius);
+}
+
+:host(.bk-below) .bk-header .bk-tab {
+  margin-top: calc(-1 * var(--bs-nav-tabs-border-width));
+  border-top: 0;
+  border-bottom-left-radius: var(--bs-nav-tabs-border-radius);
+  border-bottom-right-radius: var(--bs-nav-tabs-border-radius);
+}
+
+:host(.bk-above) .bk-header .bk-tab:hover, .bk-header .bk-tab:focus,
+:host(.bk-left) .bk-header .bk-tab:hover, .bk-header .bk-tab:focus,
+:host(.bk-right) .bk-header .bk-tab:hover, .bk-header .bk-tab:focus,
+:host(.bk-below) .bk-header .bk-tab:hover, .bk-header .bk-tab:focus {
+  isolation: isolate;
+  border-color: var(--bs-nav-tabs-link-hover-border-color);
+}
+
+:host(.bk-above) .bk-header .bk-tab.bk-active,
+:host(.bk-left) .bk-header .bk-tab.bk-active,
+:host(.bk-right) .bk-header .bk-tab.bk-active,
+:host(.bk-below) .bk-header .bk-tab.bk-active {
+  color: var(--bs-nav-tabs-link-active-color);
+  background-color: var(--bs-nav-tabs-link-active-bg);
+  border-color: var(--bs-nav-tabs-link-active-border-color);
+}
+
+/* Slider styling */
+
+.noUi-target {
+    background: unset;
+    background-color: var(--bs-tertiary-bg);
+    border: unset;
+    box-shadow: unset;
+}
+
+.noUi-handle {
+    background-color: #0d6efd;
+    border: unset;
+    border-radius: 50%;
+    box-shadow: unset;
+    -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.noUi-handle:focus {
+    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.noUi-handle:active {
+    background-color: #b6d4fe;
+}
+
+.noUi-target[disabled="true"] .noUi-handle {
+    background-color: var(--bs-secondary-bg);
+}
+
+.noUi-target[disabled="true"] .noUi-handle:focus {
+    box-shadow: unset;
+}
+
+.noUi-connects {
+    cursor: pointer;
+    background-color: var(--bs-tertiary-bg);
+    border: unset;
+    border-radius: 2rem;
+    height: var(--slider-size);
+}
+
+/* Input widget */
+
+.bk-input-group {
+    color: var(--bs-body-color);
+}
+
+input.bk-input, textarea.bk-input {
+    display: block;
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--bs-body-color);
+    background-color: var(--bs-form-control-bg);
+    background-clip: padding-box;
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: 0.375rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.bk-input[disabled] {
+    background-color: var(--bs-form-control-disabled-bg);
+}
+
+/* Number input */
+
+:host(.slider-edit) .bk-input-group .bk-spin-wrapper .bk-input {
+    background-color: var(--bs-body-bg);
+}
+
+.bk-input-group > .bk-spin-wrapper > .bk-spin-btn.bk-spin-btn-up:before {
+    border-bottom: 5px solid var(--bs-body-color);
+}
+
+.bk-input-group > .bk-spin-wrapper > .bk-spin-btn.bk-spin-btn-down:before {
+    border-top: 5px solid var(--bs-body-color);
+}
+
+/* Button widgets */
+
+.bk-btn {
+    --bs-btn-padding-x: 0.75rem;
+    --bs-btn-padding-y: 0.375rem;
+    --bs-btn-font-size: 0.8rem;
+    --bs-btn-font-weight: 400;
+    --bs-btn-line-height: 1.5;
+    --bs-btn-color: var(--bs-body-color);
+    --bs-btn-bg: transparent;
+    --bs-btn-border-width: var(--bs-border-width);
+    --bs-btn-border-color: var(--bs-border-color);
+    --bs-btn-border-radius: 0.375rem;
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-hover-color: var(--bs-body-bg);
+    --bs-btn-hover-bg: var(--bs-body-color);
+    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+    --bs-btn-disabled-opacity: 0.65;
+    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
+    display: inline-block;
+    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
+    font-family: var(--bs-btn-font-family);
+    font-size: var(--bs-btn-font-size);
+    font-weight: var(--bs-btn-font-weight);
+    line-height: var(--bs-btn-line-height);
+    color: var(--bs-btn-color);
+    text-align: center;
+    text-decoration: none;
+    vertical-align: middle;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
+    border-radius: var(--bs-btn-border-radius);
+    background-color: var(--bs-btn-bg);
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.bk-btn:hover {
+    color: var(--bs-btn-hover-color);
+    background-color: var(--bs-btn-hover-bg);
+    border-color: var(--bs-btn-hover-border-color);
+}
+
+.bk-active.bk-btn:hover {
+  color: var(--bs-btn-color);
+  background-color: var(--bs-btn-active-bg);
+  border-color: var(--bs-btn-border-color);
+}
+
+.bk-btn:focus-visible {
+    color: var(--bs-btn-hover-color);
+    background-color: var(--bs-btn-hover-bg);
+    border-color: var(--bs-btn-hover-border-color);
+    outline: 0;
+    box-shadow: var(--bs-btn-focus-box-shadow);
+}
+
+.bk-btn.bk-active {
+    color: var(--bs-btn-active-color);
+    background-color: var(--bs-btn-active-bg);
+    border-color: var(--bs-btn-active-border-color);
+    box-shadow: var(--bs-btn-active-shadow);
+}
+
+.bk-btn-default {
+  --bs-btn-color: var(--bs-primary-color);
+  --bs-btn-bg: var(--bs-primary-bg);
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-hover-color: var(--panel-on-primary-color);
+  --bs-btn-hover-bg: var(--panel-primary-color);
+  --bs-btn-hover-border-color: var(--panel-primary-color);
+  --bs-btn-focus-shadow-rgb: var(--panel-primary-rgb);
+  --bs-btn-active-color: var(--panel-on-primary-color);
+  --bs-btn-active-bg: var(--panel-primary-color);
+  --bs-btn-active-border-color: var(--panel-primary-color);
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #0d6efd;
+  --bs-btn-disabled-border-color: #0d6efd;
+}
+
+.bk-btn-primary {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #0d6efd;
+  --bs-btn-border-color: #0d6efd;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #0b5ed7;
+  --bs-btn-hover-border-color: #0a58ca;
+  --bs-btn-focus-shadow-rgb: 49, 132, 253;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #0a58ca;
+  --bs-btn-active-border-color: #0a53be;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #0d6efd;
+  --bs-btn-disabled-border-color: #0d6efd;
+}
+
+.bk-btn-secondary {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #6c757d;
+  --bs-btn-border-color: #6c757d;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #5c636a;
+  --bs-btn-hover-border-color: #565e64;
+  --bs-btn-focus-shadow-rgb: 130, 138, 145;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #565e64;
+  --bs-btn-active-border-color: #51585e;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #6c757d;
+  --bs-btn-disabled-border-color: #6c757d;
+}
+
+.bk-btn-success {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #198754;
+  --bs-btn-border-color: #198754;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #157347;
+  --bs-btn-hover-border-color: #146c43;
+  --bs-btn-focus-shadow-rgb: 60, 153, 110;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #146c43;
+  --bs-btn-active-border-color: #13653f;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #198754;
+  --bs-btn-disabled-border-color: #198754;
+}
+
+.bk-btn-info {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #0dcaf0;
+  --bs-btn-border-color: #0dcaf0;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #31d2f2;
+  --bs-btn-hover-border-color: #25cff2;
+  --bs-btn-focus-shadow-rgb: 11, 172, 204;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #3dd5f3;
+  --bs-btn-active-border-color: #25cff2;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #0dcaf0;
+  --bs-btn-disabled-border-color: #0dcaf0;
+}
+
+.bk-btn-warning {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #ffc107;
+  --bs-btn-border-color: #ffc107;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #ffca2c;
+  --bs-btn-hover-border-color: #ffc720;
+  --bs-btn-focus-shadow-rgb: 217, 164, 6;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #ffcd39;
+  --bs-btn-active-border-color: #ffc720;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #ffc107;
+  --bs-btn-disabled-border-color: #ffc107;
+}
+
+.bk-btn-danger {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #dc3545;
+  --bs-btn-border-color: #dc3545;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #bb2d3b;
+  --bs-btn-hover-border-color: #b02a37;
+  --bs-btn-focus-shadow-rgb: 225, 83, 97;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #b02a37;
+  --bs-btn-active-border-color: #a52834;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #dc3545;
+  --bs-btn-disabled-border-color: #dc3545;
+}
+
+.bk-btn-light {
+  --bs-btn-color: #000;
+  --bs-btn-bg: #f8f9fa;
+  --bs-btn-border-color: #f8f9fa;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #d3d4d5;
+  --bs-btn-hover-border-color: #c6c7c8;
+  --bs-btn-focus-shadow-rgb: 211, 212, 213;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: #c6c7c8;
+  --bs-btn-active-border-color: #babbbc;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #f8f9fa;
+  --bs-btn-disabled-border-color: #f8f9fa;
+}
+
+.bk-btn-dark {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #212529;
+  --bs-btn-border-color: #212529;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #424649;
+  --bs-btn-hover-border-color: #373b3e;
+  --bs-btn-focus-shadow-rgb: 66, 70, 73;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #4d5154;
+  --bs-btn-active-border-color: #373b3e;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #212529;
+  --bs-btn-disabled-border-color: #212529;
+}
+
+.bk-menu {
+    background-color: var(--bs-form-control-bg);
+}
+
+.bk-menu > :not(.bk-divider):hover, .bk-menu > :not(.bk-divider).bk-active {
+    background-color: var(--panel-primary-color);
+    color: var(--panel-on-primary-color);
+}
+
+/* Select widgets */
+
+select.bk-input {
+    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+    display: block;
+    width: 100%;
+    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
+    -moz-padding-start: calc(0.75rem - 3px);
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--bs-body-color);
+    background-color: var(--bs-form-control-bg);
+    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 16px 12px;
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-radius: 0.375rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+.form-control:focus, .choices__inner:focus {
+  color: var(--bs-body-color);
+  background-color: var(--bs-form-control-bg);
+  border-color: #86b7fe;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.form-control:disabled {
+  background-color: var(--bs-form-control-disabled-bg);
+  opacity: 1;
+}
+
+/* Choice */
+
+.choices__inner {
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-radius: 0.375rem;
+    padding: calc(var(--padding-vertical)) var(--padding-horizontal);
+}
+
+.choices__list--multiple .choices__item {
+    margin-bottom: 0.1em;
+    margin-top: 0.1em;
+}
+
+.choices.is-disabled .choices__inner, .choices.is-disabled .choices__input {
+    background-color: var(--bs-form-control-disabled-bg);
+}
+
+.choices.is-disabled .choices__list--multiple .choices__item {
+    opacity: 0.7;
+}
+
+.choices__list--dropdown, .choices__list[aria-expanded] {
+    background-color: var(--bs-form-control-bg);
+}
+
+.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
+    background-color: var(--panel-primary-color);
+    color: var(--panel-on-primary-color);
+}
+
+/* Checkbox */
+
+input[type="checkbox"] {
+    width: 1.25em;
+    height: 1.25em;
+}
+
+input[type="checkbox"] + span {
+    line-height: 1.5;
+    font-weight: 400;
+    top: -3px;
+}
+
+/* Radio */
+
+input[type="radio"] {
+    width: 1.4em;
+    height: 1.4em;
+    border-radius: 50%;
+}
+
+input[type="radio"] + span {
+    top: -0.4em;
+}
+
+.bk-input-group > label {
+    padding: 5px 0;
+}
+
+/* Switch */
+
+.body > .knob {
+    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
+
+    background-color: unset;
+    background-image: var(--bs-form-switch-bg);
+    background-position: left center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    border: unset;
+    height: 1.5em;
+    left: 0;
+    transition: background-position 0.15s ease-in-out;
+    transition-property: background-position;
+    width: 3em;
+}
+
+.body > .bar {
+    background-color: transparent;
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    height: 1.5em;
+    width: 3em;
+}
+
+.body > .knob:focus {
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
+}
+
+
+.body > .bar:focus {
+    border-color: #86b7fe;
+    outline: 0;
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+:host(.active) .bar {
+    background-color: #0d6efd;
+    border-color: #0d6efd;
+    background-color: #0d6efd;
+}
+
+:host(.active) .knob {
+    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+    background-position: right center;
+    background-color: unset;
+    left: 0;
+}
+
+/* Tabulator */
+
+.pnx-tabulator.tabulator {
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    width: 100%;
+}
+
+.pnx-tabulator.tabulator .tabulator-tableholder .tabulator-table {
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+}
+
+.pnx-tabulator.tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
+    background-color: var(--bs-body-bg);
+}
+
+div .tabulator .tabulator-headers, div .tabulator .tabulator-header .tabulator-col {
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+}
+
+.pnx-tabulator.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-row-even {
+    background-color: var(--bs-surface-bg);
+    color: var(--bs-surface-color);
+}
+
+.pnx-tabulator.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selectable:hover {
+    background-color: rgba(var(--panel-primary-rgb), 0.25);
+    color: var(--bs-primary-color);
+}
+
+.pnx-tabulator.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
+    background-color: var(--bs-surface-bg);
+    color: var(--bs-surface-color);
+}
+
+.pnx-tabulator.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selected.tabulator-selectable:hover {
+    background-color: var(--bs-primary-bg);
+    color: var(--bs-primary-color);
+}
+
+.pnx-tabulator.tabulator .tabulator-table .tabulator-row.tabulator-selected,
+.pnx-tabulator.tabulator .tabulator-table .tabulator-row.tabulator-selected.tabulator-row-even {
+    background-color: var(--bs-primary-bg);
+    color: var(--bs-primary-color);
+}
+
+.tabulator-row .tabulator-cell.tabulator-editing {
+    border: 1px solid var(--bs-body-color);
+}
+
+.tabulator-row .tabulator-cell.tabulator-editing input {
+    color: var(--bs-body-color);
+}
+
+/* Quill editor */
+
+.ql-editor, .ql-editor.ql-blank::before {
+    color: var(--bs-body-color);
+}