@skewedaspect/sleekspace-ui 0.5.1 → 0.6.0

package/dist/sleekspace-ui.css

@@ -4162,10 +4162,24 @@
     padding: 0;
   }
   .sk-panel.sk-card .sk-card-header {
+    --sk-card-header-cut-tl: calc(var(--sk-panel-cut-tl) - 2px);
+    --sk-card-header-cut-tr: calc(var(--sk-panel-cut-tr) - 2px);
     padding: var(--sk-card-header-padding-vertical) var(--sk-card-padding);
     background-color: oklch(from currentColor l c h/0.2);
     margin: 2px;
   }
+  @supports (corner-shape: bevel) {
+    .sk-panel.sk-card .sk-card-header {
+      border-top-left-radius: max(0px, var(--sk-card-header-cut-tl));
+      border-top-right-radius: max(0px, var(--sk-card-header-cut-tr));
+      corner-shape: bevel;
+    }
+  }
+  @supports not (corner-shape: bevel) {
+    .sk-panel.sk-card .sk-card-header {
+      clip-path: polygon(max(0px, var(--sk-card-header-cut-tl)) 0, calc(100% - max(0px, var(--sk-card-header-cut-tr))) 0, 100% max(0px, var(--sk-card-header-cut-tr)), 100% 100%, 0 100%, 0 max(0px, var(--sk-card-header-cut-tl)));
+    }
+  }
   .sk-panel.sk-card .sk-card-title {
     margin: 0;
     font-size: 1.25rem;
@@ -4194,29 +4208,14 @@
   }
   @supports (corner-shape: bevel) {
     .sk-panel.sk-card .sk-card-footer {
-      border: 0 solid tranparent;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: var(--sk-panel-cut-size);
-      border-bottom-left-radius: 0;
+      border-bottom-right-radius: var(--sk-panel-cut-br);
+      border-bottom-left-radius: var(--sk-panel-cut-bl);
       corner-shape: bevel;
     }
   }
   @supports not (corner-shape: bevel) {
     .sk-panel.sk-card .sk-card-footer {
-      border: none;
-      clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--sk-panel-cut-size)), calc(100% - var(--sk-panel-cut-size)) 100%, 0% 100%);
-    }
-    .sk-panel.sk-card .sk-card-footer::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: tranparent;
-      z-index: -1;
-      clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--sk-panel-cut-size)), calc(100% - var(--sk-panel-cut-size)) 100%, 0% 100%, 0% 0%, 0 0, 0 calc(100% - 0), calc(100% - var(--sk-panel-cut-size) - 0) calc(100% - 0), calc(100% - 0) calc(100% - var(--sk-panel-cut-size) - 0), calc(100% - 0) 0, 0 0);
+      clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sk-panel-cut-br)), calc(100% - var(--sk-panel-cut-br)) 100%, var(--sk-panel-cut-bl) 100%, 0 calc(100% - var(--sk-panel-cut-bl)));
     }
   }
   .sk-panel.sk-card .sk-card-footer {
@@ -4895,6 +4894,7 @@
     --sk-listbox-fg: var(--sk-neutral-text);
     position: relative;
     display: inline-flex;
+    width: 100%;
   }
   .sk-listbox.sk-sm {
     --sk-listbox-cut: 0.4rem;
@@ -6706,6 +6706,10 @@
     --sk-panel-min-height: 4rem;
     --sk-panel-radius-factor: var(--sk-border-radius-factor);
     --sk-panel-cut-size: calc(var(--sk-panel-min-height) / var(--sk-panel-radius-factor));
+    --sk-panel-cut-tl: 0px;
+    --sk-panel-cut-tr: 0px;
+    --sk-panel-cut-br: 0px;
+    --sk-panel-cut-bl: 0px;
     --sk-panel-border-width: var(--sk-border-width-thin);
     --sk-panel-border-color: currentColor;
     --sk-panel-glow-size: 12px;
@@ -6735,20 +6739,32 @@
   .sk-panel ul li::marker {
     color: var(--sk-kind-color, var(--sk-panel-color-base));
   }
+  .sk-panel.sk-cut-top-left {
+    --sk-panel-cut-tl: var(--sk-panel-cut-size);
+  }
+  .sk-panel.sk-cut-top-right {
+    --sk-panel-cut-tr: var(--sk-panel-cut-size);
+  }
+  .sk-panel.sk-cut-bottom-right {
+    --sk-panel-cut-br: var(--sk-panel-cut-size);
+  }
+  .sk-panel.sk-cut-bottom-left {
+    --sk-panel-cut-bl: var(--sk-panel-cut-size);
+  }
   @supports (corner-shape: bevel) {
     .sk-panel {
       border: var(--sk-panel-border-width) solid var(--sk-panel-border-color);
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: var(--sk-panel-cut-size);
-      border-bottom-left-radius: 0;
+      border-top-left-radius: var(--sk-panel-cut-tl);
+      border-top-right-radius: var(--sk-panel-cut-tr);
+      border-bottom-right-radius: var(--sk-panel-cut-br);
+      border-bottom-left-radius: var(--sk-panel-cut-bl);
       corner-shape: bevel;
     }
   }
   @supports not (corner-shape: bevel) {
     .sk-panel {
       border: none;
-      clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--sk-panel-cut-size)), calc(100% - var(--sk-panel-cut-size)) 100%, 0% 100%);
+      clip-path: polygon(var(--sk-panel-cut-tl) 0, calc(100% - var(--sk-panel-cut-tr)) 0, 100% var(--sk-panel-cut-tr), 100% calc(100% - var(--sk-panel-cut-br)), calc(100% - var(--sk-panel-cut-br)) 100%, var(--sk-panel-cut-bl) 100%, 0 calc(100% - var(--sk-panel-cut-bl)), 0 var(--sk-panel-cut-tl));
     }
     .sk-panel::before {
       content: "";
@@ -6759,7 +6775,7 @@
       bottom: 0;
       background-color: var(--sk-panel-border-color);
       z-index: -1;
-      clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--sk-panel-cut-size)), calc(100% - var(--sk-panel-cut-size)) 100%, 0% 100%, 0% 0%, var(--sk-panel-border-width) var(--sk-panel-border-width), var(--sk-panel-border-width) calc(100% - var(--sk-panel-border-width)), calc(100% - var(--sk-panel-cut-size) - var(--sk-panel-border-width)) calc(100% - var(--sk-panel-border-width)), calc(100% - var(--sk-panel-border-width)) calc(100% - var(--sk-panel-cut-size) - var(--sk-panel-border-width)), calc(100% - var(--sk-panel-border-width)) var(--sk-panel-border-width), var(--sk-panel-border-width) var(--sk-panel-border-width));
+      clip-path: polygon(var(--sk-panel-cut-tl) 0, calc(100% - var(--sk-panel-cut-tr)) 0, 100% var(--sk-panel-cut-tr), 100% calc(100% - var(--sk-panel-cut-br)), calc(100% - var(--sk-panel-cut-br)) 100%, var(--sk-panel-cut-bl) 100%, 0 calc(100% - var(--sk-panel-cut-bl)), 0 var(--sk-panel-cut-tl), var(--sk-panel-cut-tl) 0, calc(var(--sk-panel-cut-tl) + var(--sk-panel-border-width)) var(--sk-panel-border-width), var(--sk-panel-border-width) calc(var(--sk-panel-cut-tl) + var(--sk-panel-border-width)), var(--sk-panel-border-width) calc(100% - var(--sk-panel-cut-bl) - var(--sk-panel-border-width)), calc(var(--sk-panel-cut-bl) + var(--sk-panel-border-width)) calc(100% - var(--sk-panel-border-width)), calc(100% - var(--sk-panel-cut-br) - var(--sk-panel-border-width)) calc(100% - var(--sk-panel-border-width)), calc(100% - var(--sk-panel-border-width)) calc(100% - var(--sk-panel-cut-br) - var(--sk-panel-border-width)), calc(100% - var(--sk-panel-border-width)) calc(var(--sk-panel-cut-tr) + var(--sk-panel-border-width)), calc(100% - var(--sk-panel-cut-tr) - var(--sk-panel-border-width)) var(--sk-panel-border-width), calc(var(--sk-panel-cut-tl) + var(--sk-panel-border-width)) var(--sk-panel-border-width));
     }
   }
   .sk-panel::after {
@@ -6769,11 +6785,28 @@
     height: 2px;
     background: var(--sk-panel-border-base);
     border-radius: 1px;
+    transform-origin: center;
+    pointer-events: none;
+  }
+  .sk-panel.sk-decoration-bottom-right::after {
     right: var(--sk-panel-decoration-offset);
     bottom: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
     transform: rotate(135deg);
-    transform-origin: center;
-    pointer-events: none;
+  }
+  .sk-panel.sk-decoration-top-left::after {
+    left: var(--sk-panel-decoration-offset);
+    top: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
+    transform: rotate(135deg);
+  }
+  .sk-panel.sk-decoration-top-right::after {
+    right: var(--sk-panel-decoration-offset);
+    top: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
+    transform: rotate(45deg);
+  }
+  .sk-panel.sk-decoration-bottom-left::after {
+    left: var(--sk-panel-decoration-offset);
+    bottom: calc(var(--sk-panel-cut-size) / 2 + var(--sk-panel-decoration-offset) - 1px);
+    transform: rotate(45deg);
   }
   .sk-panel.sk-xs {
     --sk-panel-cut-size: calc(var(--sk-panel-min-height) * 0.5 / var(--sk-panel-radius-factor));
@@ -6792,7 +6825,6 @@
   }
   .sk-panel.sk-no-border {
     --sk-panel-border-width: 0;
-    --sk-panel-cut-size: 0;
     box-shadow: none;
   }
   .sk-panel.sk-no-border::after {
@@ -6805,7 +6837,7 @@
   }
   .sk-panel .sk-panel-scroll-content {
     padding: var(--sk-panel-padding);
-    margin-bottom: calc(var(--sk-panel-cut-size) + var(--sk-panel-decoration-offset));
+    margin-bottom: calc(max(var(--sk-panel-cut-br), var(--sk-panel-cut-bl)) + var(--sk-panel-decoration-offset));
     overflow-y: auto;
     overflow-x: hidden;
     flex: 1;
@@ -7537,9 +7569,370 @@
   .sk-radio-label {
     user-select: none;
   }
+  .sk-select {
+    --sk-select-color-base: var(--sk-neutral-base);
+    --sk-select-fg: var(--sk-neutral-text);
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+  }
+  .sk-select.sk-sm {
+    --sk-select-cut: 0.4rem;
+  }
+  .sk-select.sk-md {
+    --sk-select-cut: 0.5rem;
+  }
+  .sk-select.sk-lg {
+    --sk-select-cut: 0.6rem;
+  }
+  .sk-select.sk-xl {
+    --sk-select-cut: 0.7rem;
+  }
+  .sk-select.sk-neutral {
+    --sk-select-color-base: var(--sk-neutral-base);
+    --sk-select-fg: var(--sk-neutral-text);
+  }
+  .sk-select.sk-primary {
+    --sk-select-color-base: var(--sk-primary-base);
+    --sk-select-fg: var(--sk-primary-text);
+  }
+  .sk-select.sk-accent {
+    --sk-select-color-base: var(--sk-accent-base);
+    --sk-select-fg: var(--sk-accent-text);
+  }
+  .sk-select.sk-info {
+    --sk-select-color-base: var(--sk-info-base);
+    --sk-select-fg: var(--sk-info-text);
+  }
+  .sk-select.sk-success {
+    --sk-select-color-base: var(--sk-success-base);
+    --sk-select-fg: var(--sk-success-text);
+  }
+  .sk-select.sk-warning {
+    --sk-select-color-base: var(--sk-warning-base);
+    --sk-select-fg: var(--sk-warning-text);
+  }
+  .sk-select.sk-danger {
+    --sk-select-color-base: var(--sk-danger-base);
+    --sk-select-fg: var(--sk-danger-text);
+  }
+  .sk-select.sk-neon-blue {
+    --sk-select-color-base: var(--sk-neon-blue-base);
+    --sk-select-fg: var(--sk-neon-blue-text);
+  }
+  .sk-select.sk-neon-purple {
+    --sk-select-color-base: var(--sk-neon-purple-base);
+    --sk-select-fg: var(--sk-neon-purple-text);
+  }
+  .sk-select.sk-neon-orange {
+    --sk-select-color-base: var(--sk-neon-orange-base);
+    --sk-select-fg: var(--sk-neon-orange-text);
+  }
+  .sk-select.sk-neon-green {
+    --sk-select-color-base: var(--sk-neon-green-base);
+    --sk-select-fg: var(--sk-neon-green-text);
+  }
+  .sk-select.sk-neon-mint {
+    --sk-select-color-base: var(--sk-neon-mint-base);
+    --sk-select-fg: var(--sk-neon-mint-text);
+  }
+  .sk-select.sk-neon-pink {
+    --sk-select-color-base: var(--sk-neon-pink-base);
+    --sk-select-fg: var(--sk-neon-pink-text);
+  }
+  .sk-select.sk-yellow {
+    --sk-select-color-base: var(--sk-yellow-base);
+    --sk-select-fg: var(--sk-yellow-text);
+  }
+  .sk-select.sk-red {
+    --sk-select-color-base: var(--sk-red-base);
+    --sk-select-fg: var(--sk-red-text);
+  }
+  .sk-select-trigger {
+    display: flex;
+    align-items: center;
+    gap: var(--sk-space-sm);
+    width: 100%;
+    font-family: var(--sk-font-family-base);
+    font-size: inherit;
+    text-align: left;
+  }
+  @supports (corner-shape: bevel) {
+    .sk-select-trigger {
+      border: var(--sk-border-width-thin) solid var(--sk-select-color-base);
+      border-top-left-radius: 0;
+      border-top-right-radius: var(--sk-select-cut);
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+      corner-shape: bevel;
+    }
+  }
+  @supports not (corner-shape: bevel) {
+    .sk-select-trigger {
+      border: none;
+      clip-path: polygon(0% 0%, calc(100% - var(--sk-select-cut)) 0%, 100% var(--sk-select-cut), 100% 100%, 0% 100%);
+    }
+    .sk-select-trigger::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: var(--sk-select-color-base);
+      z-index: -1;
+      clip-path: polygon(0% 0%, calc(100% - var(--sk-select-cut)) 0%, 100% var(--sk-select-cut), 100% 100%, 0% 100%, 0% 0%, var(--sk-border-width-thin) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(var(--sk-select-cut) + var(--sk-border-width-thin)), calc(100% - var(--sk-select-cut) - var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) var(--sk-border-width-thin));
+    }
+  }
+  .sk-select-trigger {
+    background: color-mix(in oklch, color-mix(in oklch, var(--sk-select-color-base) 75%, transparent 25%), #000 65%);
+    color: var(--sk-select-fg);
+    cursor: pointer;
+    outline: none;
+    transition-property: background, border-color;
+    transition-duration: var(--sk-transition-duration-base);
+  }
+  .sk-select.sk-sm .sk-select-trigger {
+    height: 2rem;
+    padding: 0 var(--sk-space-sm);
+    font-size: 0.875rem;
+  }
+  .sk-select.sk-md .sk-select-trigger {
+    height: 2.5rem;
+    padding: 0 var(--sk-space-md);
+    font-size: 1rem;
+  }
+  .sk-select.sk-lg .sk-select-trigger {
+    height: 3rem;
+    padding: 0 var(--sk-space-md);
+    font-size: 1.125rem;
+  }
+  .sk-select.sk-xl .sk-select-trigger {
+    height: 3.5rem;
+    padding: 0 var(--sk-space-md);
+    font-size: 1.25rem;
+  }
+  .sk-select-trigger:focus-visible {
+    border-color: color-mix(in oklch, var(--sk-select-color-base), white 35%);
+    background: color-mix(in oklch, color-mix(in oklch, var(--sk-select-color-base) 75%, transparent 25%), #000 25%);
+  }
+  .sk-select-trigger:hover:not(:disabled) {
+    border-color: color-mix(in oklch, var(--sk-select-color-base), white 20%);
+  }
+  .sk-select-trigger:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .sk-select-trigger > span {
+    flex: 1;
+    color: white;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sk-select-trigger > span[data-placeholder] {
+    color: color-mix(in oklch, var(--sk-select-fg), transparent 50%);
+  }
+  .sk-select-trigger > svg {
+    flex-shrink: 0;
+    opacity: 0.8;
+  }
+  .sk-select-content {
+    --sk-menu-color-base: var(--sk-neutral-base);
+    --sk-menu-fg: var(--sk-neutral-text);
+    position: relative;
+    min-width: var(--reka-select-trigger-width);
+    max-height: 20rem;
+    overflow: auto;
+    padding: var(--sk-space-xs);
+    z-index: 1000;
+  }
+  @supports (corner-shape: bevel) {
+    .sk-select-content {
+      border: var(--sk-border-width-thin) solid var(--sk-menu-color-base);
+      border-top-left-radius: 0.625rem;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+      corner-shape: bevel;
+    }
+  }
+  @supports not (corner-shape: bevel) {
+    .sk-select-content {
+      border: none;
+      clip-path: polygon(0.625rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0.625rem);
+    }
+    .sk-select-content::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: var(--sk-menu-color-base);
+      z-index: -1;
+      clip-path: polygon(0.625rem 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0.625rem, 0.625rem 0%, calc(0.625rem + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(0.625rem + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(0.625rem + var(--sk-border-width-thin)) var(--sk-border-width-thin));
+    }
+  }
+  .sk-select-content {
+    background: color-mix(in oklch, color-mix(in oklch, var(--sk-menu-color-base) 95%, transparent 5%), #000 46.25%);
+    color: var(--sk-menu-fg);
+    box-shadow: var(--sk-shadow-lg);
+  }
+  .sk-select-content.sk-neutral {
+    --sk-menu-color-base: var(--sk-neutral-base);
+    --sk-menu-fg: var(--sk-neutral-text);
+  }
+  .sk-select-content.sk-primary {
+    --sk-menu-color-base: var(--sk-primary-base);
+    --sk-menu-fg: var(--sk-primary-text);
+  }
+  .sk-select-content.sk-accent {
+    --sk-menu-color-base: var(--sk-accent-base);
+    --sk-menu-fg: var(--sk-accent-text);
+  }
+  .sk-select-content.sk-info {
+    --sk-menu-color-base: var(--sk-info-base);
+    --sk-menu-fg: var(--sk-info-text);
+  }
+  .sk-select-content.sk-success {
+    --sk-menu-color-base: var(--sk-success-base);
+    --sk-menu-fg: var(--sk-success-text);
+  }
+  .sk-select-content.sk-warning {
+    --sk-menu-color-base: var(--sk-warning-base);
+    --sk-menu-fg: var(--sk-warning-text);
+  }
+  .sk-select-content.sk-danger {
+    --sk-menu-color-base: var(--sk-danger-base);
+    --sk-menu-fg: var(--sk-danger-text);
+  }
+  .sk-select-content.sk-neon-blue {
+    --sk-menu-color-base: var(--sk-neon-blue-base);
+    --sk-menu-fg: var(--sk-neon-blue-text);
+  }
+  .sk-select-content.sk-neon-purple {
+    --sk-menu-color-base: var(--sk-neon-purple-base);
+    --sk-menu-fg: var(--sk-neon-purple-text);
+  }
+  .sk-select-content.sk-neon-orange {
+    --sk-menu-color-base: var(--sk-neon-orange-base);
+    --sk-menu-fg: var(--sk-neon-orange-text);
+  }
+  .sk-select-content.sk-neon-green {
+    --sk-menu-color-base: var(--sk-neon-green-base);
+    --sk-menu-fg: var(--sk-neon-green-text);
+  }
+  .sk-select-content.sk-neon-mint {
+    --sk-menu-color-base: var(--sk-neon-mint-base);
+    --sk-menu-fg: var(--sk-neon-mint-text);
+  }
+  .sk-select-content.sk-neon-pink {
+    --sk-menu-color-base: var(--sk-neon-pink-base);
+    --sk-menu-fg: var(--sk-neon-pink-text);
+  }
+  .sk-select-content.sk-yellow {
+    --sk-menu-color-base: var(--sk-yellow-base);
+    --sk-menu-fg: var(--sk-yellow-text);
+  }
+  .sk-select-content.sk-red {
+    --sk-menu-color-base: var(--sk-red-base);
+    --sk-menu-fg: var(--sk-red-text);
+  }
+  .sk-select-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--sk-space-md);
+    padding: var(--sk-space-xs) var(--sk-space-md);
+    cursor: pointer;
+    color: color-mix(in oklch, var(--sk-menu-fg), black 15%);
+    font-size: 0.875rem;
+    outline: none;
+    user-select: none;
+  }
+  @supports (corner-shape: bevel) {
+    .sk-select-item {
+      border: var(--sk-border-width-thin) solid transparent;
+      border-top-left-radius: 0.5rem;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0.5rem;
+      border-bottom-left-radius: 0;
+      corner-shape: bevel;
+    }
+  }
+  @supports not (corner-shape: bevel) {
+    .sk-select-item {
+      border: none;
+      clip-path: polygon(0.5rem 0%, 100% 0%, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0% 100%, 0% 0.5rem);
+    }
+    .sk-select-item::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: transparent;
+      z-index: -1;
+      clip-path: polygon(0.5rem 0%, 100% 0%, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0% 100%, 0% 0.5rem, 0.5rem 0%, calc(0.5rem + var(--sk-border-width-thin)) var(--sk-border-width-thin), var(--sk-border-width-thin) calc(0.5rem + var(--sk-border-width-thin)), var(--sk-border-width-thin) calc(100% - var(--sk-border-width-thin)), calc(100% - 0.5rem - var(--sk-border-width-thin)) calc(100% - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) calc(100% - 0.5rem - var(--sk-border-width-thin)), calc(100% - var(--sk-border-width-thin)) var(--sk-border-width-thin), calc(0.5rem + var(--sk-border-width-thin)) var(--sk-border-width-thin));
+    }
+  }
+  .sk-select-item:hover:not([data-disabled]) {
+    background: color-mix(in oklch, color-mix(in oklch, var(--sk-menu-color-base), black 30%), transparent 10%);
+    color: var(--sk-menu-fg);
+  }
+  .sk-select-item[data-highlighted] {
+    background: color-mix(in oklch, color-mix(in oklch, var(--sk-menu-color-base), black 30%), transparent 10%);
+    color: var(--sk-menu-fg);
+    outline: none;
+  }
+  .sk-select-item[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .sk-select-item-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .sk-select-separator {
+    height: 1px;
+    margin: var(--sk-space-xs) 0;
+    background: color-mix(in oklch, var(--sk-menu-color-base), transparent 70%);
+  }
   .sk-sidebar {
     width: var(--sk-sidebar-width, 180px);
     flex-shrink: 0;
+    --sk-sidebar-color-base: var(--sk-neutral-base);
+    --sk-sidebar-item-bg: color-mix(
+        in oklch,
+        color-mix(in oklch, var(--sk-sidebar-color-base) 75%, transparent 25%),
+        #000 46.25%
+    );
+    --sk-sidebar-item-hover-bg: color-mix(in oklch, var(--sk-sidebar-item-bg) 85%, white 15%);
+    --sk-sidebar-item-hover-text: color-mix(in oklch, var(--sk-sidebar-color-base), white 30%);
+    --sk-sidebar-item-active-text: color-mix(in oklch, var(--sk-sidebar-color-base), white 50%);
+    --sk-sidebar-item-active-bg: var(--sk-sidebar-item-bg);
+  }
+  .sk-sidebar.sk-primary {
+    --sk-sidebar-color-base: var(--sk-primary-base);
+  }
+  .sk-sidebar.sk-accent {
+    --sk-sidebar-color-base: var(--sk-accent-base);
+  }
+  .sk-sidebar.sk-info {
+    --sk-sidebar-color-base: var(--sk-info-base);
+  }
+  .sk-sidebar.sk-success {
+    --sk-sidebar-color-base: var(--sk-success-base);
+  }
+  .sk-sidebar.sk-warning {
+    --sk-sidebar-color-base: var(--sk-warning-base);
+  }
+  .sk-sidebar.sk-danger {
+    --sk-sidebar-color-base: var(--sk-danger-base);
   }
   .sk-sidebar .sk-sidebar-nav {
     display: flex;
@@ -7560,6 +7953,7 @@
     margin: 0.5rem 0 0.5rem 0;
   }
   .sk-sidebar-item {
+    position: relative;
     color: var(--sk-neutral-text);
     text-decoration: none;
     padding: 0.5rem 0.75rem;
@@ -7569,16 +7963,32 @@
     display: block;
   }
   .sk-sidebar-item:hover {
-    background: color-mix(in oklch, var(--sk-neutral-base), black 40%);
-    color: var(--sk-accent-base);
+    background: var(--sk-sidebar-item-hover-bg);
+    color: var(--sk-sidebar-item-hover-text);
     clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
   }
   .sk-sidebar-item.sk-active, .sk-sidebar-item.router-link-active {
-    background: color-mix(in oklch, var(--sk-neutral-base), black 40%);
-    color: var(--sk-primary-base);
+    background: var(--sk-sidebar-item-active-bg);
+    color: var(--sk-sidebar-item-active-text);
     font-weight: 600;
     clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
   }
+  .sk-sidebar-item.sk-active::before, .sk-sidebar-item.router-link-active::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--sk-sidebar-color-base);
+    clip-path: polygon(0% 100%, 0px 10px, 10px 0px, 11.41px 1.41px, 2px 10.83px, 2px 100%);
+  }
+  .sk-sidebar-right .sk-sidebar-item:hover {
+    clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 10px, 100% 100%, 10px 100%, 0% calc(100% - 10px));
+  }
+  .sk-sidebar-right .sk-sidebar-item.sk-active, .sk-sidebar-right .sk-sidebar-item.router-link-active {
+    clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 10px, 100% 100%, 10px 100%, 0% calc(100% - 10px));
+  }
+  .sk-sidebar-right .sk-sidebar-item.sk-active::before, .sk-sidebar-right .sk-sidebar-item.router-link-active::before {
+    clip-path: polygon(100% 100%, 100% 10px, calc(100% - 10px) 0px, calc(100% - 11.41px) 1.41px, calc(100% - 2px) 10.83px, calc(100% - 2px) 100%);
+  }
   .sk-skeleton {
     --sk-skeleton-base: oklch(from var(--sk-neutral-base) l c h / 0.12);
     --sk-skeleton-highlight: oklch(from var(--sk-neutral-base) calc(l * 1.3) c h / 0.25);
@@ -12858,6 +13268,6 @@ kbd.sk-neutral {
   padding-bottom: 0.5rem;
 }
 
-@layer reset, tokens, base, components, utilities;.sk-panel[data-v-1a397f27]::after {
-  display: var(--v29b35e9c);
+@layer reset, tokens, base, components, utilities;.sk-panel[data-v-07c1642c]::after {
+  display: var(--v42b18398);
 }