@dodlhuat/basix 1.1.1 → 1.2.1

package/css/tabs.scss

@@ -1,123 +1,154 @@
-@use "properties";
-@use "parameters" as *;
-
-.tabs-container {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-
-  li {
-    list-style: none;
-  }
-
-  &.tabs-vertical {
-    flex-direction: row;
-    min-height: 300px;
-  }
-}
-
-.tabs-header {
-  border-bottom: 1px solid var(--divider);
-}
-
-.tabs-list {
-  display: flex;
-  margin: 0;
-  padding: 0;
-  overflow-x: auto;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-.tab-item {
-  padding: calc($spacing * 0.75) calc($spacing * 1.25);
-  cursor: pointer;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--secondary-text);
-  white-space: nowrap;
-  user-select: none;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  border-bottom: 2px solid transparent;
-
-  &:hover {
-    color: var(--accent-color);
-  }
-
-  &.active {
-    color: var(--accent-color);
-    font-weight: 600;
-    border-bottom-color: var(--accent-color);
-  }
-}
-
-.tabs-content {
-  padding: calc($spacing * 1.5);
-}
-
-.tab-panel {
-  display: none;
-
-  &.active {
-    display: block;
-  }
-}
-
-.tabs-container.tabs-vertical {
-  .tabs-header {
-    border-bottom: none;
-    border-right: 1px solid var(--divider);
-    min-width: 200px;
-  }
-
-  .tabs-list {
-    flex-direction: column;
-  }
-
-  .tab-item {
-    width: 100%;
-    box-sizing: border-box;
-    border-bottom: none;
-    border-left: 2px solid transparent;
-
-    &.active {
-      border-left-color: var(--accent-color);
-      font-weight: 600;
-    }
-  }
-
-  .tabs-content {
-    flex: 1;
-  }
-}
-
-@media (max-width: 768px) {
-  .tabs-container.tabs-vertical {
-    flex-direction: column;
-
-    .tabs-header {
-      width: 100%;
-      border-right: none;
-      border-bottom: 1px solid var(--divider);
-    }
-
-    .tabs-list {
-      flex-direction: row;
-      overflow-x: auto;
-    }
-
-    .tab-item {
-      width: auto;
-      flex-shrink: 0;
-      border-left: none;
-      border-bottom: 2px solid transparent;
-
-      &.active {
-        border-bottom-color: var(--accent-color);
-      }
-    }
-  }
-}
+@use "properties";
+@use "parameters" as *;
+
+.tabs-container {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  li {
+    list-style: none;
+  }
+
+  &.tabs-vertical {
+    flex-direction: row;
+    min-height: 300px;
+  }
+}
+
+.tabs-header {
+  border-bottom: 1px solid var(--divider);
+}
+
+.tabs-list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.tab-item {
+  padding: calc($spacing * 0.75) calc($spacing * 1.25);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--secondary-text);
+  white-space: nowrap;
+  user-select: none;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  border-bottom: 2px solid transparent;
+
+  &:hover {
+    color: var(--accent-color);
+  }
+
+  &.active {
+    color: var(--accent-color);
+    font-weight: 600;
+    border-bottom-color: var(--accent-color);
+  }
+}
+
+.tabs-content {
+  padding: calc($spacing * 1.5);
+}
+
+.tab-panel {
+  display: none;
+
+  &.active {
+    display: block;
+  }
+}
+
+.tabs-container.tabs-vertical {
+  .tabs-header {
+    border-bottom: none;
+    border-right: 1px solid var(--divider);
+    min-width: 200px;
+  }
+
+  .tabs-list {
+    flex-direction: column;
+  }
+
+  .tab-item {
+    width: 100%;
+    box-sizing: border-box;
+    border-bottom: none;
+    border-left: 2px solid transparent;
+
+    &.active {
+      border-left-color: var(--accent-color);
+      font-weight: 600;
+    }
+  }
+
+  .tabs-content {
+    flex: 1;
+  }
+}
+
+// ── Pills variant ─────────────────────────────────────────────────────────────
+
+.tabs-container.tabs-pills {
+  .tabs-header {
+    border-bottom: none;
+    padding-bottom: calc($spacing * 0.5);
+  }
+
+  .tabs-list {
+    gap: calc($spacing * 0.375);
+  }
+
+  .tab-item {
+    border-bottom: none;
+    border-radius: calc($border-radius * 5);
+    padding: calc($spacing * 0.4) calc($spacing * 1);
+    background: transparent;
+
+    &:hover {
+      background: var(--hover);
+      color: var(--primary-text);
+    }
+
+    &.active {
+      background: var(--accent-color);
+      color: #fff;
+      border-bottom-color: transparent;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .tabs-container.tabs-vertical {
+    flex-direction: column;
+
+    .tabs-header {
+      width: 100%;
+      border-right: none;
+      border-bottom: 1px solid var(--divider);
+    }
+
+    .tabs-list {
+      flex-direction: row;
+      overflow-x: auto;
+    }
+
+    .tab-item {
+      width: auto;
+      flex-shrink: 0;
+      border-left: none;
+      border-bottom: 2px solid transparent;
+
+      &.active {
+        border-bottom-color: var(--accent-color);
+      }
+    }
+  }
+}

package/css/timeline.scss

@@ -1,71 +1,116 @@
 @use "properties";
 @use "parameters" as *;
 
+// ── Timeline shell ────────────────────────────────────────────────────────────
+
+$marker-size: 1.25rem;
+
 .timeline {
   position: relative;
-  max-width: 800px;
-  padding: calc($spacing * 1.25) 0;
   list-style: none;
-}
+  padding: 0;
+  margin: 0;
 
-.timeline::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: calc($spacing * 1.25);
-  width: 2px;
-  background: var(--divider);
+  // Vertical connector line — centered on the marker column
+  &::before {
+    content: '';
+    position: absolute;
+    left: calc($marker-size / 2 - 1px);
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: var(--divider);
+  }
 }
 
+// ── Item ──────────────────────────────────────────────────────────────────────
+
 .timeline-item {
-  position: relative;
+  display: flex;
+  gap: calc($spacing * 1.25);
+  align-items: flex-start;
   margin-bottom: calc($spacing * 2);
-  padding-left: calc($spacing * 3);
+  position: relative;
+
+  &:last-child { margin-bottom: 0; }
 }
 
-.timeline-item::before {
-  content: '';
-  position: absolute;
-  left: calc($spacing / 2);
-  top: 5px;
-  width: calc($spacing * 1.25);
-  height: calc($spacing * 1.25);
+// ── Marker dot ────────────────────────────────────────────────────────────────
+
+.timeline-marker {
+  flex-shrink: 0;
+  width: $marker-size;
+  height: $marker-size;
   border-radius: 50%;
-  border: 3px solid var(--divider);
-  z-index: 1;
+  border: 2px solid var(--divider);
   background: var(--background);
-}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--secondary-text);
+  position: relative;
+  z-index: 1;
+  margin-top: 0.15rem; // align with first line of content text
+
+  // ── Color variants ────────────────────────────────────────────────────────
+  &.success {
+    border-color: var(--success);
+    background: var(--success);
+    color: #fff;
+  }
 
-.timeline-item.active::before {
-  border-color: var(--accent-color);
-  background-color: color-mix(in srgb, var(--accent-color) 12%, var(--background));
+  &.warning {
+    border-color: var(--warning);
+    background: var(--warning);
+    color: #fff;
+  }
+
+  &.error {
+    border-color: var(--error);
+    background: var(--error);
+    color: #fff;
+  }
+
+  &.accent {
+    border-color: var(--accent-color);
+    background: var(--accent-color);
+    color: #fff;
+  }
+
+  svg { display: block; }
 }
 
+// ── Content card ──────────────────────────────────────────────────────────────
+
 .timeline-content {
-  padding: calc($spacing * 1.5);
+  flex: 1;
+  min-width: 0;
+  padding: calc($spacing * 1.25);
+  border: 1px solid var(--divider);
   border-radius: $border-radius;
+  background: var(--background);
   box-shadow: $shadow;
-  border: 1px solid var(--divider);
 }
 
-.timeline-date {
-  font-size: 0.85rem;
-  color: var(--secondary-text);
-  font-weight: 600;
-  margin-bottom: calc($spacing / 2);
+// ── Content elements ──────────────────────────────────────────────────────────
+
+.timeline-time {
   display: block;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--secondary-text);
+  margin-bottom: 0.2rem;
 }
 
 .timeline-title {
-  font-size: 1.1rem;
-  font-weight: 700;
-  margin: 0 0 calc($spacing / 2) 0;
+  font-size: 0.95rem;
+  font-weight: 600;
   color: var(--primary-text);
+  margin: 0 0 0.3rem;
 }
 
-.timeline-body {
-  font-size: 0.95rem;
+.timeline-content p {
+  font-size: 0.875rem;
   line-height: 1.6;
   color: var(--secondary-text);
   margin: 0;

package/css/timepicker.scss

@@ -9,10 +9,19 @@
   border-radius: $border-radius;
   overflow: hidden;
   box-shadow: $shadow;
-  transition: border-color 0.2s ease;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+  &:focus-within {
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 12%, transparent);
+  }
 
   &.is-error {
     border-color: var(--error);
+
+    &:focus-within {
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 12%, transparent);
+    }
   }
 }
 
