@3dsource/source-ui-native 1.0.8 → 1.0.11

package/README.md

@@ -15,7 +15,7 @@
 #### import needed styles in your main styles file
 
 ```scss
-  @use '../node_modules/@3dsource/source-ui-native/styles/source.ui.native.scss'
+@use '../node_modules/@3dsource/source-ui-native/styles/source.ui.native.scss';
 ```
 
 _List of native ui elements_

package/package.json

@@ -1,11 +1,6 @@
 {
   "name": "@3dsource/source-ui-native",
-  "version": "1.0.8",
-  "license": "UNLICENSED",
-  "sideEffects": false,
-  "dependencies": {
-    "tslib": "^2.8.1"
-  },
+  "version": "1.0.11",
   "description": "A bunch of native ui elements",
   "keywords": [
     "3dsource",
@@ -17,7 +12,12 @@
     "type": "git",
     "url": "private"
   },
+  "license": "UNLICENSED",
   "author": "3dsource",
+  "sideEffects": false,
+  "dependencies": {
+    "tslib": "^2.8.1"
+  },
   "engines": {
     "node": ">=20",
     "npm": ">9"

package/styles/base.scss

@@ -1,5 +1,5 @@
 // SourceUI Global Styles: base.scss
-// TODO: get rid of tags, subscitute them with classes
+// TODO: get rid of tags, substitute them with classes
 
 .section_3dsourcecom,
 .cdk-overlay-container {

package/styles/elements/_src-button.scss

@@ -54,8 +54,10 @@
   }
 
   &:disabled,
-  &[disabled],
-  &.disabled {
+  &[disabled] {
+    --srcButtonBgColor: var(--src-color-bg-default-disabled);
+    --srcButtonBoxShadow: none;
+    --srcButtonFontColor: var(--src-color-text-default-disabled);
     cursor: default;
     pointer-events: none;
   }
@@ -101,17 +103,6 @@
     }
   }
 
-  &--secondary {
-    --srcButtonFontColor: var(--src-color-text-default);
-
-    &:disabled,
-    &[disabled] {
-      --srcButtonBgColor: var(--src-color-bg-default-disabled);
-      --srcButtonBoxShadow: none;
-      --srcButtonFontColor: var(--src-color-text-default-disabled);
-    }
-  }
-
   &--destructive {
     --srcButtonBgColor: var(--src-color-bg-critical);
     --srcButtonBgHoverColor: var(--src-color-bg-critical-strong);

package/styles/elements/_src-form.scss

@@ -7,6 +7,16 @@
   gap: var(--srcFormRowGap);
 }
 
+.src-form__row-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+
+  .src-form__row + .src-form__row {
+    margin-top: var(--srcFormRowGap);
+  }
+}
+
 .src-form__row {
   display: grid;
   gap: var(--srcFormItemsGap);
@@ -20,3 +30,16 @@
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
+
+.src-form__item {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.src-form__button-row {
+  display: flex;
+  gap: var(--srcFormItemsGap);
+  justify-content: flex-end;
+  align-items: center;
+}

package/styles/elements/_src-list.scss

@@ -6,7 +6,6 @@
   padding: 8px;
 
   .src-list__item {
-    display: block;
     margin-bottom: 4px;
   }
 
@@ -19,7 +18,6 @@
   }
 }
 
-// source-list-item.component.scss
 .src-list__item {
   --srcListItemBgColor: var(--src-color-bg-default);
   --srcListItemBgHoverColor: var(--src-color-bg-default-hover);
@@ -31,16 +29,15 @@
   --srcListItemLineHeight: var(--src-lh-base);
   --srcListItemPaddings: 8px;
   --srcListItemTextTransform: default;
-  --srcListItemIconColor: var(--src-color-icon-default);
+  --srcListItemDisplay: block;
   position: relative;
-  align-items: flex-start;
+  display: var(--srcListItemDisplay);
   width: 100%;
   padding: var(--srcListItemPaddings);
-  font-weight: var(--srcListItemFontWeight);
-  display: inline-flex;
-  font-size: var(--srcListItemFontSize);
-  line-height: var(--srcListItemLineHeight);
   text-align: left;
+  line-height: var(--srcListItemLineHeight);
+  font-size: var(--srcListItemFontSize);
+  font-weight: var(--srcListItemFontWeight);
   color: var(--srcListItemFontColor);
   text-transform: var(--srcListItemTextTransform);
   letter-spacing: 0;
@@ -50,6 +47,11 @@
   cursor: pointer;
   word-break: break-word;
 
+  &--flex {
+    --srcListItemDisplay: inline-flex;
+    align-items: flex-start;
+    gap: 8px;
+  }
   @media (hover: hover) and (pointer: fine) {
     &:hover,
     &:focus-visible {
@@ -64,14 +66,12 @@
     cursor: default;
     pointer-events: none;
     --srcListItemFontColor: var(--src-color-text-default-disabled);
-    --srcListItemIconColor: var(--src-color-icon-default-disabled);
     background-color: var(--src-color-bg-default);
   }
 }
 
 .src-list__item--selected {
   --srcListItemBgColor: var(--src-color-bg-default-active);
-  --srcListItemIconColor: var(--src-color-icon-primary);
 
   @media (hover: hover) and (pointer: fine) {
     &:hover,
@@ -80,3 +80,9 @@
     }
   }
 }
+
+.src-list__item--destructive {
+  --srcListItemBgColor: transparent;
+  --srcListItemBgHoverColor: var(--src-color-bg-critical-subdued);
+  --srcListItemFontColor: var(--src-color-text-critical);
+}

package/styles/utils.scss

@@ -1,4 +1,4 @@
-// SourceUI Global Styles: utils.scss
+// SourceUI Global Styles: helpers.scss
 // Use only prefixed classes
 .section_3dsourcecom,
 .cdk-overlay-container {