@dodlhuat/basix 1.1.1 → 1.2.1

package/css/toast.scss

@@ -1,82 +1,82 @@
-@use "properties";
-@use "parameters" as *;
-
-.toast {
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  bottom: $spacing;
-  left: $spacing;
-  right: $spacing;
-  max-width: 380px;
-  margin: 0 auto;
-  background: var(--background);
-  border-radius: calc($border-radius * 2);
-  box-shadow: $shadow, 0 8px 24px rgba(0, 0, 0, 0.12);
-  padding: calc($spacing * 0.75) $spacing;
-  z-index: 1000;
-  overflow: hidden;
-  transform: translateY(calc(100% + $spacing * 2));
-  opacity: 0;
-  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1),
-              opacity 200ms ease;
-
-  .bar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 3px;
-    width: 100%;
-    background: var(--accent-color);
-    border-radius: 0 0 2px 2px;
-    transition: width 250ms linear;
-  }
-
-  &.show {
-    transform: translateY(0);
-    opacity: 1;
-  }
-
-  &.success .bar {
-    background: var(--success);
-  }
-
-  &.warning .bar {
-    background: var(--warning);
-  }
-
-  &.error .bar {
-    background: var(--error);
-  }
-
-  .close {
-    cursor: pointer;
-    position: absolute;
-    top: calc($spacing * 0.75);
-    right: calc($spacing * 0.75);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
-    border-radius: $border-radius;
-    transition: background 150ms ease;
-
-    &:hover {
-      background: var(--secondary-background);
-    }
-  }
-
-  .header {
-    padding-right: 1.5rem;
-    padding-bottom: calc($spacing / 3);
-    font-weight: 700;
-  }
-
-  .content {
-    margin: 0;
-    color: var(--secondary-text);
-    font-size: 0.875rem;
-    line-height: 1.5;
-  }
+@use "properties";
+@use "parameters" as *;
+
+.toast {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: $spacing;
+  left: $spacing;
+  right: $spacing;
+  max-width: 380px;
+  margin: 0 auto;
+  background: var(--background);
+  border-radius: calc($border-radius * 2);
+  box-shadow: $shadow, 0 8px 24px rgba(0, 0, 0, 0.12);
+  padding: calc($spacing * 0.75) $spacing;
+  z-index: 1000;
+  overflow: hidden;
+  transform: translateY(calc(100% + $spacing * 2));
+  opacity: 0;
+  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1),
+              opacity 200ms ease;
+
+  .bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 3px;
+    width: 100%;
+    background: var(--accent-color);
+    border-radius: 0 0 2px 2px;
+    transition: width 250ms linear;
+  }
+
+  &.show {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  &.success .bar {
+    background: var(--success);
+  }
+
+  &.warning .bar {
+    background: var(--warning);
+  }
+
+  &.error .bar {
+    background: var(--error);
+  }
+
+  .close {
+    cursor: pointer;
+    position: absolute;
+    top: calc($spacing * 0.75);
+    right: calc($spacing * 0.75);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: $border-radius;
+    transition: background 150ms ease;
+
+    &:hover {
+      background: var(--secondary-background);
+    }
+  }
+
+  .header {
+    padding-right: 1.5rem;
+    padding-bottom: calc($spacing / 3);
+    font-weight: 700;
+  }
+
+  .content {
+    margin: 0;
+    color: var(--secondary-text);
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
 }

package/css/typography.scss

@@ -1,161 +1,194 @@
-@use "properties";
-@use "parameters" as *;
-
-$spacing-half: calc($spacing / 2);
-$spacing-two-thirds: calc($spacing / 1.5);
-$spacing-1-5x: calc($spacing * 1.5);
-
-@font-face {
-  font-family: "Outfit";
-  src: url("../fonts/Outfit-VariableFont_wght.woff2") format("woff2");
-}
-
-body {
-  font-family: "Outfit", helvetica, arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-}
-
-p, li, td, th, div {
-  font-size: $spacing;
-  line-height: 1.6;
-  color: var(--primary-text);
-}
-
-p {
-  padding-bottom: $spacing-half;
-}
-
-code {
-  font-family: "Courier New", Courier, monospace;
-  font-size: 0.875em;
-  background: var(--secondary-background);
-  padding: 0.15em 0.4em;
-  border-radius: calc($border-radius / 2);
-}
-
-pre code {
-  display: block;
-  padding: $spacing;
-  overflow-x: auto;
-  border-radius: $border-radius;
-  line-height: 1.5;
-}
-
-strong {
-  font-weight: 700;
-}
-
-em {
-  font-style: italic;
-}
-
-h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4,
-h5 {
-  margin: $spacing-half 0 $spacing-two-thirds 0;
-  line-height: 1.15;
-  font-weight: 700;
-  color: var(--primary-text);
-  letter-spacing: -0.02em;
-}
-
-h1, .h1 {
-  font-size: 2rem;
-  font-weight: 800;
-  letter-spacing: -0.03em;
-}
-
-h2, .h2 {
-  font-size: 1.625rem;
-  font-weight: 750;
-}
-
-h3, .h3 {
-  font-size: 1.375rem;
-}
-
-h4, .h4 {
-  font-size: 1.125rem;
-  letter-spacing: -0.01em;
-}
-
-small, .text-small {
-  font-size: 0.8125rem;
-  line-height: 1.4;
-}
-
-.text-secondary {
-  color: var(--secondary-text);
-}
-
-.text-caption {
-  font-size: 0.75rem;
-  line-height: 1.4;
-  color: var(--secondary-text);
-  letter-spacing: 0.01em;
-}
-
-.text-overline {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--secondary-text);
-}
-
-ul, ol {
-  list-style-position: inside;
-  margin-bottom: $spacing-two-thirds;
-}
-
-ul li {
-  list-style-type: disc;
-
-  li { list-style-type: circle; }
-}
-
-ol li {
-  list-style-type: decimal;
-
-  li { list-style-type: lower-latin; }
-}
-
-li + li {
-  margin-top: 0.25em;
-}
-
-hr {
-  border: none;
-  height: 1px;
-  background: var(--divider);
-  margin-block: $spacing-1-5x;
-}
-
-a {
-  color: var(--accent-color);
-  text-decoration: none;
-  font-weight: 500;
-  transition: color 0.2s ease;
-
-  &:hover,
-  &:focus-visible {
-    color: var(--accent-color-lighten);
-  }
-
-  &:active {
-    color: var(--accent-color);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--accent-color);
-    outline-offset: 2px;
-  }
-}
-
-.text-center {
-  text-align: center;
-}
+@use "properties";
+@use "parameters" as *;
+
+$spacing-half: calc($spacing / 2);
+$spacing-two-thirds: calc($spacing / 1.5);
+$spacing-1-5x: calc($spacing * 1.5);
+
+@font-face {
+  font-family: "Outfit";
+  src: url("../fonts/Outfit-VariableFont_wght.woff2") format("woff2");
+  font-display: swap;
+}
+
+body {
+  font-family: "Outfit", helvetica, arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+p, li, td, th, div {
+  font-size: $spacing;
+  line-height: 1.6;
+  color: var(--primary-text);
+}
+
+p {
+  margin-bottom: $spacing-half;
+}
+
+code {
+  font-family: "Courier New", Courier, monospace;
+  font-size: 0.875em;
+  background: var(--secondary-background);
+  border: 1px solid var(--divider);
+  padding: 0.15em 0.4em;
+  border-radius: calc($border-radius / 2);
+}
+
+pre code {
+  display: block;
+  padding: $spacing;
+  overflow-x: auto;
+  border-radius: $border-radius;
+  line-height: 1.5;
+  border: none;
+}
+
+strong {
+  font-weight: 700;
+}
+
+em {
+  font-style: italic;
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5 {
+  font-weight: 700;
+  color: var(--primary-text);
+  letter-spacing: -0.02em;
+}
+
+h1, .h1 {
+  font-size: 2rem;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+  margin: $spacing-1-5x 0 $spacing-two-thirds 0;
+}
+
+h2, .h2 {
+  font-size: 1.625rem;
+  font-weight: 750;
+  line-height: 1.12;
+  margin: $spacing-1-5x 0 $spacing-two-thirds 0;
+}
+
+h3, .h3 {
+  font-size: 1.375rem;
+  line-height: 1.2;
+  margin: $spacing 0 $spacing-half 0;
+}
+
+h4, .h4 {
+  font-size: 1.125rem;
+  letter-spacing: -0.01em;
+  line-height: 1.25;
+  margin: $spacing 0 $spacing-half 0;
+}
+
+h5, .h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.3;
+  margin: $spacing-half 0 calc($spacing / 4) 0;
+}
+
+small, .text-small {
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+.text-secondary {
+  color: var(--secondary-text);
+}
+
+.text-caption {
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--secondary-text);
+  letter-spacing: 0.01em;
+}
+
+.text-overline {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--secondary-text);
+}
+
+blockquote {
+  border-left: 3px solid var(--divider);
+  padding: $spacing-half $spacing;
+  margin-block: $spacing-half;
+  color: var(--secondary-text);
+  font-style: italic;
+}
+
+mark {
+  background-color: color-mix(in srgb, var(--accent-color) 18%, transparent);
+  color: var(--primary-text);
+  border-radius: calc($border-radius / 4);
+  padding: 0 0.2em;
+}
+
+ul, ol {
+  list-style-position: outside;
+  padding-left: $spacing-1-5x;
+  margin-bottom: $spacing-two-thirds;
+}
+
+ul li {
+  list-style-type: disc;
+
+  li { list-style-type: circle; }
+}
+
+ol li {
+  list-style-type: decimal;
+
+  li { list-style-type: lower-latin; }
+}
+
+li + li {
+  margin-top: 0.25em;
+}
+
+hr {
+  border: none;
+  height: 1px;
+  background: var(--divider);
+  margin-block: $spacing-1-5x;
+}
+
+a {
+  color: var(--accent-color);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--accent-color-lighten);
+  }
+
+  &:active {
+    color: var(--accent-color);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+  }
+}
+
+.text-center {
+  text-align: center;
+}