@@ -22,6 +31,7 @@
   flex-direction: column;
   padding: calc($spacing * 0.75) $spacing;
   min-width: 0;
+  position: relative;
 
   label {
     font-size: 0.6875rem;
@@ -32,6 +42,15 @@
     margin-bottom: calc($spacing / 4);
     pointer-events: none;
     display: block;
+    transition: color 0.15s ease;
+  }
+
+  &:focus-within label {
+    color: var(--accent-color);
+  }
+
+  .timespan-picker.is-error .timespan-field-end:focus-within & label {
+    color: var(--error);
   }
 
   input[type="time"] {
@@ -81,7 +100,7 @@
   border-right: 1px solid var(--divider);
   background: var(--background);
   min-width: 4.5rem;
-  gap: calc($spacing / 5);
+  gap: calc($spacing / 4);
   flex-shrink: 0;
 }
 
@@ -89,6 +108,15 @@
   font-size: 1rem;
   color: var(--secondary-text);
   line-height: 1;
+  transition: color 0.2s ease, transform 0.2s ease;
+
+  .timespan-picker:focus-within & {
+    color: var(--accent-color);
+  }
+
+  .timespan-picker.is-error & {
+    color: var(--error);
+  }
 }
 
 .timespan-duration {
@@ -99,19 +127,29 @@
   white-space: nowrap;
   line-height: 1;
   min-height: 0.75rem;
+  padding: 2px 6px;
+  border-radius: calc($border-radius * 2);
+  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  transition: color 0.2s ease, background 0.2s ease, transform 0.25s cubic-bezier(0.2, 0, 0, 1);
+
+  &:empty {
+    background: transparent;
+    padding: 0;
+  }
 
   .timespan-picker.is-error & {
     color: var(--error);
+    background: color-mix(in srgb, var(--error) 10%, transparent);
   }
 }
 
 // 24h position bar
 .timespan-bar {
   margin-top: calc($spacing / 2);
-  height: 3px;
+  height: 6px;
   background: var(--divider);
   border-radius: 99px;
-  overflow: hidden;
+  overflow: visible;
   position: relative;
 }
 
