@dodlhuat/basix 1.2.4 → 1.2.6

package/css/style.css

@@ -845,27 +845,69 @@ tbody tr:hover {
   background: color-mix(in srgb, var(--error) 12%, transparent);
 }
 
+@keyframes field-error-shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  18% {
+    transform: translateX(-5px);
+  }
+  36% {
+    transform: translateX(4px);
+  }
+  54% {
+    transform: translateX(-3px);
+  }
+  72% {
+    transform: translateX(2px);
+  }
+}
+@keyframes dropdown-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.975);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes hint-appear {
+  from {
+    opacity: 0;
+    transform: translateY(-3px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 textarea, select, .select .dropdown, input {
   width: 100%;
-  border: 1px solid var(--divider);
-  border-radius: 0.2rem;
-  padding: 0.5rem;
+  border: 1.5px solid var(--divider);
+  border-radius: 0.6rem;
+  padding: 0 0.65rem;
   box-sizing: border-box;
   background-color: var(--background);
-  min-height: 2rem;
+  min-height: 2.6rem;
   font-size: 1rem;
   color: var(--primary-text);
-  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  box-shadow: inset 0 1.5px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
+  transition: border-color 0.16s ease, box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.16s ease;
   outline: none;
 }
 textarea::placeholder, select::placeholder, .select .dropdown::placeholder, input::placeholder {
   color: var(--secondary-text);
-  opacity: 1;
+  opacity: 0.65;
+  font-weight: 400;
+}
+textarea:hover:not(:focus):not(:disabled):not([readonly]), select:hover:not(:focus):not(:disabled):not([readonly]), .select .dropdown:hover:not(:focus):not(:disabled):not([readonly]), input:hover:not(:focus):not(:disabled):not([readonly]) {
+  border-color: color-mix(in srgb, var(--accent-color) 45%, var(--divider));
+  box-shadow: inset 0 1.5px 4px rgba(0, 0, 0, 0.045), 0 2px 8px rgba(0, 0, 0, 0.07);
 }
 textarea:focus, select:focus, .select .dropdown:focus, input:focus {
   border-color: var(--accent-color);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
+  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);
 }
 textarea:disabled, select:disabled, .select .dropdown:disabled, input:disabled {
   background-color: var(--secondary-background);
@@ -873,10 +915,16 @@ textarea:disabled, select:disabled, .select .dropdown:disabled, input:disabled {
   color: var(--secondary-text);
   cursor: not-allowed;
   box-shadow: none;
+  opacity: 0.58;
+}
+
+textarea {
+  padding-top: 0.55rem;
+  padding-bottom: 0.55rem;
 }
 
 select {
-  padding: 0.5rem;
+  padding: 0 0.65rem;
   cursor: pointer;
 }
 
@@ -885,61 +933,87 @@ select {
   background-color: var(--background);
 }
 .select-group .dropdown-selected {
-  border: 1px solid var(--divider);
-  padding: 0 0.5rem;
-  border-radius: 0.2rem;
+  border: 1.5px solid var(--divider);
+  padding: 0 0.65rem;
+  border-radius: 0.6rem;
   cursor: pointer;
   background: var(--background);
-  height: 2rem;
-  line-height: 2rem;
-  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  height: 2.6rem;
+  line-height: 2.6rem;
+  box-shadow: inset 0 1.5px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
+  transition: border-color 0.16s ease, box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+  user-select: none;
+}
+.select-group .dropdown-selected:hover {
+  border-color: color-mix(in srgb, var(--accent-color) 45%, var(--divider));
+  box-shadow: inset 0 1.5px 4px rgba(0, 0, 0, 0.045), 0 2px 8px rgba(0, 0, 0, 0.07);
 }
 .select-group .dropdown-selected:focus, .select-group .dropdown-selected:focus-visible {
   outline: none;
   border-color: var(--accent-color);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
+  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);
-  transition: transform 0.2s ease;
+  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
+  line-height: inherit;
+}
+.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);
 }
 .select-group .dropdown-options {
   position: absolute;
-  top: calc(100% + 5px);
+  top: calc(100% + 6px);
   left: 0;
   right: 0;
-  border: 1px solid var(--divider);
-  border-radius: 0.2rem;
+  border: 1.5px solid var(--divider);
+  border-radius: 0.6rem;
   display: none;
   flex-direction: column;
   z-index: 10;
-  max-height: 250px;
+  max-height: 260px;
   overflow-y: auto;
   background-color: var(--background);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  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;
+  transform-origin: top center;
 }
 .select-group .dropdown-option {
-  padding: 10px 0.5rem;
+  padding: 0.6rem 0.65rem;
   cursor: pointer;
+  border-radius: 0.44rem;
   transition: background 0.1s ease;
+  font-size: 0.9375rem;
+  position: relative;
 }
 .select-group .dropdown-option:hover {
-  background: var(--secondary-background);
+  background: var(--hover);
 }
 .select-group .dropdown-option.selected {
   background: color-mix(in srgb, var(--accent-color) 10%, transparent);
   color: var(--accent-color);
   font-weight: 500;
 }
