Updated components

css/main.css

@@ -479,18 +479,22 @@ details[open] > summary .down-arrow {
 
 sm-select,
 sm-option,
-strip-option {
+sm-chip {
   font-size: 0.9rem;
 }
 
-strip-select {
-  --gap: 0;
+sm-chips {
+  --gap: 0.3rem;
 }
 
-strip-option {
+sm-chip {
   font-weight: 500;
-  --border-radius: 0.3rem;
-  --active-option-color: var(--accent-color);
+  --border-radius: 0.5rem;
+  --background: rgba(var(--text-color), 0.06);
+}
+sm-chip[selected] {
+  color: rgba(var(--background-color), 1);
+  --background: var(--accent-color);
 }
 
 sm-checkbox {

css/main.scss

@@ -455,16 +455,20 @@ details[open] {
 }
 sm-select,
 sm-option,
-strip-option {
+sm-chip {
   font-size: 0.9rem;
 }
-strip-select {
-  --gap: 0;
+sm-chips {
+  --gap: 0.3rem;
 }
-strip-option {
+sm-chip {
   font-weight: 500;
-  --border-radius: 0.3rem;
-  --active-option-color: var(--accent-color);
+  --border-radius: 0.5rem;
+  --background: rgba(var(--text-color), 0.06);
+  &[selected] {
+    color: rgba(var(--background-color), 1);
+    --background: var(--accent-color);
+  }
 }
 sm-checkbox {
   --height: 1rem;

index.html

@@ -230,10 +230,10 @@
         <section id="options_panel" class="flex hidden">
             <div id="filter_panel" class="flex w-100 align-center gap-1 ">
                 <h5>Sort by</h5>
-                <strip-select id="sort_content_list" label="Sort by:">
-                    <strip-option value="score" selected>Score</strip-option>
-                    <strip-option value="time">Most recent</strip-option>
-                </strip-select>
+                <sm-chips id="sort_content_list" label="Sort by:">
+                    <sm-chip value="score" selected>Score</sm-chip>
+                    <sm-chip value="time">Most recent</sm-chip>
+                </sm-chips>
             </div>
         </section>
         <div id="text_toolbar" class="hidden">
@@ -394,14 +394,6 @@
         </header>
         <sm-form>
             <sm-input id="get_article_title" placeholder="Article title" required autofocus></sm-input>
-            <!--             <sm-checkbox id="set_default_checkbox" checked>
-                <div class="grid margin-left-0-5 gap-0-5">
-                    Set as default
-                    <p style="font-size: 0.8rem;">
-                        This article will be opened by default for everyone when CC is first loaded.
-                    </p>
-                </div>
-            </sm-checkbox> -->
             <div class="grid gap-1">
                 <div class="grid gap-0-5">
                     <h4>Define plot (optional)</h4>