@@ -122,13 +160,66 @@
   height: 100%;
   background: var(--accent-color);
   border-radius: inherit;
-  transition: left 0.3s ease, width 0.3s ease;
+  transition: left 0.3s cubic-bezier(0.2, 0, 0, 1), width 0.3s cubic-bezier(0.2, 0, 0, 1);
+
+  // Start/end dot markers
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--accent-color);
+    border: 2px solid var(--background);
+    transform: translateY(-50%);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    opacity: 0;
+  }
+
+  &::before {
+    left: -6px;
+  }
+
+  &::after {
+    right: -6px;
+  }
+
+  // Only show dots when the bar has width (values are set)
+  &[style*="width"]:not([style*="width: 0"]):not([style*="width:0"]) {
+    &::before,
+    &::after {
+      opacity: 1;
+    }
+  }
 
   .timespan-picker.is-error ~ .timespan-bar & {
     background: var(--error);
+
+    &::before,
+    &::after {
+      background: var(--error);
+    }
+  }
+}
+
+// Error shake
+@media (prefers-reduced-motion: no-preference) {
+  .timespan-picker.is-error {
+    animation: timespan-shake 0.35s cubic-bezier(0.2, 0, 0, 1);
   }
 }
 
+@keyframes timespan-shake {
+  0%, 100% { transform: translateX(0); }
+  20%      { transform: translateX(-4px); }
+  40%      { transform: translateX(4px); }
+  60%      { transform: translateX(-2px); }
+  80%      { transform: translateX(2px); }
+}
+
 @media (max-width: 480px) {
   .timespan-picker {
     flex-direction: column;
@@ -145,6 +236,10 @@
     min-width: unset;
   }
 
+  .timespan-arrow {
+    transform: rotate(90deg);
+  }
+
   .timespan-field input[type="time"] {
     font-size: 2rem;
   }