+.select-group .dropdown-option.selected::after {
+  content: "✓";
+  position: absolute;
+  right: 0.65rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 0.8125rem;
+  line-height: 1;
+}
 .select-group .dropdown.open .dropdown-options {
   display: flex;
+  animation: dropdown-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 .select-group .hidden {
   display: none;
@@ -950,25 +1024,29 @@ select {
     top: 0;
     left: 0;
     width: 100%;
-    background: var(--secondary-background);
+    background: var(--background);
     color: var(--primary-text);
     text-align: center;
-    padding: 15px;
-    padding-top: calc(15px + env(safe-area-inset-top));
+    padding: 18px 15px;
+    padding-top: calc(18px + env(safe-area-inset-top));
     font-weight: 600;
     font-size: 1rem;
     border-bottom: 1px solid var(--divider);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
     z-index: 11;
+    letter-spacing: 0.01em;
   }
   .select-group .dropdown-options-menu .dropdown-options-icon {
     position: absolute;
-    right: 45px;
+    right: 20px;
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
     color: var(--accent-color);
+    font-size: 0.9375rem;
+    font-weight: 500;
+    letter-spacing: 0;
   }
   .select-group .dropdown-options {
     position: fixed;
@@ -978,16 +1056,24 @@ select {
     bottom: 0;
     border: none;
     border-radius: 0;
-    padding-top: calc(56px + env(safe-area-inset-top));
+    padding: 0;
+    padding-top: calc(62px + env(safe-area-inset-top));
     padding-bottom: env(safe-area-inset-bottom);
-    font-size: 1.1rem;
+    font-size: 1.0625rem;
     max-height: none;
     box-shadow: none;
     background-color: var(--background);
+    gap: 0;
   }
   .select-group .dropdown-option {
-    padding: 14px 0.5rem;
+    padding: 15px 20px;
     border-bottom: 1px solid var(--divider);
+    border-radius: 0;
+    font-size: 1.0625rem;
+  }
+  .select-group .dropdown-option.selected::after {
+    right: 20px;
+    font-size: 0.9375rem;
   }
 }
 
@@ -998,28 +1084,51 @@ select {
 }
 .form-group label {
   font-size: 0.8125rem;
-  font-weight: 500;
+  font-weight: 600;
   color: var(--primary-text);
-  letter-spacing: 0.01em;
+  letter-spacing: 0.025em;
 }
 .form-group .form-hint {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.3rem;
   font-size: 0.75rem;
-  line-height: 1.45;
+  line-height: 1.5;
   color: var(--secondary-text);
-  margin-top: 0.125rem;
+  margin-top: 0.1rem;
+}
+.form-group .form-hint::before {
+  content: "";
+  display: none;
+  flex-shrink: 0;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  margin-top: 0.1em;
+  font-size: 8.5px;
+  font-weight: 700;
+  line-height: 13px;
+  text-align: center;
+  color: #fff;
 }
 .form-group.error input, .form-group.error textarea, .form-group.error select {
   border-color: var(--error);
-  background-color: color-mix(in srgb, var(--error) 4%, var(--background));
+  background-color: color-mix(in srgb, var(--error) 3%, 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;
 }
 .form-group.error input:focus, .form-group.error textarea:focus, .form-group.error select:focus {
   border-color: var(--error);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 15%, transparent);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03), 0 0 0 3.5px color-mix(in srgb, var(--error) 13%, transparent);
 }
 .form-group.error .form-hint {
   color: var(--error);
+  animation: hint-appear 0.2s ease both;
 }
 .form-group.error .form-hint::before {
+  content: "!";
+  display: block;
+  background: var(--error);
   opacity: 1;
 }
 .form-group.success input, .form-group.success textarea, .form-group.success select {
@@ -1027,12 +1136,16 @@ select {
 }
 .form-group.success input:focus, .form-group.success textarea:focus, .form-group.success select:focus {
   border-color: var(--success);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 15%, transparent);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03), 0 0 0 3.5px color-mix(in srgb, var(--success) 13%, transparent);
 }
 .form-group.success .form-hint {
   color: var(--success);
+  animation: hint-appear 0.2s ease both;
 }
 .form-group.success .form-hint::before {
+  content: "✓";
+  display: block;
+  background: var(--success);
   opacity: 1;
 }
 