package/css/virtual-dropdown.scss

@@ -1,13 +1,14 @@
 @use "parameters" as *;
 @use "properties";
 
-.virtual-dropdown {
-  .custom-dropdown {
-    position: relative;
-    width: 100%;
-    user-select: none;
-    display: inline-block;
-  }
+// All selectors scoped under .custom-dropdown to avoid conflicts with dropdown.scss
+.custom-dropdown {
+  position: relative;
+  width: 100%;
+  user-select: none;
+  display: inline-block;
+
+  // ── Trigger ──────────────────────────────────────────────────────────
 
   .dropdown-trigger {
     background: var(--background);
@@ -20,17 +21,16 @@
     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;
-  }
 
-  // Focus without open — show ring
-  .dropdown-trigger:focus {
-    border-color: var(--accent-color);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
-    outline: none;
+    &:focus {
+      border-color: var(--accent-color);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
+      outline: none;
+    }
   }
 
   // Open — flatten bottom, hide bottom border so menu connects flush
-  .custom-dropdown.open .dropdown-trigger {
+  &.open .dropdown-trigger {
     border-color: var(--accent-color);
     border-radius: $border-radius $border-radius 0 0;
     border-bottom-color: var(--background);
@@ -58,10 +58,12 @@
     transition: transform 0.2s ease;
   }
 
-  .custom-dropdown.open .trigger-arrow {
+  &.open .trigger-arrow {
     transform: rotate(180deg);
   }
 
+  // ── Menu ─────────────────────────────────────────────────────────────
+
   // visibility trick: transitions work in both directions; display:none/block skips them
   .dropdown-menu {
     position: absolute;
@@ -81,19 +83,21 @@
     transition:
       opacity 0.18s ease,
       transform 0.18s ease,
-      visibility 0s 0.18s; // delay visibility until fade-out ends
+      visibility 0s 0.18s;
+
+    &.open {
+      visibility: visible;
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+      transition:
+        opacity 0.18s ease,
+        transform 0.18s ease,
+        visibility 0s 0s;
+    }
   }
 
-  .dropdown-menu.open {
-    visibility: visible;
-    opacity: 1;
-    transform: translateY(0);
-    pointer-events: auto;
-    transition:
-      opacity 0.18s ease,
-      transform 0.18s ease,
-      visibility 0s 0s; // switch visible immediately on open
-  }
+  // ── Search ───────────────────────────────────────────────────────────
 
   .dropdown-search {
     padding: calc($spacing / 2);
@@ -117,6 +121,8 @@
     }
   }
 
+  // ── Virtual list ─────────────────────────────────────────────────────
+
   .dropdown-list-wrapper {
     max-height: 250px;
     overflow-y: auto;
@@ -135,6 +141,8 @@
     width: 100%;
   }
 
+  // ── Items ─────────────────────────────────────────────────────────────
+
   .dropdown-item {
     padding: 0 calc($spacing * 0.75);
     cursor: pointer;
@@ -194,8 +202,6 @@
   }
 
   @media (max-width: 600px) {
-    .custom-dropdown {
-      max-width: 100%;
-    }
+    max-width: 100%;
   }
 }