@dodlhuat/basix 1.4.2 → 1.5.0

package/css/style.css

@@ -68,11 +68,6 @@ table {
   --primary-dark: #1A1B1F;
   --primary-light: #F0F1F3;
   --hover: rgba(0, 0, 0, 0.04);
-  --radius-sm: 0.25rem;
-  --radius-md: 0.4rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-full: 9999px;
 }
 
 [data-theme=dark] {
@@ -222,6 +217,32 @@ code.code .code-content {
   display: flex;
 }
 
+@keyframes bx-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes bx-fade-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes placeholder-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
 .row {
   display: flex;
   flex-direction: row;
@@ -291,7 +312,7 @@ p {
 code {
   font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
   font-size: 0.875em;
-  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
   border: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
   color: var(--accent-color);
   padding: 0.2em 0.45em;
@@ -394,7 +415,7 @@ blockquote {
 }
 
 mark {
-  background-color: color-mix(in srgb, var(--accent-color) 18%, transparent);
+  background-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
   color: var(--primary-text);
   border-radius: 0.1rem;
   padding: 0 0.2em;
@@ -845,7 +866,7 @@ tbody tr:hover {
 }
 
 [data-theme=dark] .alert-info {
-  background: color-mix(in srgb, var(--accent-color) 10%, var(--background));
+  background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
   border-left-color: var(--accent-color);
   color: var(--primary-text);
 }
@@ -859,7 +880,7 @@ tbody tr:hover {
   background: color-mix(in srgb, var(--accent-color) 12%, transparent);
 }
 [data-theme=dark] .alert-success {
-  background: color-mix(in srgb, var(--success) 10%, var(--background));
+  background: color-mix(in srgb, var(--success) 12%, var(--background));
   border-left-color: var(--success);
   color: var(--primary-text);
 }
@@ -873,7 +894,7 @@ tbody tr:hover {
   background: color-mix(in srgb, var(--success) 12%, transparent);
 }
 [data-theme=dark] .alert-warning {
-  background: color-mix(in srgb, var(--warning) 10%, var(--background));
+  background: color-mix(in srgb, var(--warning) 12%, var(--background));
   border-left-color: var(--warning);
   color: var(--primary-text);
 }
@@ -887,7 +908,7 @@ tbody tr:hover {
   background: color-mix(in srgb, var(--warning) 12%, transparent);
 }
 [data-theme=dark] .alert-error {
-  background: color-mix(in srgb, var(--error) 10%, var(--background));
+  background: color-mix(in srgb, var(--error) 12%, var(--background));
   border-left-color: var(--error);
   color: var(--primary-text);
 }
@@ -989,8 +1010,9 @@ select {
   background-color: var(--background);
 }
 .select-group .dropdown-selected {
+  position: relative;
   border: 1.5px solid var(--divider);
-  padding: 0 0.65rem;
+  padding: 0 2rem 0 0.65rem;
   border-radius: 0.6rem;
   cursor: pointer;
   background: var(--background);
@@ -1010,33 +1032,45 @@ select {
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03), 0 0 0 3.5px color-mix(in srgb, var(--accent-color) 13%, transparent), 0 2px 12px rgba(0, 0, 0, 0.06);
 }
 .select-group .dropdown-selected::after {
-  font-family: "Material Symbols Outlined 24pt", serif;
-  content: "\e5cf";
-  float: right;
-  color: var(--secondary-text);
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 0.65rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  background-color: var(--secondary-text);
+  mask-image: url("../svg-icons/keyboard_arrow_down.svg");
+  -webkit-mask-image: url("../svg-icons/keyboard_arrow_down.svg");
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  transform: translateY(-50%);
   transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
-  line-height: inherit;
+  pointer-events: none;
 }
 .select-group .dropdown.open .dropdown-selected {
   border-color: var(--accent-color);
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03), 0 0 0 3.5px color-mix(in srgb, var(--accent-color) 13%, transparent);
 }
 .select-group .dropdown.open .dropdown-selected::after {
-  transform: rotate(180deg);
+  transform: translateY(-50%) rotate(180deg);
 }
 .select-group .dropdown-options {
   position: absolute;
   top: calc(100% + 6px);
   left: 0;
   right: 0;
-  border: 1.5px solid var(--divider);
-  border-radius: 0.6rem;
   display: none;
   flex-direction: column;
   z-index: 10;
   max-height: 260px;
   overflow-y: auto;
-  background-color: var(--background);
+  background: var(--background);
+  border: 1px solid var(--divider);
+  border-radius: 0.6rem;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.11), 0 2px 8px rgba(0, 0, 0, 0.06);
   padding: 0.25rem;
   gap: 1px;
@@ -1045,7 +1079,7 @@ select {
 .select-group .dropdown-option {
   padding: 0.6rem 0.65rem;
   cursor: pointer;
-  border-radius: 0.44rem;
+  border-radius: 0.4rem;
   transition: background 0.1s ease;
   font-size: 0.9375rem;
   position: relative;
@@ -1054,7 +1088,7 @@ select {
   background: var(--hover);
 }
 .select-group .dropdown-option.selected {
-  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
   color: var(--accent-color);
   font-weight: 500;
 }
@@ -1100,9 +1134,8 @@ select {
     transform: translateY(-50%);
     cursor: pointer;
     color: var(--accent-color);
-    font-size: 0.9375rem;
-    font-weight: 500;
-    letter-spacing: 0;
+    width: 0.9375rem;
+    height: 0.9375rem;
   }
   .select-group .dropdown-options {
     position: fixed;
@@ -1169,7 +1202,7 @@ select {
 }
 .form-group.error input, .form-group.error textarea, .form-group.error select {
   border-color: var(--error);
-  background-color: color-mix(in srgb, var(--error) 3%, var(--background));
+  background-color: color-mix(in srgb, var(--error) 8%, var(--background));
   box-shadow: inset 0 1.5px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
   animation: field-error-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 }
@@ -1255,342 +1288,23 @@ input.input-sm, textarea.input-sm {
   min-height: 1.7rem;
   font-size: 0.875rem;
   padding: 0 0.5rem;
-  border-radius: 0.44rem;
+  border-radius: 0.4rem;
 }
 
 input.input-lg, textarea.input-lg {
   min-height: 3.3rem;
   font-size: 1.125rem;
   padding: 0 0.75rem;
-  border-radius: 0.7rem;
-}
-
-@font-face {
-  font-family: "Material Symbols Outlined 24pt";
-  src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2");
-}
-.icon {
-  font-family: "Material Symbols Outlined 24pt", serif;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  font-size: 24px;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-delete::before {
-  content: "\e872";
-}
-
-.icon-search::before {
-  content: "\e8b6";
-}
-
-.icon-splitscreen_vertical_add::before {
-  content: "\f4fc";
-}
-
-.icon-splitscreen_add::before {
-  content: "\f4fd";
-}
-
-.icon-push_pin::before {
-  content: "\f10d";
-}
-
-.icon-block::before {
-  content: "\e033";
-}
-
-.icon-check_circle::before {
-  content: "\e86c";
-}
-
-.icon-stars::before {
-  content: "\e8d0";
-}
-
-.icon-support::before {
-  content: "\ef73";
-}
-
-.icon-refresh::before {
-  content: "\e5d5";
-}
-
-.icon-sync::before {
-  content: "\e627";
-}
-
-.icon-language::before {
-  content: "\e894";
-}
-
-.icon-article::before {
-  content: "\ef42";
-}
-
-.icon-list_alt::before {
-  content: "\e0ee";
-}
-
-.icon-add_box::before {
-  content: "\e146";
-}
-
-.icon-disabled_by_default::before {
-  content: "\f230";
-}
-
-.icon-help_center::before {
-  content: "\f1c0";
-}
-
-.icon-pages::before {
-  content: "\e7f9";
-}
-
-.icon-add_photo_alternate::before {
-  content: "\e43e";
-}
-
-.icon-calendar_today::before {
-  content: "\e935";
-}
-
-.icon-assignment_turned_in::before {
-  content: "\e862";
-}
-
-.icon-finance::before {
-  content: "\e6bf";
-}
-
-.icon-save::before {
-  content: "\e161";
-}
-
-.icon-folder::before {
-  content: "\e2c7";
-}
-
-.icon-folder_off::before {
-  content: "\eb83";
-}
-
-.icon-folder_open::before {
-  content: "\e2c8";
-}
-
-.icon-mail::before {
-  content: "\e0be";
-}
-
-.icon-attach_file::before {
-  content: "\e226";
-}
-
-.icon-chat_bubble::before {
-  content: "\e0ca";
-}
-
-.icon-cases::before {
-  content: "\e992";
-}
-
-.icon-send::before {
-  content: "\e163";
-}
-
-.icon-bookmark::before {
-  content: "\e866";
-}
-
-.icon-label::before {
-  content: "\e892";
-}
-
-.icon-filter_alt::before {
-  content: "\ef4f";
-}
-
-.icon-filter_alt_off::before {
-  content: "\eb32";
-}
-
-.icon-notifications_active::before {
-  content: "\e7f7";
-}
-
-.icon-more_horiz::before {
-  content: "\e5d3";
-}
-
-.icon-more_vert::before {
-  content: "\e5d4";
-}
-
-.icon-navigate_before::before {
-  content: "\e408";
-}
-
-.icon-navigate_next::before {
-  content: "\e409";
-}
-
-.icon-keyboard_double_arrow_left::before {
-  content: "\eac3";
-}
-
-.icon-keyboard_double_arrow_right::before {
-  content: "\eac9";
-}
-
-.icon-first_page::before {
-  content: "\e5dc";
-}
-
-.icon-last_page::before {
-  content: "\e5dd";
-}
-
-.icon-expand_less::before {
-  content: "\e5ce";
-}
-
-.icon-expand_more::before {
-  content: "\e5cf";
-}
-
-.icon-zoom_in_map::before {
-  content: "\eb2d";
-}
-
-.icon-zoom_out_map::before {
-  content: "\e56b";
-}
-
-.icon-drag_pan::before {
-  content: "\f71e";
-}
-
-.icon-format_list_bulleted::before {
-  content: "\e241";
-}
-
-.icon-format_list_numbered::before {
-  content: "\e242";
-}
-
-.icon-check::before {
-  content: "\e5ca";
-}
-
-.icon-remove::before {
-  content: "\e15b";
-}
-
-.icon-add::before {
-  content: "\e145";
-}
-
-.icon-close::before {
-  content: "\e14c";
-}
-
-.icon-format_bold::before {
-  content: "\e238";
-}
-
-.icon-format_italic::before {
-  content: "\e23f";
-}
-
-.icon-format_underlined::before {
-  content: "\e249";
-}
-
-.icon-home::before {
-  content: "\e88a";
-}
-
-.icon-favorite::before {
-  content: "\e87d";
-}
-
-.icon-edit::before {
-  content: "\e150";
-}
-
-.icon-layers::before {
-  content: "\e53b";
-}
-
-.icon-cloud::before {
-  content: "\e2bd";
-}
-
-.icon-print::before {
-  content: "\e555";
-}
-
-.icon-share::before {
-  content: "\e80d";
-}
-
-.icon-tune::before {
-  content: "\e429";
-}
-
-.icon-power_settings_new::before {
-  content: "\e8ac";
-}
-
-.icon-timeline::before {
-  content: "\e922";
-}
-
-.icon-bar_chart::before {
-  content: "\e26b";
-}
-
-.icon-bar_chart_4_bars::before {
-  content: "\f681";
-}
-
-.icon-finance_mode::before {
-  content: "\ef92";
-}
-
-.icon-database::before {
-  content: "\f20e";
-}
-
-.icon-settings::before {
-  content: "\e8b8";
-}
-
-.icon-person::before {
-  content: "\e7fd";
-}
-
-.icon-menu_open::before {
-  content: "\e7ad";
-}
-
-.icon-menu::before {
-  content: "\e7ac";
-}
-
-.icon-light::before {
-  content: "\e81a";
+  border-radius: 0.8rem;
 }
 
-.icon-dark::before {
-  content: "\ef44";
+.icon-svg {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  fill: currentColor;
+  flex-shrink: 0;
+  vertical-align: middle;
 }
 
 :root {
@@ -2087,13 +1801,13 @@ button.button-pill {
     width: 100%;
     max-width: 100%;
     max-height: 85vh;
-    border-radius: 1.2rem 1.2rem 0 0;
+    border-radius: 1.6rem 1.6rem 0 0;
     border-bottom: none;
     transform: translateY(20px);
     padding-bottom: calc(1rem + env(safe-area-inset-bottom));
   }
   .modal .header {
-    border-radius: 1.2rem 1.2rem 0 0;
+    border-radius: 1.6rem 1.6rem 0 0;
   }
   .modal .footer {
     border-radius: 0;
@@ -2153,9 +1867,9 @@ button.button-pill {
   transition: background 0.2s ease, color 0.2s ease, opacity 0.3s ease;
   -webkit-tap-highlight-color: transparent;
 }
-.lightbox-close .icon {
-  font-size: 1.25rem;
-  line-height: 1;
+.lightbox-close .icon-svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 .lightbox-close:hover {
   background: rgba(255, 255, 255, 0.22);
@@ -2297,10 +2011,10 @@ button.button-pill {
   transition: background 0.2s ease, opacity 0.3s ease, transform 0.2s ease;
   -webkit-tap-highlight-color: transparent;
 }
-.lightbox-prev .icon,
-.lightbox-next .icon {
-  font-size: 1.5rem;
-  line-height: 1;
+.lightbox-prev .icon-svg,
+.lightbox-next .icon-svg {
+  width: 1.5rem;
+  height: 1.5rem;
 }
 .lightbox-prev:hover,
 .lightbox-next:hover {
@@ -2330,9 +2044,10 @@ button.button-pill {
     width: 2rem;
     height: 2rem;
   }
-  .lightbox-prev .icon,
-  .lightbox-next .icon {
-    font-size: 1.25rem;
+  .lightbox-prev .icon-svg,
+  .lightbox-next .icon-svg {
+    width: 1.25rem;
+    height: 1.25rem;
   }
   .lightbox-prev {
     left: 0.5rem;
@@ -2359,7 +2074,7 @@ button.button-pill {
   background: var(--background);
   border: 1px solid var(--divider);
   border-radius: 1rem;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 12px 24px -4px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.11), 0 2px 8px rgba(0, 0, 0, 0.06);
   min-width: 160px;
   max-width: 320px;
   opacity: 0;
@@ -2586,14 +2301,6 @@ button.button-pill {
   width: 100%;
 }
 
-@keyframes placeholder-shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
 .progress {
   width: 100%;
   height: 8px;
@@ -3336,11 +3043,19 @@ nav li + li .push-menu-item {
   min-width: 0;
 }
 .breadcrumb li + li::before {
-  content: "\e409";
-  font-family: "Material Symbols Outlined 24pt";
-  font-size: 1.125rem;
-  line-height: 1;
-  color: var(--divider);
+  content: "";
+  display: inline-block;
+  width: 1.125rem;
+  height: 1.125rem;
+  background-color: var(--divider);
+  mask-image: url("../svg-icons/chevron_right.svg");
+  -webkit-mask-image: url("../svg-icons/chevron_right.svg");
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
   flex-shrink: 0;
   user-select: none;
   pointer-events: none;
@@ -3358,8 +3073,9 @@ nav li + li .push-menu-item {
   white-space: nowrap;
   transition: color 0.15s ease, background 0.15s ease;
 }
-.breadcrumb li a .icon {
-  font-size: 1rem;
+.breadcrumb li a .icon-svg {
+  width: 1rem;
+  height: 1rem;
 }
 .breadcrumb li a:hover {
   color: var(--primary-text);
@@ -3484,10 +3200,10 @@ nav li + li .push-menu-item {
 .chips .chip.clickable.selected {
   background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
   color: var(--accent-color);
-  border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
+  border-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
 }
 .chips .chip.clickable.selected:hover {
-  background: color-mix(in srgb, var(--accent-color) 18%, var(--background));
+  background: color-mix(in srgb, var(--accent-color) 20%, var(--background));
 }
 .chips .chip.closeable {
   padding-right: 1.8rem;
@@ -3515,11 +3231,9 @@ nav li + li .push-menu-item {
   color: var(--primary-text);
 }
 .chips .chip.closeable button:active {
-  background: color-mix(in srgb, var(--primary-text) 18%, transparent);
+  background: color-mix(in srgb, var(--primary-text) 20%, transparent);
 }
-.chips .chip.closeable button .icon,
 .chips .chip.closeable button .icon-svg {
-  font-size: 0.8rem;
   width: 0.8rem;
   height: 0.8rem;
 }
@@ -3529,7 +3243,7 @@ nav li + li .push-menu-item {
   border-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
 }
 .chips .chip-accent.closeable button:hover {
-  background: color-mix(in srgb, var(--accent-color) 15%, transparent);
+  background: color-mix(in srgb, var(--accent-color) 20%, transparent);
   color: var(--accent-color);
 }
 .chips .chip-success {
@@ -3538,7 +3252,7 @@ nav li + li .push-menu-item {
   border-color: color-mix(in srgb, var(--success) 20%, transparent);
 }
 .chips .chip-success.closeable button:hover {
-  background: color-mix(in srgb, var(--success) 15%, transparent);
+  background: color-mix(in srgb, var(--success) 20%, transparent);
   color: var(--success);
 }
 .chips .chip-warning {
@@ -3547,7 +3261,7 @@ nav li + li .push-menu-item {
   border-color: color-mix(in srgb, var(--warning) 20%, transparent);
 }
 .chips .chip-warning.closeable button:hover {
-  background: color-mix(in srgb, var(--warning) 15%, transparent);
+  background: color-mix(in srgb, var(--warning) 20%, transparent);
   color: var(--warning);
 }
 .chips .chip-error {
@@ -3556,7 +3270,7 @@ nav li + li .push-menu-item {
   border-color: color-mix(in srgb, var(--error) 20%, transparent);
 }
 .chips .chip-error.closeable button:hover {
-  background: color-mix(in srgb, var(--error) 15%, transparent);
+  background: color-mix(in srgb, var(--error) 20%, transparent);
   color: var(--error);
 }
 .chips .chip-outline {
@@ -3805,7 +3519,7 @@ nav li + li .push-menu-item {
 
 .stepper-step.active .stepper-indicator {
   border-color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 10%, var(--background));
+  background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
   color: var(--accent-color);
   animation: stepper-pulse 2.4s ease-out 3;
 }
@@ -3830,7 +3544,7 @@ nav li + li .push-menu-item {
 }
 .stepper-step.error .stepper-indicator {
   border-color: var(--error);
-  background: color-mix(in srgb, var(--error) 10%, var(--background));
+  background: color-mix(in srgb, var(--error) 12%, var(--background));
   color: var(--error);
   animation: none;
 }
@@ -4055,7 +3769,7 @@ ul.tree li {
   transition: background-color 0.2s;
 }
 
-.datepicker-nav:hover {
+.datepicker-nav:hover:not(:disabled) {
   background-color: var(--accent-color-lighten);
   color: var(--accent-color-text);
 }
@@ -4066,21 +3780,6 @@ ul.tree li {
   font-weight: 600;
 }
 
-.datepicker-select {
-  border: none;
-  background: none;
-  font-family: inherit;
-  font-weight: 600;
-  font-size: 1rem;
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-}
-
-.datepicker-select:hover {
-  background-color: var(--accent-color-lighten);
-}
-
 .datepicker-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -4090,7 +3789,7 @@ ul.tree li {
 
 .datepicker-day-header {
   font-size: 0.875rem;
-  color: var(--text-muted);
+  color: var(--secondary-text);
   font-weight: 500;
   padding: 0.5rem 0;
 }
@@ -4200,81 +3899,108 @@ ul.tree li {
   transition: background-color 0.2s;
 }
 
-.datepicker-title-btn:hover {
+.datepicker-title-btn:hover:not(:disabled) {
   background-color: var(--accent-color-lighten);
 }
 
-.datepicker-time {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.datepicker-clock {
   border-top: 1px solid var(--divider);
   margin-top: 1rem;
   padding-top: 1rem;
 }
 
-.datepicker-time-label {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--primary-text);
-}
-
-.datepicker-time-controls {
+.datepicker-clock-header {
   display: flex;
   align-items: center;
-  gap: 0.25rem;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
 }
 
-.datepicker-time-separator {
-  font-size: 1.1rem;
+.datepicker-clock-display {
+  display: flex;
+  align-items: baseline;
+  font-size: 2rem;
   font-weight: 600;
-  color: var(--primary-text);
+  line-height: 1;
+}
+
+.datepicker-clock-display-segment {
+  cursor: pointer;
+  color: var(--secondary-text);
+  border-radius: 0.2rem;
   padding: 0 0.125rem;
+  transition: color 0.2s, background-color 0.2s;
+}
+.datepicker-clock-display-segment:hover {
+  background-color: var(--accent-color-lighten);
+}
+.datepicker-clock-display-segment.active {
+  color: var(--accent-color);
 }
 
-.datepicker-time-spinner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.125rem;
+.datepicker-clock-display-separator {
+  color: var(--secondary-text);
 }
 
-.datepicker-time-btn {
-  background: none;
-  border: 1px solid var(--divider);
-  border-radius: 0.4rem;
+.datepicker-clock-face {
+  position: relative;
+  width: 240px;
+  height: 240px;
+  margin: 0 auto;
+  border-radius: 50%;
+  background-color: var(--accent-color-lighten);
   cursor: pointer;
-  padding: 0.125rem 0.5rem;
-  font-size: 0.6rem;
-  line-height: 1;
-  color: var(--primary-text);
-  transition: background-color 0.2s;
+  touch-action: none;
+  user-select: none;
 }
-.datepicker-time-btn:hover {
-  background-color: var(--accent-color-lighten);
-  color: var(--accent-color-text);
+
+.datepicker-clock-center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--accent-color);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
 }
 
-.datepicker-time-display {
-  width: 2.5rem;
-  text-align: center;
-  font-size: 1rem;
-  font-weight: 600;
-  font-family: inherit;
-  border: 1px solid var(--divider);
-  border-radius: 0.4rem;
-  padding: 0.25rem 0;
-  background: var(--background);
+.datepicker-clock-hand {
+  position: absolute;
+  left: 50%;
+  bottom: 50%;
+  width: 2px;
+  height: 38%;
+  margin-left: -1px;
+  background-color: var(--accent-color);
+  transform-origin: bottom center;
+  pointer-events: none;
+}
+
+.datepicker-clock-number {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 0.875rem;
   color: var(--primary-text);
-  -moz-appearance: textfield;
+  pointer-events: none;
 }
-.datepicker-time-display::-webkit-inner-spin-button, .datepicker-time-display::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+.datepicker-clock-number.inner {
+  width: 26px;
+  height: 26px;
+  font-size: 0.75rem;
+  color: var(--secondary-text);
 }
-.datepicker-time-display:focus {
-  outline: 2px solid var(--accent-color);
-  outline-offset: -1px;
+.datepicker-clock-number.selected {
+  background-color: var(--accent-color);
+  color: var(--accent-color-text);
 }
 
 .datepicker-set-btn {
@@ -4289,10 +4015,10 @@ ul.tree li {
   font-size: 0.875rem;
   font-weight: 600;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: background-color 0.2s;
 }
-.datepicker-set-btn:hover {
-  opacity: 0.9;
+.datepicker-set-btn:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--accent-color) 85%, black);
 }
 
 @media (max-width: 640px) {
@@ -4496,7 +4222,8 @@ body {
   transition: color 0.2s;
 }
 
-.close-menu:hover {
+.close-menu:hover:not(:disabled) {
+  background: none;
   color: #fff;
 }
 
@@ -4792,7 +4519,7 @@ body {
 }
 .tabs-container.tabs-pills .tab-item {
   border-bottom: none;
-  border-radius: 2rem;
+  border-radius: 1.6rem;
   padding: 0.4rem 1rem;
   background: transparent;
 }
@@ -4806,7 +4533,7 @@ body {
   border-bottom-color: transparent;
 }
 .tabs-container.tabs-pills .tab-item:focus-visible {
-  border-radius: 2rem;
+  border-radius: 1.6rem;
 }
 
 @media (max-width: 768px) {
@@ -5210,9 +4937,9 @@ body {
   transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
   -webkit-tap-highlight-color: transparent;
 }
-.carousel-button .icon {
-  font-size: 1.5rem;
-  line-height: 1;
+.carousel-button .icon-svg {
+  width: 1.5rem;
+  height: 1.5rem;
 }
 .carousel-button:hover {
   background: rgba(0, 0, 0, 0.55);
@@ -5293,7 +5020,7 @@ body {
   transition: background 0.2s;
 }
 
-.copy-button:hover {
+.copy-button:hover:not(:disabled) {
   background: #5a5a5a;
 }
 
@@ -5355,16 +5082,6 @@ body {
   color: #d4d4d4;
 }
 
-@keyframes fileSlideIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 .file-uploader .header h2 {
   font-size: 1.25rem;
   font-weight: 600;
@@ -5385,7 +5102,7 @@ body {
 }
 .file-uploader .drop-zone:hover, .file-uploader .drop-zone.drag-over {
   border-color: var(--accent-color);
-  background-color: color-mix(in srgb, var(--accent-color) 6%, var(--background));
+  background-color: color-mix(in srgb, var(--accent-color) 8%, var(--background));
 }
 .file-uploader .drop-zone-content {
   display: flex;
@@ -5429,7 +5146,7 @@ body {
   background-color: var(--secondary-background);
   border: 1px solid var(--divider);
   border-radius: 0.4rem;
-  animation: fileSlideIn 0.2s ease-out;
+  animation: bx-fade-slide-up 0.2s ease-out;
   gap: 0.75rem;
 }
 .file-uploader .file-item-header {
@@ -5479,7 +5196,7 @@ body {
 }
 .file-uploader .remove-btn:hover {
   color: var(--error);
-  background-color: color-mix(in srgb, var(--error) 10%, var(--background));
+  background-color: color-mix(in srgb, var(--error) 12%, var(--background));
 }
 .file-uploader .progress-container {
   width: 100%;
@@ -5537,6 +5254,11 @@ body {
   position: relative;
   cursor: pointer;
 }
+.masonry-item:has(img:not(.loaded)) {
+  background: linear-gradient(90deg, var(--divider) 25%, var(--secondary-background) 50%, var(--divider) 75%);
+  background-size: 200% 100%;
+  animation: placeholder-shimmer 1.5s ease-in-out infinite;
+}
 .masonry-item:hover {
   transform: translateY(-4px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
@@ -5553,6 +5275,18 @@ body {
   outline-offset: 2px;
 }
 
+.masonry-item--skeleton {
+  cursor: default;
+  pointer-events: none;
+}
+.masonry-item--skeleton .masonry-item-skeleton-img {
+  display: block;
+  width: 100%;
+  background: linear-gradient(90deg, var(--divider) 25%, var(--secondary-background) 50%, var(--divider) 75%);
+  background-size: 200% 100%;
+  animation: placeholder-shimmer 1.5s ease-in-out infinite;
+}
+
 .masonry-item img {
   width: 100%;
   height: auto;
@@ -5700,7 +5434,7 @@ body {
   background: var(--background);
   border: 1px solid var(--divider);
   border-radius: 0.4rem;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.11), 0 2px 8px rgba(0, 0, 0, 0.06);
   min-width: 220px;
   padding: 0.5rem 0;
   list-style: none;
@@ -5733,10 +5467,10 @@ body {
   top: 0;
   left: 100%;
   margin-left: 4px;
-  background-color: var(--background);
+  background: var(--background);
   border: 1px solid var(--divider);
   border-radius: 0.4rem;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.11), 0 2px 8px rgba(0, 0, 0, 0.06);
   min-width: 220px;
   padding: 0.5rem 0;
   list-style: none;
@@ -5884,7 +5618,7 @@ body {
   margin-top: 6px;
   position-try-fallbacks: --vd-above;
   background: var(--background);
-  border: 1.5px solid var(--divider);
+  border: 1px solid var(--divider);
   border-radius: 0.6rem;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.11), 0 2px 8px rgba(0, 0, 0, 0.06);
   transform-origin: top center;
@@ -5911,7 +5645,7 @@ body {
   padding: 0 0.65rem;
   min-height: 2.6rem;
   border: 1.5px solid var(--divider);
-  border-radius: 0.44rem;
+  border-radius: 0.4rem;
   background: var(--background);
   color: var(--primary-text);
   box-sizing: border-box;
@@ -5953,7 +5687,7 @@ body {
   overflow: hidden;
   background: var(--background);
   color: var(--primary-text);
-  border-radius: 0.44rem;
+  border-radius: 0.4rem;
   font-size: 0.9375rem;
   transition: background-color 0.1s ease;
 }
@@ -5961,7 +5695,7 @@ body {
   background-color: var(--hover);
 }
 .custom-dropdown .dropdown-item.selected {
-  background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  background-color: color-mix(in srgb, var(--accent-color) 12%, transparent);
   color: var(--accent-color);
   font-weight: 500;
 }
@@ -6119,7 +5853,7 @@ body {
   min-height: 0.75rem;
   padding: 2px 6px;
   border-radius: 0.8rem;
-  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
   transition: color 0.2s ease, background 0.2s ease, transform 0.25s cubic-bezier(0.2, 0, 0, 1);
 }
 .timespan-duration:empty {
@@ -6128,7 +5862,7 @@ body {
 }
 .timespan-picker.is-error .timespan-duration {
   color: var(--error);
-  background: color-mix(in srgb, var(--error) 10%, transparent);
+  background: color-mix(in srgb, var(--error) 12%, transparent);
 }
 
 .timespan-bar {
@@ -6428,7 +6162,7 @@ body {
   height: 2rem;
   padding: 0;
   border: none;
-  border-radius: 0.24rem;
+  border-radius: 0.3rem;
   background: transparent;
   color: var(--secondary-text);
   cursor: pointer;
@@ -6472,7 +6206,7 @@ body {
   flex-shrink: 0;
 }
 .toolbar-group button {
-  border-radius: 0.18rem;
+  border-radius: 0.2rem;
 }
 
 .editor-block-select {
@@ -6483,7 +6217,7 @@ body {
   padding: 0 0.375rem;
   border: none;
   box-shadow: none;
-  border-radius: 0.24rem;
+  border-radius: 0.3rem;
   background: transparent;
   color: var(--secondary-text);
   font-size: 0.75rem;
@@ -6607,7 +6341,7 @@ body {
 .editable img {
   max-width: 100%;
   height: auto;
-  border-radius: 0.35rem;
+  border-radius: 0.3rem;
   margin: 0.75rem 0;
   display: block;
 }
@@ -6717,7 +6451,7 @@ body {
   padding: 0.3rem 0.5rem;
   font-size: 0.72rem;
   font-weight: 600;
-  border-radius: 0.24rem;
+  border-radius: 0.3rem;
   background: var(--divider);
   color: var(--secondary-text);
   border: none;
@@ -6884,7 +6618,7 @@ body {
   height: 2rem;
   padding: 0 0.625rem;
   border: 1px solid var(--divider);
-  border-radius: 0.24rem;
+  border-radius: 0.3rem;
   background: var(--background);
   color: var(--primary-text);
   font-size: 0.8125rem;
@@ -6928,7 +6662,7 @@ body {
   height: 1.875rem;
   padding: 0 0.75rem;
   border: none;
-  border-radius: 0.24rem;
+  border-radius: 0.3rem;
   font-size: 0.78rem;
   font-weight: 600;
   cursor: pointer;
@@ -7142,7 +6876,7 @@ body {
   background: var(--background);
   border: 1px solid var(--divider);
   border-radius: 1rem;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.11), 0 2px 8px rgba(0, 0, 0, 0.06);
   list-style: none;
   margin: 0;
   opacity: 0;
@@ -7274,10 +7008,10 @@ body {
 }
 
 .cal {
-  --cal-spacing-xs: 4px;
-  --cal-spacing-sm: 8px;
-  --cal-spacing-md: 12px;
-  --cal-spacing-lg: 16px;
+  --cal-spacing-xs: 0.25rem;
+  --cal-spacing-sm: 0.5rem;
+  --cal-spacing-md: 0.75rem;
+  --cal-spacing-lg: 1rem;
   --cal-bg: var(--background);
   --cal-bg-alt: var(--secondary-background);
   --cal-bg-hover: var(--hover);
@@ -7587,19 +7321,19 @@ body {
 }
 .cal__span-bar.badge-success {
   border-left-color: var(--success);
-  background: color-mix(in srgb, var(--success) 14%, var(--cal-bg));
+  background: color-mix(in srgb, var(--success) 12%, var(--cal-bg));
 }
 .cal__span-bar.badge-warning {
   border-left-color: var(--warning);
-  background: color-mix(in srgb, var(--warning) 14%, var(--cal-bg));
+  background: color-mix(in srgb, var(--warning) 12%, var(--cal-bg));
 }
 .cal__span-bar.badge-error {
   border-left-color: var(--error);
-  background: color-mix(in srgb, var(--error) 14%, var(--cal-bg));
+  background: color-mix(in srgb, var(--error) 12%, var(--cal-bg));
 }
 .cal__span-bar.badge-info {
   border-left-color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 14%, var(--cal-bg));
+  background: color-mix(in srgb, var(--accent-color) 12%, var(--cal-bg));
 }
 
 .cal__week-row > .cal__span-bar {
@@ -7805,7 +7539,7 @@ body {
   padding: 3px 6px;
   overflow: hidden;
   cursor: pointer;
-  background: color-mix(in srgb, var(--cal-accent) 10%, var(--cal-bg));
+  background: color-mix(in srgb, var(--cal-accent) 12%, var(--cal-bg));
   color: var(--cal-text);
   border-left: 3px solid var(--cal-accent);
   z-index: 1;
@@ -7826,19 +7560,19 @@ body {
 }
 .cal__week-event.badge-success {
   border-left-color: var(--success);
-  background: color-mix(in srgb, var(--success) 10%, var(--cal-bg));
+  background: color-mix(in srgb, var(--success) 12%, var(--cal-bg));
 }
 .cal__week-event.badge-warning {
   border-left-color: var(--warning);
-  background: color-mix(in srgb, var(--warning) 10%, var(--cal-bg));
+  background: color-mix(in srgb, var(--warning) 12%, var(--cal-bg));
 }
 .cal__week-event.badge-error {
   border-left-color: var(--error);
-  background: color-mix(in srgb, var(--error) 10%, var(--cal-bg));
+  background: color-mix(in srgb, var(--error) 12%, var(--cal-bg));
 }
 .cal__week-event.badge-info {
   border-left-color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 10%, var(--cal-bg));
+  background: color-mix(in srgb, var(--accent-color) 12%, var(--cal-bg));
 }
 
 .cal__now-line {
@@ -7879,7 +7613,7 @@ body {
   border-bottom: none;
 }
 .cal__agenda-day.is-today {
-  background: color-mix(in srgb, var(--cal-accent) 4%, var(--cal-bg));
+  background: color-mix(in srgb, var(--cal-accent) 8%, var(--cal-bg));
 }
 
 .cal__agenda-date {
@@ -8113,7 +7847,7 @@ body {
 }
 @media (prefers-reduced-motion: no-preference) {
   .cal__body {
-    animation: cal-slide-in 0.25s cubic-bezier(0.2, 0, 0, 1);
+    animation: bx-fade-slide-up 0.25s cubic-bezier(0.2, 0, 0, 1);
   }
   .cal__day,
   .cal__agenda-day {
@@ -8171,16 +7905,6 @@ body {
     animation-delay: 0.3s;
   }
 }
-@keyframes cal-slide-in {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
 @keyframes cal-cell-in {
   from {
     opacity: 0;
@@ -8229,8 +7953,9 @@ body {
   align-items: center;
   justify-content: center;
 }
-.group-picker__selection .chip.closeable button .icon {
-  font-size: 0.7rem;
+.group-picker__selection .chip.closeable button .icon-svg {
+  width: 0.7rem;
+  height: 0.7rem;
   top: 0;
 }
 .group-picker__selection:empty::before {
@@ -8262,7 +7987,8 @@ body {
   left: 0.55rem;
   top: 50%;
   transform: translateY(-50%);
-  font-size: 1rem;
+  width: 1rem;
+  height: 1rem;
   color: var(--secondary-text);
   pointer-events: none;
   opacity: 0.45;
@@ -8289,8 +8015,9 @@ body {
   text-align: center;
   gap: 0.5rem;
 }
-.group-picker__empty .icon {
-  font-size: 2rem;
+.group-picker__empty .icon-svg {
+  width: 2rem;
+  height: 2rem;
   opacity: 0.2;
 }
 .group-picker__group {
@@ -8300,7 +8027,7 @@ body {
   border-bottom: none;
 }
 .group-picker__group.is-expanded > .group-picker__group-header {
-  background: color-mix(in srgb, var(--accent-color) 4%, transparent);
+  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
 }
 .group-picker__group.is-expanded > .group-picker__group-header .group-picker__group-label {
   color: var(--accent-color);
@@ -8323,11 +8050,14 @@ body {
 }
 .group-picker__chevron {
   flex-shrink: 0;
-  font-size: 1rem;
   color: var(--secondary-text);
   opacity: 0.5;
   transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease, opacity 0.15s ease;
 }
+.group-picker__chevron .icon-svg {
+  width: 1rem;
+  height: 1rem;
+}
 .group-picker__group.is-expanded .group-picker__chevron {
   transform: rotate(90deg);
   color: var(--accent-color);
@@ -8341,7 +8071,7 @@ body {
   transition: color 0.15s ease;
 }
 .group-picker__group-label mark {
-  background: color-mix(in srgb, var(--warning) 22%, transparent);
+  background: color-mix(in srgb, var(--warning) 20%, transparent);
   color: inherit;
   border-radius: 2px;
   padding: 0 2px;
@@ -8353,7 +8083,7 @@ body {
   letter-spacing: 0.025em;
   text-transform: uppercase;
   padding: 0.15rem 0.6rem;
-  border-radius: 1.2rem;
+  border-radius: 1.6rem;
   border: 1px solid var(--divider);
   background: transparent;
   color: var(--secondary-text);
@@ -8363,14 +8093,14 @@ body {
 .group-picker__group-action:hover:not(.button-primary):not(:disabled) {
   border-color: var(--accent-color);
   color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 6%, transparent);
+  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
   transform: none;
 }
 .group-picker__group-action:active:not(:disabled) {
   transform: scale(0.94);
 }
 .group-picker__group-action.button-primary {
-  border-radius: 1.2rem;
+  border-radius: 1.6rem;
   font-size: 0.6875rem;
   font-weight: 500;
   letter-spacing: 0.025em;
@@ -8383,7 +8113,7 @@ body {
   cursor: pointer;
 }
 .group-picker__group.is-leaf.is-selected > .group-picker__group-header {
-  background: color-mix(in srgb, var(--accent-color) 6%, transparent);
+  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
 }
 .group-picker__group.is-leaf.is-selected > .group-picker__group-header .group-picker__group-label {
   color: var(--accent-color);
@@ -8394,12 +8124,15 @@ body {
 }
 .group-picker__leaf-check {
   flex-shrink: 0;
-  font-size: 1.1rem;
   color: var(--accent-color);
   opacity: 0;
   transform: scale(0.3);
   transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
+.group-picker__leaf-check .icon-svg {
+  width: 1.1rem;
+  height: 1.1rem;
+}
 .group-picker__subgroups {
   height: 0;
   overflow: hidden;
@@ -8433,7 +8166,7 @@ body {
   pointer-events: none;
 }
 .group-picker__subgroup mark {
-  background: color-mix(in srgb, var(--warning) 22%, transparent);
+  background: color-mix(in srgb, var(--warning) 20%, transparent);
   color: inherit;
   border-radius: 2px;
   padding: 0 2px;
@@ -8526,7 +8259,7 @@ body {
   animation: chart-draw 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 .chart .chart-area {
-  animation: chart-fade-in 0.8s ease forwards;
+  animation: bx-fade-in 0.8s ease forwards;
 }
 .chart .chart-point-dot {
   transition: r 0.15s ease;
@@ -8654,14 +8387,6 @@ body {
     stroke-dashoffset: 0;
   }
 }
-@keyframes chart-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
 @keyframes chart-grow-y {
   from {
     transform: scaleY(0);
@@ -8693,12 +8418,12 @@ body {
   background: var(--background);
   border: 1px solid var(--divider);
   border-radius: 0.8rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.11), 0 2px 8px rgba(0, 0, 0, 0.06);
   padding: 1rem;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .color-picker__field {
@@ -8883,7 +8608,7 @@ body {
 .color-picker__g:focus,
 .color-picker__b:focus {
   border-color: var(--accent-color);
-  box-shadow: 0 0 0 2px var(--accent-color-tint);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 12%, transparent);
 }
 
 @media (max-width: 480px) {
@@ -9272,7 +8997,7 @@ body {
 }
 .docs-content .docs-props-table td code {
   font-size: 0.78em;
-  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
   border-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
   color: var(--accent-color);
 }
@@ -9295,8 +9020,8 @@ body {
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
-  border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
+  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
   border-radius: 2rem;
   padding: 0.25rem 0.75rem;
   margin-bottom: 1.5rem;