@@ -1046,17 +1159,19 @@ select {
 .input-group .input-addon {
   display: flex;
   align-items: center;
-  padding: 0 0.5rem;
+  padding: 0 0.65rem;
   background-color: var(--secondary-background);
-  border: 1px solid var(--divider);
+  border: 1.5px solid var(--divider);
   color: var(--secondary-text);
   font-size: 1rem;
   white-space: nowrap;
-  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
+  box-shadow: inset 0 1.5px 4px rgba(0, 0, 0, 0.04);
+  font-weight: 500;
+  letter-spacing: 0.01em;
 }
 .input-group .input-addon:first-child {
   border-right: none;
-  border-radius: 0.2rem 0 0 0.2rem;
+  border-radius: 0.6rem 0 0 0.6rem;
 }
 .input-group .input-addon:first-child + input {
   border-top-left-radius: 0;
@@ -1064,7 +1179,7 @@ select {
 }
 .input-group .input-addon:last-child {
   border-left: none;
-  border-radius: 0 0.2rem 0.2rem 0;
+  border-radius: 0 0.6rem 0.6rem 0;
 }
 .input-group input:not(:last-child) {
   border-right: none;
@@ -1077,18 +1192,21 @@ input[readonly], textarea[readonly] {
   color: var(--secondary-text);
   cursor: default;
   box-shadow: none;
+  border-style: dashed;
 }
 
 input.input-sm, textarea.input-sm {
-  min-height: 1.6rem;
+  min-height: 1.7rem;
   font-size: 0.875rem;
-  padding: 0.25rem 0.5rem;
+  padding: 0 0.5rem;
+  border-radius: 0.44rem;
 }
 
 input.input-lg, textarea.input-lg {
-  min-height: 2.8rem;
+  min-height: 3.3rem;
   font-size: 1.125rem;
-  padding: 0.6rem 0.5rem;
+  padding: 0 0.75rem;
+  border-radius: 0.7rem;
 }
 
 @font-face {
@@ -5472,6 +5590,12 @@ body {
   }
 }
 
+@position-try --vd-above {
+  top: auto;
+  bottom: anchor(top);
+  margin-top: 0;
+  margin-bottom: 6px;
+}
 .custom-dropdown {
   position: relative;
   width: 100%;
@@ -5480,26 +5604,29 @@ body {
 }
 .custom-dropdown .dropdown-trigger {
   background: var(--background);
-  border: 1px solid var(--divider);
-  border-radius: 0.4rem;
-  padding: 0 0.75rem;
-  min-height: 2rem;
+  border: 1.5px solid var(--divider);
+  border-radius: 0.6rem;
+  padding: 0 0.65rem;
+  min-height: 2.6rem;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  transition: border-color 0.2s, box-shadow 0.2s, border-radius 0.15s, border-bottom-color 0.15s;
+  box-shadow: inset 0 1.5px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
+  transition: border-color 0.16s ease, box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.16s ease;
+}
+.custom-dropdown .dropdown-trigger:hover {
+  border-color: color-mix(in srgb, var(--accent-color) 45%, var(--divider));
+  box-shadow: inset 0 1.5px 4px rgba(0, 0, 0, 0.045), 0 2px 8px rgba(0, 0, 0, 0.07);
 }
 .custom-dropdown .dropdown-trigger:focus {
   border-color: var(--accent-color);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
+  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);
   outline: none;
 }
 .custom-dropdown.open .dropdown-trigger {
   border-color: var(--accent-color);
-  border-radius: 0.4rem 0.4rem 0 0;
-  border-bottom-color: var(--background);
-  box-shadow: none;
+  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);
   outline: none;
 }
 .custom-dropdown .trigger-text {
@@ -5510,6 +5637,7 @@ body {
 }
 .custom-dropdown .trigger-text:not(.has-value) {
   color: var(--secondary-text);
+  opacity: 0.65;
 }
 .custom-dropdown .trigger-arrow {
   font-size: 0.75em;
@@ -5517,59 +5645,73 @@ body {
   margin-left: 0.5rem;
   flex-shrink: 0;
   display: inline-block;
-  transition: transform 0.2s ease;
+  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 .custom-dropdown.open .trigger-arrow {
   transform: rotate(180deg);
 }
 .custom-dropdown .dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
+  inset: unset;
+  margin: 0;
+  padding: 0;
+  border: none;
+  position: fixed;
+  top: anchor(bottom);
+  left: anchor(left);
+  width: anchor-size(width);
+  margin-top: 6px;
+  position-try-fallbacks: --vd-above;
   background: var(--background);
-  border: 1px solid var(--accent-color);
-  border-top: none;
-  border-radius: 0 0 0.4rem 0.4rem;
-  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
-  z-index: 1000;
-  visibility: hidden;
+  border: 1.5px 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;
   opacity: 0;
-  transform: translateY(-4px);
-  pointer-events: none;
-  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
+  transform: translateY(-6px) scale(0.975);
+  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), display 0.2s allow-discrete, overlay 0.2s allow-discrete;
 }
-.custom-dropdown .dropdown-menu.open {
-  visibility: visible;
+.custom-dropdown .dropdown-menu:popover-open {
   opacity: 1;
-  transform: translateY(0);
-  pointer-events: auto;
-  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0s;
+  transform: translateY(0) scale(1);
+}
+@starting-style {
+  .custom-dropdown .dropdown-menu:popover-open {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.975);
+  }
 }
 .custom-dropdown .dropdown-search {
-  padding: 0.5rem;
-  border-bottom: 1px solid var(--divider);
+  padding: 0.4rem;
+  border-bottom: 1.5px solid var(--divider);
 }
 .custom-dropdown .dropdown-search input {
   width: 100%;
-  padding: 0 0.5rem;
-  height: 2rem;
-  border: 1px solid var(--divider);
-  border-radius: 0.2rem;
+  padding: 0 0.65rem;
+  min-height: 2.6rem;
+  border: 1.5px solid var(--divider);
+  border-radius: 0.44rem;
   background: var(--background);
   color: var(--primary-text);
   box-sizing: border-box;
   outline: none;
-  transition: border-color 0.2s;
+  font-size: 1rem;
+  box-shadow: inset 0 1.5px 4px rgba(0, 0, 0, 0.05);
+  transition: border-color 0.16s ease, box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.custom-dropdown .dropdown-search input::placeholder {
+  color: var(--secondary-text);
+  opacity: 0.65;
 }
 .custom-dropdown .dropdown-search input:focus {
   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);
 }
 .custom-dropdown .dropdown-list-wrapper {
   max-height: 250px;
   overflow-y: auto;
   position: relative;
   -webkit-overflow-scrolling: touch;
+  padding: 0.25rem;
 }
 .custom-dropdown .dropdown-list-scroller {
   position: relative;
@@ -5581,7 +5723,7 @@ body {
   width: 100%;
 }
 .custom-dropdown .dropdown-item {
-  padding: 0 0.75rem;
+  padding: 0 0.65rem;
   cursor: pointer;
   box-sizing: border-box;
   display: flex;
@@ -5589,11 +5731,12 @@ body {
   overflow: hidden;
   background: var(--background);
   color: var(--primary-text);
-  transition: background-color 0.15s, color 0.15s;
+  border-radius: 0.44rem;
+  font-size: 0.9375rem;
+  transition: background-color 0.1s ease;
 }
 .custom-dropdown .dropdown-item:hover {
   background-color: var(--hover);
-  color: var(--accent-color);
 }
 .custom-dropdown .dropdown-item.selected {
   background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
@@ -5609,6 +5752,8 @@ body {
   height: 0.8rem;
   min-height: unset;
   max-height: 0.8rem;
+  padding: 0;
+  box-shadow: none;
   border: 1.5px solid var(--divider);
   border-radius: 0.2rem;
   background: var(--background);
@@ -6996,11 +7141,14 @@ body {
 }
 
 .cal__month-grid {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
   border: 1px solid var(--cal-border);
   border-radius: var(--cal-radius);
   overflow: hidden;
+}
+
+.cal__month-head {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: 1px;
   background: var(--cal-border);
 }
@@ -7016,25 +7164,27 @@ body {
   text-transform: uppercase;
 }
 
+.cal__week-row {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 1px;
+  background: var(--cal-border);
+  position: relative;
+  border-top: 1px solid var(--cal-border);
+}
+.cal__week-row .cal__day-events {
+  margin-top: calc(var(--span-lanes, 0) * var(--cal-span-lane-height, 20px));
+}
+
 .cal__day {
   background: var(--cal-bg);
   padding: var(--cal-spacing-xs) var(--cal-spacing-sm);
   min-height: 88px;
-  cursor: pointer;
-  transition: background 0.15s ease;
+  cursor: default;
   position: relative;
 }
-.cal__day:hover {
-  background: var(--cal-bg-hover);
-}
-.cal__day:focus-visible {
-  outline: 2px solid var(--cal-accent);
-  outline-offset: -2px;
-  z-index: 1;
-}
 .cal__day--empty {
   background: var(--cal-bg-alt);
-  cursor: default;
   pointer-events: none;
 }
 .cal__day--outside .cal__day-num {
@@ -7050,16 +7200,6 @@ body {
   font-weight: 700;
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-accent) 20%, transparent);
 }
-.cal__day.is-selected {
-  background: color-mix(in srgb, var(--cal-accent) 6%, var(--cal-bg));
-}
-.cal__day.is-selected .cal__day-num {
-  background: var(--cal-accent);
-  color: var(--cal-accent-text);
-  border-radius: 50%;
-  font-weight: 700;
-  box-shadow: 0 2px 8px color-mix(in srgb, var(--cal-accent) 35%, transparent);
-}
 .cal__day.has-events::after {
   content: "";
   display: none;
@@ -7144,6 +7284,68 @@ body {
   cursor: pointer;
 }
 
+.cal__span-bar {
+  position: absolute;
+  height: 18px;
+  line-height: 18px;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  padding: 0 6px;
+  border-radius: var(--cal-radius-sm);
+  background: var(--cal-bg-alt);
+  border-left: 2px solid var(--cal-accent-light);
+  color: var(--cal-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  z-index: 2;
+  transition: filter 0.12s ease, transform 0.1s ease;
+  left: calc(var(--span-col) * 100% / 7);
+  width: calc(var(--span-len) * 100% / 7 - 4px);
+}
+.cal__span-bar:hover {
+  filter: brightness(0.94);
+}
+.cal__span-bar:active {
+  transform: scale(0.97);
+}
+.cal__span-bar:focus-visible {
+  outline: 2px solid var(--cal-accent);
+  outline-offset: 1px;
+}
+.cal__span-bar--cont-before {
+  border-left: none;
+  border-radius: 0 var(--cal-radius-sm) var(--cal-radius-sm) 0;
+  padding-left: 4px;
+}
+.cal__span-bar--cont-after {
+  border-radius: var(--cal-radius-sm) 0 0 var(--cal-radius-sm);
+}
+.cal__span-bar--cont-before.cal__span-bar--cont-after {
+  border-radius: 0;
+}
+.cal__span-bar.badge-success {
+  border-left-color: var(--success);
+  background: color-mix(in srgb, var(--success) 14%, var(--cal-bg));
+}
+.cal__span-bar.badge-warning {
+  border-left-color: var(--warning);
+  background: color-mix(in srgb, var(--warning) 14%, var(--cal-bg));
+}
+.cal__span-bar.badge-error {
+  border-left-color: var(--error);
+  background: color-mix(in srgb, var(--error) 14%, 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));
+}
+
+.cal__week-row > .cal__span-bar {
+  top: calc(36px + var(--span-lane) * var(--cal-span-lane-height, 20px));
+}
+
 .cal__event-time {
   font-weight: 600;
   margin-right: 3px;
@@ -7186,7 +7388,7 @@ body {
   font-weight: 600;
   color: var(--cal-text-muted);
   border-left: 1px solid var(--cal-border);
-  cursor: pointer;
+  cursor: default;
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -7211,16 +7413,11 @@ body {
   color: var(--cal-accent-text);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-accent) 20%, transparent);
 }
-.cal__week-head-day.is-selected span {
-  background: var(--cal-accent);
-  color: var(--cal-accent-text);
-}
 
 .cal__allday {
   display: grid;
-  grid-template-columns: var(--cal-time-col-width) repeat(7, minmax(0, 1fr));
+  grid-template-columns: var(--cal-time-col-width) 1fr;
   border-bottom: 1px solid var(--cal-border);
-  min-height: 32px;
   background: var(--cal-bg);
   overflow-y: auto;
   scrollbar-gutter: stable;
@@ -7244,12 +7441,22 @@ body {
   font-weight: 500;
 }
 
+.cal__allday-spans {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  min-height: calc(max(var(--allday-lanes, 1), 1) * var(--cal-span-lane-height, 20px) + 6px);
+}
+.cal__allday-spans > .cal__span-bar {
+  top: calc(var(--span-lane) * var(--cal-span-lane-height, 20px) + 3px);
+}
+
 .cal__allday-col {
   border-left: 1px solid var(--cal-border);
-  padding: 3px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+  min-height: 100%;
+}
+.cal__allday-col:first-child {
+  border-left: none;
 }
 
 .cal__week-body {
@@ -7376,7 +7583,7 @@ body {
 
 .cal__now-line {
   position: absolute;
-  left: 0;
+  left: var(--cal-time-col-width);
   right: 0;
   height: 2px;
   background: var(--error);
@@ -7542,8 +7749,15 @@ body {
   .cal__month-grid {
     border: none;
     border-radius: 0;
+  }
+  .cal__month-head {
+    gap: 0;
+    background: transparent;
+  }
+  .cal__week-row {
     gap: 0;
     background: transparent;
+    border-top: none;
   }
   .cal__weekday {
     background: transparent;
@@ -7559,21 +7773,12 @@ body {
     justify-content: flex-start;
     background: transparent;
   }
-  .cal__day:hover {
-    background: transparent;
-  }
-  .cal__day:hover .cal__day-num {
-    background: var(--cal-bg-hover);
-  }
   .cal__day--empty {
     background: transparent;
   }
   .cal__day--outside .cal__day-num {
     opacity: 0.25;
   }
-  .cal__day.is-selected {
-    background: transparent;
-  }
   .cal__day.has-events::after {
     display: block;
     position: static;
@@ -7588,9 +7793,13 @@ body {
   }
   .cal__day-events,
   .cal__event-pill,
-  .cal__event-more {
+  .cal__event-more,
+  .cal__span-bar {
     display: none;
   }
+  .cal__week-row .cal__day-events {
+    margin-top: 0;
+  }
   .cal {
     --cal-time-col-width: 40px;
   }
@@ -7650,153 +7859,27 @@ body {
   .cal__agenda-day {
     animation: cal-cell-in 0.3s cubic-bezier(0.2, 0, 0, 1) both;
   }
-  .cal__month-grid .cal__day:nth-child(1) {
+  .cal__week-row:nth-child(1) .cal__day {
     animation-delay: 0.01s;
   }
-  .cal__month-grid .cal__day:nth-child(2) {
-    animation-delay: 0.02s;
-  }
-  .cal__month-grid .cal__day:nth-child(3) {
-    animation-delay: 0.03s;
-  }
-  .cal__month-grid .cal__day:nth-child(4) {
+  .cal__week-row:nth-child(2) .cal__day {
     animation-delay: 0.04s;
   }
-  .cal__month-grid .cal__day:nth-child(5) {
-    animation-delay: 0.05s;
-  }
-  .cal__month-grid .cal__day:nth-child(6) {
-    animation-delay: 0.06s;
-  }
-  .cal__month-grid .cal__day:nth-child(7) {
+  .cal__week-row:nth-child(3) .cal__day {
     animation-delay: 0.07s;
   }
-  .cal__month-grid .cal__day:nth-child(8) {
-    animation-delay: 0.08s;
-  }
-  .cal__month-grid .cal__day:nth-child(9) {
-    animation-delay: 0.09s;
-  }
-  .cal__month-grid .cal__day:nth-child(10) {
+  .cal__week-row:nth-child(4) .cal__day {
     animation-delay: 0.1s;
   }
-  .cal__month-grid .cal__day:nth-child(11) {
-    animation-delay: 0.11s;
-  }
-  .cal__month-grid .cal__day:nth-child(12) {
-    animation-delay: 0.12s;
-  }
-  .cal__month-grid .cal__day:nth-child(13) {
+  .cal__week-row:nth-child(5) .cal__day {
     animation-delay: 0.13s;
   }
-  .cal__month-grid .cal__day:nth-child(14) {
-    animation-delay: 0.14s;
-  }
-  .cal__month-grid .cal__day:nth-child(15) {
-    animation-delay: 0.15s;
-  }
-  .cal__month-grid .cal__day:nth-child(16) {
+  .cal__week-row:nth-child(6) .cal__day {
     animation-delay: 0.16s;
   }
-  .cal__month-grid .cal__day:nth-child(17) {
-    animation-delay: 0.17s;
-  }
-  .cal__month-grid .cal__day:nth-child(18) {
-    animation-delay: 0.18s;
-  }
-  .cal__month-grid .cal__day:nth-child(19) {
+  .cal__week-row:nth-child(7) .cal__day {
     animation-delay: 0.19s;
   }
-  .cal__month-grid .cal__day:nth-child(20) {
-    animation-delay: 0.2s;
-  }
-  .cal__month-grid .cal__day:nth-child(21) {
-    animation-delay: 0.21s;
-  }
-  .cal__month-grid .cal__day:nth-child(22) {
-    animation-delay: 0.22s;
-  }
-  .cal__month-grid .cal__day:nth-child(23) {
-    animation-delay: 0.23s;
-  }
-  .cal__month-grid .cal__day:nth-child(24) {
-    animation-delay: 0.24s;
-  }
-  .cal__month-grid .cal__day:nth-child(25) {
-    animation-delay: 0.25s;
-  }
-  .cal__month-grid .cal__day:nth-child(26) {
-    animation-delay: 0.26s;
-  }
-  .cal__month-grid .cal__day:nth-child(27) {
-    animation-delay: 0.27s;
-  }
-  .cal__month-grid .cal__day:nth-child(28) {
-    animation-delay: 0.28s;
-  }
-  .cal__month-grid .cal__day:nth-child(29) {
-    animation-delay: 0.29s;
-  }
-  .cal__month-grid .cal__day:nth-child(30) {
-    animation-delay: 0.3s;
-  }
-  .cal__month-grid .cal__day:nth-child(31) {
-    animation-delay: 0.31s;
-  }
-  .cal__month-grid .cal__day:nth-child(32) {
-    animation-delay: 0.32s;
-  }
-  .cal__month-grid .cal__day:nth-child(33) {
-    animation-delay: 0.33s;
-  }
-  .cal__month-grid .cal__day:nth-child(34) {
-    animation-delay: 0.34s;
-  }
-  .cal__month-grid .cal__day:nth-child(35) {
-    animation-delay: 0.35s;
-  }
-  .cal__month-grid .cal__day:nth-child(36) {
-    animation-delay: 0.36s;
-  }
-  .cal__month-grid .cal__day:nth-child(37) {
-    animation-delay: 0.37s;
-  }
-  .cal__month-grid .cal__day:nth-child(38) {
-    animation-delay: 0.38s;
-  }
-  .cal__month-grid .cal__day:nth-child(39) {
-    animation-delay: 0.39s;
-  }
-  .cal__month-grid .cal__day:nth-child(40) {
-    animation-delay: 0.4s;
-  }
-  .cal__month-grid .cal__day:nth-child(41) {
-    animation-delay: 0.41s;
-  }
-  .cal__month-grid .cal__day:nth-child(42) {
-    animation-delay: 0.42s;
-  }
-  .cal__month-grid .cal__day:nth-child(43) {
-    animation-delay: 0.43s;
-  }
-  .cal__month-grid .cal__day:nth-child(44) {
-    animation-delay: 0.44s;
-  }
-  .cal__month-grid .cal__day:nth-child(45) {
-    animation-delay: 0.45s;
-  }
-  .cal__month-grid .cal__day:nth-child(46) {
-    animation-delay: 0.46s;
-  }
-  .cal__month-grid .cal__day:nth-child(47) {
-    animation-delay: 0.47s;
-  }
-  .cal__month-grid .cal__day:nth-child(48) {
-    animation-delay: 0.48s;
-  }
-  .cal__month-grid .cal__day:nth-child(49) {
-    animation-delay: 0.49s;
-  }
   .cal__agenda-day:nth-child(1) {
     animation-delay: 0.03s;
   }