@morscherlab/mint-sdk 1.0.0-alpha.8 → 1.0.0-beta.1

package/src/styles/components/sample-selector.css

@@ -1,6 +1,6 @@
 /* SampleSelector Component Styles - RFA Design */
 
-.mld-sample-selector {
+.mint-sample-selector {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -9,7 +9,7 @@
 }
 
 /* Select All Row */
-.mld-sample-selector__select-all {
+.mint-sample-selector__select-all {
   display: flex;
   align-items: center;
   gap: 0.75rem;
@@ -20,17 +20,17 @@
   transition: background-color 0.15s ease;
 }
 
-.mld-sample-selector__select-all:hover {
+.mint-sample-selector__select-all:hover {
   background-color: var(--bg-hover);
 }
 
-.mld-sample-selector__select-all-label {
+.mint-sample-selector__select-all-label {
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--text-primary);
 }
 
-.mld-sample-selector__select-all-count {
+.mint-sample-selector__select-all-count {
   margin-left: auto;
   font-size: 0.75rem;
   color: var(--text-muted);
@@ -38,7 +38,7 @@
 }
 
 /* Checkboxes */
-.mld-sample-selector__checkbox {
+.mint-sample-selector__checkbox {
   width: 1.25rem;
   height: 1.25rem;
   border-radius: var(--radius-sm);
@@ -47,18 +47,18 @@
   flex-shrink: 0;
 }
 
-.mld-sample-selector__checkbox--small {
+.mint-sample-selector__checkbox--small {
   width: 0.875rem;
   height: 0.875rem;
 }
 
-.mld-sample-selector__checkbox--tiny {
+.mint-sample-selector__checkbox--tiny {
   width: 0.75rem;
   height: 0.75rem;
 }
 
 /* Indeterminate checkbox styling */
-.mld-sample-selector__checkbox:indeterminate {
+.mint-sample-selector__checkbox:indeterminate {
   background-color: currentColor;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
   background-size: 100% 100%;
@@ -67,11 +67,11 @@
 }
 
 /* Action Buttons Row */
-.mld-sample-selector__actions {
+.mint-sample-selector__actions {
   position: relative;
 }
 
-.mld-sample-selector__actions-row {
+.mint-sample-selector__actions-row {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -79,7 +79,7 @@
 }
 
 /* BaseButton overrides for action buttons */
-.mld-sample-selector__action-btn {
+.mint-sample-selector__action-btn {
   flex: 1 1 auto;
   display: flex;
   align-items: center;
@@ -88,20 +88,20 @@
   min-width: 0; /* Allow buttons to shrink below content size */
 }
 
-.mld-sample-selector__action-btn--reset {
+.mint-sample-selector__action-btn--reset {
   flex: 0 0 auto; /* Don't grow or shrink */
   min-width: auto;
   padding: 0.5rem;
 }
 
-.mld-sample-selector__action-icon {
+.mint-sample-selector__action-icon {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
 }
 
 /* Level Popover */
-.mld-sample-selector__popover {
+.mint-sample-selector__popover {
   position: absolute;
   left: 0;
   right: 0;
@@ -115,7 +115,7 @@
   z-index: 50;
 }
 
-.mld-sample-selector__popover-header {
+.mint-sample-selector__popover-header {
   padding: 0.5rem 0.75rem;
   font-size: 0.6875rem;
   font-weight: 600;
@@ -125,11 +125,11 @@
   background-color: var(--bg-secondary);
 }
 
-.mld-sample-selector__popover-body {
+.mint-sample-selector__popover-body {
   padding: 0.25rem 0;
 }
 
-.mld-sample-selector__level-btn {
+.mint-sample-selector__level-btn {
   width: 100%;
   padding: 0.625rem 0.75rem;
   text-align: left;
@@ -139,17 +139,17 @@
   transition: background-color 0.15s ease;
 }
 
-.mld-sample-selector__level-btn:hover {
+.mint-sample-selector__level-btn:hover {
   background-color: var(--bg-hover);
 }
 
-.mld-sample-selector__level-info {
+.mint-sample-selector__level-info {
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
 }
 
-.mld-sample-selector__level-title {
+.mint-sample-selector__level-title {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -158,7 +158,7 @@
   color: var(--text-primary);
 }
 
-.mld-sample-selector__level-badge {
+.mint-sample-selector__level-badge {
   font-size: 0.6875rem;
   padding: 0.125rem 0.375rem;
   background-color: var(--color-primary);
@@ -167,22 +167,22 @@
   font-variant-numeric: tabular-nums;
 }
 
-.mld-sample-selector__level-desc {
+.mint-sample-selector__level-desc {
   font-size: 0.75rem;
   color: var(--text-muted);
 }
 
-.mld-sample-selector__level-example {
+.mint-sample-selector__level-example {
   margin-left: 0.25rem;
 }
 
-.mld-sample-selector__level-example code {
+.mint-sample-selector__level-example code {
   font-family: 'Fira Code', monospace;
   font-size: 0.6875rem;
 }
 
 /* Grouped View */
-.mld-sample-selector__grouped {
+.mint-sample-selector__grouped {
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -190,25 +190,25 @@
   gap: 0.5rem;
 }
 
-.mld-sample-selector__groups-header {
+.mint-sample-selector__groups-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.mld-sample-selector__groups-title {
+.mint-sample-selector__groups-title {
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--text-primary);
 }
 
-.mld-sample-selector__groups-controls {
+.mint-sample-selector__groups-controls {
   display: flex;
   align-items: center;
   gap: 0.25rem;
 }
 
-.mld-sample-selector__expand-btn {
+.mint-sample-selector__expand-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -221,45 +221,45 @@
   transition: background-color 0.15s ease;
 }
 
-.mld-sample-selector__expand-btn:hover {
+.mint-sample-selector__expand-btn:hover {
   background-color: var(--bg-hover);
 }
 
-.mld-sample-selector__expand-icon {
+.mint-sample-selector__expand-icon {
   width: 0.875rem;
   height: 0.875rem;
 }
 
 /* Shared scrollbar styles */
-.mld-sample-selector__tree,
-.mld-sample-selector__flat-list {
+.mint-sample-selector__tree,
+.mint-sample-selector__flat-list {
   scrollbar-width: thin;
   scrollbar-color: var(--scrollbar-thumb) transparent;
 }
 
-.mld-sample-selector__tree::-webkit-scrollbar,
-.mld-sample-selector__flat-list::-webkit-scrollbar {
+.mint-sample-selector__tree::-webkit-scrollbar,
+.mint-sample-selector__flat-list::-webkit-scrollbar {
   width: 6px;
 }
 
-.mld-sample-selector__tree::-webkit-scrollbar-track,
-.mld-sample-selector__flat-list::-webkit-scrollbar-track {
+.mint-sample-selector__tree::-webkit-scrollbar-track,
+.mint-sample-selector__flat-list::-webkit-scrollbar-track {
   background: transparent;
 }
 
-.mld-sample-selector__tree::-webkit-scrollbar-thumb,
-.mld-sample-selector__flat-list::-webkit-scrollbar-thumb {
+.mint-sample-selector__tree::-webkit-scrollbar-thumb,
+.mint-sample-selector__flat-list::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
   border-radius: 3px;
 }
 
-.mld-sample-selector__tree::-webkit-scrollbar-thumb:hover,
-.mld-sample-selector__flat-list::-webkit-scrollbar-thumb:hover {
+.mint-sample-selector__tree::-webkit-scrollbar-thumb:hover,
+.mint-sample-selector__flat-list::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-hover);
 }
 
 /* Tree View */
-.mld-sample-selector__tree {
+.mint-sample-selector__tree {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
@@ -267,11 +267,11 @@
 }
 
 /* Major Group */
-.mld-sample-selector__major-group {
+.mint-sample-selector__major-group {
   margin-bottom: 0.25rem;
 }
 
-.mld-sample-selector__major-header {
+.mint-sample-selector__major-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -281,19 +281,19 @@
   transition: background-color 0.15s ease, box-shadow 0.12s ease, opacity 0.12s ease;
 }
 
-.mld-sample-selector__major-header:active {
+.mint-sample-selector__major-header:active {
   cursor: grabbing;
 }
 
-.mld-sample-selector__major-header:hover {
+.mint-sample-selector__major-header:hover {
   background-color: var(--bg-hover);
 }
 
-.mld-sample-selector__major-header:hover .mld-sample-selector__delete-btn--hidden {
+.mint-sample-selector__major-header:hover .mint-sample-selector__delete-btn--hidden {
   opacity: 1;
 }
 
-.mld-sample-selector__major-name {
+.mint-sample-selector__major-name {
   flex: 1;
   min-width: 0;
   font-size: 0.875rem;
@@ -305,7 +305,7 @@
 }
 
 /* Chevron */
-.mld-sample-selector__chevron {
+.mint-sample-selector__chevron {
   width: 0.875rem;
   height: 0.875rem;
   color: var(--text-muted);
@@ -313,17 +313,17 @@
   transition: transform 0.2s ease;
 }
 
-.mld-sample-selector__chevron--small {
+.mint-sample-selector__chevron--small {
   width: 0.75rem;
   height: 0.75rem;
 }
 
-.mld-sample-selector__chevron--open {
+.mint-sample-selector__chevron--open {
   transform: rotate(90deg);
 }
 
 /* Color Dot */
-.mld-sample-selector__color-dot {
+.mint-sample-selector__color-dot {
   width: 0.625rem;
   height: 0.625rem;
   border-radius: 50%;
@@ -331,12 +331,12 @@
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
-.mld-sample-selector__color-dot--large {
+.mint-sample-selector__color-dot--large {
   width: 0.75rem;
   height: 0.75rem;
 }
 
-.mld-sample-selector__color-dot--clickable {
+.mint-sample-selector__color-dot--clickable {
   cursor: pointer;
   transition: transform 0.15s ease;
   border: none;
@@ -344,13 +344,13 @@
   background: none;
 }
 
-.mld-sample-selector__color-dot--clickable:hover {
+.mint-sample-selector__color-dot--clickable:hover {
   transform: scale(1.25);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(0, 0, 0, 0.06);
 }
 
 /* Count Badge */
-.mld-sample-selector__count-badge {
+.mint-sample-selector__count-badge {
   font-size: 0.625rem;
   font-weight: 600;
   padding: 0.125rem 0.375rem;
@@ -358,13 +358,13 @@
   font-variant-numeric: tabular-nums;
 }
 
-.mld-sample-selector__count-badge--small {
+.mint-sample-selector__count-badge--small {
   font-size: 0.5625rem;
   padding: 0.0625rem 0.3125rem;
 }
 
 /* Delete Button */
-.mld-sample-selector__delete-btn {
+.mint-sample-selector__delete-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -377,39 +377,39 @@
   transition: all 0.15s ease;
 }
 
-.mld-sample-selector__delete-btn:hover {
+.mint-sample-selector__delete-btn:hover {
   background-color: var(--mint-error-bg);
   color: var(--mint-error);
 }
 
-.mld-sample-selector__delete-btn--hidden {
+.mint-sample-selector__delete-btn--hidden {
   opacity: 0;
 }
 
-.mld-sample-selector__delete-btn svg {
+.mint-sample-selector__delete-btn svg {
   width: 0.875rem;
   height: 0.875rem;
 }
 
 /* Sub Groups */
-.mld-sample-selector__sub-groups {
+.mint-sample-selector__sub-groups {
   margin-left: 1rem;
   padding-left: 0.75rem;
   border-left: 2px solid;
 }
 
-.mld-sample-selector__sub-group {
+.mint-sample-selector__sub-group {
   margin-bottom: 0.125rem;
   border-radius: var(--radius);
   transition: background-color 0.15s ease, box-shadow 0.15s ease;
 }
 
-.mld-sample-selector__sub-group--drag-over {
+.mint-sample-selector__sub-group--drag-over {
   background-color: var(--color-primary-soft);
   box-shadow: inset 0 0 0 2px var(--color-primary);
 }
 
-.mld-sample-selector__sub-header {
+.mint-sample-selector__sub-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -419,19 +419,19 @@
   transition: background-color 0.15s ease, box-shadow 0.12s ease, opacity 0.12s ease;
 }
 
-.mld-sample-selector__sub-header:active {
+.mint-sample-selector__sub-header:active {
   cursor: grabbing;
 }
 
-.mld-sample-selector__sub-header:hover {
+.mint-sample-selector__sub-header:hover {
   background-color: var(--bg-hover);
 }
 
-.mld-sample-selector__sub-header:hover .mld-sample-selector__delete-btn--hidden {
+.mint-sample-selector__sub-header:hover .mint-sample-selector__delete-btn--hidden {
   opacity: 1;
 }
 
-.mld-sample-selector__sub-name {
+.mint-sample-selector__sub-name {
   flex: 1;
   min-width: 0;
   font-size: 0.875rem;
@@ -443,13 +443,13 @@
 }
 
 /* Samples */
-.mld-sample-selector__samples {
+.mint-sample-selector__samples {
   margin-left: 1rem;
   padding-left: 0.75rem;
   border-left: 2px solid;
 }
 
-.mld-sample-selector__sample {
+.mint-sample-selector__sample {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -459,25 +459,25 @@
   cursor: grab;
 }
 
-.mld-sample-selector__sample:hover {
+.mint-sample-selector__sample:hover {
   background-color: var(--bg-hover);
 }
 
-.mld-sample-selector__sample:hover .mld-sample-selector__remove-btn {
+.mint-sample-selector__sample:hover .mint-sample-selector__remove-btn {
   opacity: 1;
 }
 
-.mld-sample-selector__sample:hover .mld-sample-selector__drag-handle {
+.mint-sample-selector__sample:hover .mint-sample-selector__drag-handle {
   opacity: 1;
 }
 
-.mld-sample-selector__sample--dragging {
+.mint-sample-selector__sample--dragging {
   opacity: 0.5;
   cursor: grabbing;
 }
 
 /* Drag Handle */
-.mld-sample-selector__drag-handle {
+.mint-sample-selector__drag-handle {
   width: 0.875rem;
   height: 0.875rem;
   flex-shrink: 0;
@@ -487,7 +487,7 @@
   cursor: grab;
 }
 
-.mld-sample-selector__sample-name {
+.mint-sample-selector__sample-name {
   flex: 1;
   min-width: 0;
   font-size: 0.75rem;
@@ -498,7 +498,7 @@
   text-overflow: ellipsis;
 }
 
-.mld-sample-selector__remove-btn {
+.mint-sample-selector__remove-btn {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -512,18 +512,18 @@
   transition: all 0.15s ease;
 }
 
-.mld-sample-selector__remove-btn:hover {
+.mint-sample-selector__remove-btn:hover {
   background-color: var(--mint-warning-bg);
   color: var(--mint-warning);
 }
 
-.mld-sample-selector__remove-btn svg {
+.mint-sample-selector__remove-btn svg {
   width: 0.625rem;
   height: 0.625rem;
 }
 
 /* Empty State */
-.mld-sample-selector__empty {
+.mint-sample-selector__empty {
   text-align: center;
   padding: 1rem;
   font-size: 0.875rem;
@@ -531,13 +531,13 @@
 }
 
 /* Ungrouped Section */
-.mld-sample-selector__ungrouped {
+.mint-sample-selector__ungrouped {
   margin-top: 0.75rem;
   padding-top: 0.75rem;
   border-top: 1px solid var(--border-color);
 }
 
-.mld-sample-selector__ungrouped-header {
+.mint-sample-selector__ungrouped-header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -547,18 +547,18 @@
   transition: background-color 0.15s ease;
 }
 
-.mld-sample-selector__ungrouped-header:hover {
+.mint-sample-selector__ungrouped-header:hover {
   background-color: var(--bg-hover);
 }
 
-.mld-sample-selector__ungrouped-label {
+.mint-sample-selector__ungrouped-label {
   flex: 1;
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--text-muted);
 }
 
-.mld-sample-selector__ungrouped-count {
+.mint-sample-selector__ungrouped-count {
   font-size: 0.625rem;
   padding: 0.125rem 0.375rem;
   background-color: var(--bg-tertiary);
@@ -567,31 +567,31 @@
   font-variant-numeric: tabular-nums;
 }
 
-.mld-sample-selector__ungrouped-list {
+.mint-sample-selector__ungrouped-list {
   margin-left: 1.25rem;
   padding-left: 0.75rem;
   border-left: 2px solid var(--border-color);
 }
 
 /* New Group Input */
-.mld-sample-selector__new-group {
+.mint-sample-selector__new-group {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-top: 0.5rem;
 }
 
-.mld-sample-selector__new-group-input {
+.mint-sample-selector__new-group-input {
   flex: 1;
   min-width: 0;
 }
 
-.mld-sample-selector__new-group-btn {
+.mint-sample-selector__new-group-btn {
   flex-shrink: 0;
 }
 
 /* Hidden color input */
-.mld-sample-selector__color-input {
+.mint-sample-selector__color-input {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -604,7 +604,7 @@
 }
 
 /* Flat View */
-.mld-sample-selector__flat {
+.mint-sample-selector__flat {
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -612,11 +612,11 @@
   gap: 0.5rem;
 }
 
-.mld-sample-selector__search {
+.mint-sample-selector__search {
   position: relative;
 }
 
-.mld-sample-selector__search-icon {
+.mint-sample-selector__search-icon {
   position: absolute;
   left: 0.75rem;
   top: 50%;
@@ -627,7 +627,7 @@
   pointer-events: none;
 }
 
-.mld-sample-selector__search-input {
+.mint-sample-selector__search-input {
   width: 100%;
   box-sizing: border-box;
   padding: 0.5rem 0.75rem 0.5rem 2.25rem;
@@ -640,23 +640,23 @@
   transition: border-color 0.15s ease;
 }
 
-.mld-sample-selector__search-input:focus-visible {
+.mint-sample-selector__search-input:focus-visible {
   box-shadow: var(--focus-ring);
   border-color: var(--color-primary);
 }
 
-.mld-sample-selector__search-input::placeholder {
+.mint-sample-selector__search-input::placeholder {
   color: var(--text-muted);
 }
 
-.mld-sample-selector__flat-list {
+.mint-sample-selector__flat-list {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   padding-right: 0.25rem;
 }
 
-.mld-sample-selector__flat-item {
+.mint-sample-selector__flat-item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -665,11 +665,11 @@
   transition: background-color 0.15s ease;
 }
 
-.mld-sample-selector__flat-item:hover {
+.mint-sample-selector__flat-item:hover {
   background-color: var(--bg-hover);
 }
 
-.mld-sample-selector__flat-name {
+.mint-sample-selector__flat-name {
   flex: 1;
   min-width: 0;
   font-size: 0.875rem;
@@ -680,72 +680,72 @@
 }
 
 /* Transitions */
-.mld-popover-enter-active {
+.mint-popover-enter-active {
   transition: all 0.15s ease-out;
 }
 
-.mld-popover-leave-active {
+.mint-popover-leave-active {
   transition: all 0.1s ease-in;
 }
 
-.mld-popover-enter-from,
-.mld-popover-leave-to {
+.mint-popover-enter-from,
+.mint-popover-leave-to {
   opacity: 0;
   transform: translateY(-0.25rem);
 }
 
-.mld-collapse-enter-active {
+.mint-collapse-enter-active {
   transition: all 0.2s ease-out;
   overflow: hidden;
 }
 
-.mld-collapse-leave-active {
+.mint-collapse-leave-active {
   transition: all 0.15s ease-in;
   overflow: hidden;
 }
 
-.mld-collapse-enter-from,
-.mld-collapse-leave-to {
+.mint-collapse-enter-from,
+.mint-collapse-leave-to {
   opacity: 0;
   max-height: 0;
 }
 
-.mld-collapse-enter-to,
-.mld-collapse-leave-from {
+.mint-collapse-enter-to,
+.mint-collapse-leave-from {
   opacity: 1;
   max-height: 500px;
 }
 
 /* Group reorder: source row + drop indicators */
-.mld-sample-selector__header--dragging {
+.mint-sample-selector__header--dragging {
   opacity: 0.5;
   cursor: grabbing;
 }
 
-.mld-sample-selector__header--drag-over-before {
+.mint-sample-selector__header--drag-over-before {
   box-shadow: inset 0 2px 0 0 var(--color-primary);
 }
 
-.mld-sample-selector__header--drag-over-after {
+.mint-sample-selector__header--drag-over-after {
   box-shadow: inset 0 -2px 0 0 var(--color-primary);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .mld-sample-selector__chevron {
+  .mint-sample-selector__chevron {
     transition: none;
   }
 
-  .mld-sample-selector__color-dot--clickable {
+  .mint-sample-selector__color-dot--clickable {
     transition: none;
   }
 
-  .mld-sample-selector__major-header,
-  .mld-sample-selector__sub-header {
+  .mint-sample-selector__major-header,
+  .mint-sample-selector__sub-header {
     transition: none;
   }
 
-  .mld-collapse-enter-active,
-  .mld-collapse-leave-active {
+  .mint-collapse-enter-active,
+  .mint-collapse-leave-active {
     transition: none;
   }
 }