@nordcode/ui 2.0.2 → 2.0.4

package/.idea/copilot.data.migration.agent.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AgentMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

package/.idea/copilot.data.migration.ask.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AskMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

package/.idea/copilot.data.migration.ask2agent.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Ask2AgentMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

package/.idea/copilot.data.migration.edit.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EditMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/ui.iml" filepath="$PROJECT_DIR$/.idea/ui.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/ui.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/../.." vcs="Git" />
+  </component>
+</project>

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 2.0.4 (2025-10-05)
+
+### improvements
+
+-tweaks to css reset
+
+## 2.0.3 (2025-09-11)
+
+### improvements
+
+- add :active state to buttons
+- use more accessbile emhpasis color for selections
+
+### removals
+
+- remove unused .buttonReset class
+
 ## 2.0.2 (2025-05-10)
 
 ### improvements

package/out/bundle.css

@@ -352,6 +352,8 @@
     font-kerning: normal;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
+    hanging-punctuation: first allow-end last;
+    word-break: break-word;
   }
 
   :where(body) {
@@ -415,9 +417,19 @@
     letter-spacing: inherit;
   }
 
-  :where(html):has(dialog:modal) {
-    scrollbar-gutter: stable;
-    overflow: hidden;
+  :where(html) {
+    overflow-y: scroll;
+  }
+
+  @supports (scrollbar-gutter: stable) {
+    :where(html) {
+      scrollbar-gutter: stable;
+      overflow-y: auto;
+    }
+  }
+
+  :where(pre) {
+    white-space: pre-wrap;
   }
 }
 
@@ -617,12 +629,12 @@
 
   ::selection {
     background-color: var(--color-brand-primary-base);
-    color: var(--color-surface-base);
+    color: var(--color-brand-primary-emphasis);
   }
 
   ::target-text {
     background-color: var(--color-brand-primary-base);
-    color: var(--color-surface-base);
+    color: var(--color-brand-primary-emphasis);
   }
 
   :where(a, .nc-link) {

package/out/bundle_configless.css

@@ -134,6 +134,8 @@
     font-kerning: normal;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
+    hanging-punctuation: first allow-end last;
+    word-break: break-word;
   }
 
   :where(body) {
@@ -197,9 +199,19 @@
     letter-spacing: inherit;
   }
 
-  :where(html):has(dialog:modal) {
-    scrollbar-gutter: stable;
-    overflow: hidden;
+  :where(html) {
+    overflow-y: scroll;
+  }
+
+  @supports (scrollbar-gutter: stable) {
+    :where(html) {
+      scrollbar-gutter: stable;
+      overflow-y: auto;
+    }
+  }
+
+  :where(pre) {
+    white-space: pre-wrap;
   }
 }
 
@@ -399,12 +411,12 @@
 
   ::selection {
     background-color: var(--color-brand-primary-base);
-    color: var(--color-surface-base);
+    color: var(--color-brand-primary-emphasis);
   }
 
   ::target-text {
     background-color: var(--color-brand-primary-base);
-    color: var(--color-surface-base);
+    color: var(--color-brand-primary-emphasis);
   }
 
   :where(a, .nc-link) {

package/out/complete.css

@@ -352,6 +352,8 @@
     font-kerning: normal;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
+    hanging-punctuation: first allow-end last;
+    word-break: break-word;
   }
 
   :where(body) {
@@ -415,9 +417,19 @@
     letter-spacing: inherit;
   }
 
-  :where(html):has(dialog:modal) {
-    scrollbar-gutter: stable;
-    overflow: hidden;
+  :where(html) {
+    overflow-y: scroll;
+  }
+
+  @supports (scrollbar-gutter: stable) {
+    :where(html) {
+      scrollbar-gutter: stable;
+      overflow-y: auto;
+    }
+  }
+
+  :where(pre) {
+    white-space: pre-wrap;
   }
 }
 
@@ -617,12 +629,12 @@
 
   ::selection {
     background-color: var(--color-brand-primary-base);
-    color: var(--color-surface-base);
+    color: var(--color-brand-primary-emphasis);
   }
 
   ::target-text {
     background-color: var(--color-brand-primary-base);
-    color: var(--color-surface-base);
+    color: var(--color-brand-primary-emphasis);
   }
 
   :where(a, .nc-link) {
@@ -1514,12 +1526,6 @@
 }
 
 @layer components.buttons {
-  .buttonReset {
-    background: none;
-    border: none;
-    padding: 0;
-  }
-
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), input[type="file"]:not([class]), .nc-button) {
     --_button-background: var(--button-background, var(--surface-hover));
     --_button-color: var(--button-color, var(--text-hover));
@@ -1551,6 +1557,7 @@
     box-shadow: var(--_button-box-shadow);
     -webkit-user-select: none;
     user-select: none;
+    text-box: cap alphabetic;
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
     line-height: var(--line-height-base);
@@ -1575,8 +1582,14 @@
     transform: none;
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button):active {
+  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button):is(:active, .-active) {
+    background-color: var(--_button-background-hover);
+    color: var(--_button-color-hover);
+    border-color: var(--_button-border-color-hover);
     box-shadow: none;
+    filter: contrast(1.2) saturate(1.1);
+    -webkit-backdrop-filter: contrast(2);
+    backdrop-filter: contrast(2);
     transform: none;
   }
 
@@ -1593,14 +1606,6 @@
     transform: none !important;
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-active {
-    background-color: var(--_button-background-hover);
-    color: var(--_button-color-hover);
-    border-color: var(--_button-border-color-hover);
-    box-shadow: none;
-    transform: none;
-  }
-
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-outline {
     color: var(--text);
     border-color: var(--border);
@@ -1617,8 +1622,6 @@
     color: var(--text);
     background-color: #0000;
     border-color: #0000;
-    box-shadow: none !important;
-    transform: none !important;
   }
 
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-stealth:hover {
@@ -1627,6 +1630,11 @@
     border-color: #0000;
   }
 
+  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-stealth {
+    box-shadow: none !important;
+    transform: none !important;
+  }
+
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-small {
     --_button-padding-inline: var(--control-spacing-near, .5em);
     min-block-size: var(--control-height-small);
@@ -1753,6 +1761,20 @@
     --_card-padding-inline: var(--card-padding-inline, var(--spacing-base));
     --_card-padding-block: var(--card-padding-block, var(--spacing-far));
     --_card-border-radius: var(--card-border-radius, var(--border-radius-large));
+  }
+
+  :where(.nc-card)[data-size="xs"] {
+    --_card-padding-inline: var(--card-padding-inline, var(--spacing-nearest));
+    --_card-padding-block: var(--card-padding-block, var(--spacing-near));
+    --_card-border-radius: var(--card-border-radius, var(--border-radius-medium));
+  }
+
+  :where(.nc-card)[data-size="sm"] {
+    --_card-padding-inline: var(--card-padding-inline, var(--spacing-near));
+    --_card-padding-block: var(--card-padding-block, var(--spacing-base));
+  }
+
+  :where(.nc-card) {
     box-sizing: border-box;
     inline-size: 100%;
     padding-inline: var(--_card-padding-inline);
@@ -1768,24 +1790,13 @@
     overflow: hidden;
   }
 
-  :where(.nc-card)[data-size="xs"] {
-    --_card-padding-inline: var(--card-padding-inline, var(--spacing-nearest));
-    --_card-padding-block: var(--card-padding-block, var(--spacing-near));
-    --_card-border-radius: var(--card-border-radius, var(--border-radius-medium));
-  }
-
-  :where(.nc-card)[data-size="sm"] {
-    --_card-padding-inline: var(--card-padding-inline, var(--spacing-near));
-    --_card-padding-block: var(--card-padding-block, var(--spacing-base));
-  }
-
-  @media (min-width: 480px) {
+  @media (width >= 480px) {
     :where(.nc-card) {
       --_card-padding-inline: var(--card-padding-inline, var(--spacing-far));
     }
   }
 
-  @media (min-width: 1024px) {
+  @media (width >= 1024px) {
     :where(.nc-card) {
       --_card-padding-inline: var(--card-padding-inline, var(--spacing-farthest));
     }
@@ -1857,7 +1868,7 @@
     overflow: clip;
   }
 
-  @media (min-width: 36rem) {
+  @media (width >= 36rem) {
     :where(.nc-dialog) {
       --_dialog-radius: var(--dialog-radius, var(--border-radius-medium));
       inline-size: calc(100dvw - 2 * var(--_dialog-layout-padding));
@@ -2192,7 +2203,7 @@
   }
 
   :where(textarea:not([class]), .nc-textarea) {
-    min-block-size: calc(5lh + 2 * var(--_input-padding-block));
+    min-block-size: calc(8lh + 2 * var(--_input-padding-block));
     max-block-size: 80svh;
     min-inline-size: var(--input-inline-size, 100%);
     max-inline-size: 100%;

package/out/complete_configless.css

@@ -134,6 +134,8 @@
     font-kerning: normal;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
+    hanging-punctuation: first allow-end last;
+    word-break: break-word;
   }
 
   :where(body) {
@@ -197,9 +199,19 @@
     letter-spacing: inherit;
   }
 
-  :where(html):has(dialog:modal) {
-    scrollbar-gutter: stable;
-    overflow: hidden;
+  :where(html) {
+    overflow-y: scroll;
+  }
+
+  @supports (scrollbar-gutter: stable) {
+    :where(html) {
+      scrollbar-gutter: stable;
+      overflow-y: auto;
+    }
+  }
+
+  :where(pre) {
+    white-space: pre-wrap;
   }
 }
 
@@ -399,12 +411,12 @@
 
   ::selection {
     background-color: var(--color-brand-primary-base);
-    color: var(--color-surface-base);
+    color: var(--color-brand-primary-emphasis);
   }
 
   ::target-text {
     background-color: var(--color-brand-primary-base);
-    color: var(--color-surface-base);
+    color: var(--color-brand-primary-emphasis);
   }
 
   :where(a, .nc-link) {
@@ -1296,12 +1308,6 @@
 }
 
 @layer components.buttons {
-  .buttonReset {
-    background: none;
-    border: none;
-    padding: 0;
-  }
-
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), input[type="file"]:not([class]), .nc-button) {
     --_button-background: var(--button-background, var(--surface-hover));
     --_button-color: var(--button-color, var(--text-hover));
@@ -1333,6 +1339,7 @@
     box-shadow: var(--_button-box-shadow);
     -webkit-user-select: none;
     user-select: none;
+    text-box: cap alphabetic;
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
     line-height: var(--line-height-base);
@@ -1357,8 +1364,14 @@
     transform: none;
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button):active {
+  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button):is(:active, .-active) {
+    background-color: var(--_button-background-hover);
+    color: var(--_button-color-hover);
+    border-color: var(--_button-border-color-hover);
     box-shadow: none;
+    filter: contrast(1.2) saturate(1.1);
+    -webkit-backdrop-filter: contrast(2);
+    backdrop-filter: contrast(2);
     transform: none;
   }
 
@@ -1375,14 +1388,6 @@
     transform: none !important;
   }
 
-  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-active {
-    background-color: var(--_button-background-hover);
-    color: var(--_button-color-hover);
-    border-color: var(--_button-border-color-hover);
-    box-shadow: none;
-    transform: none;
-  }
-
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-outline {
     color: var(--text);
     border-color: var(--border);
@@ -1399,8 +1404,6 @@
     color: var(--text);
     background-color: #0000;
     border-color: #0000;
-    box-shadow: none !important;
-    transform: none !important;
   }
 
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-stealth:hover {
@@ -1409,6 +1412,11 @@
     border-color: #0000;
   }
 
+  :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-stealth {
+    box-shadow: none !important;
+    transform: none !important;
+  }
+
   :where(button:not([class]), button[type]:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), .nc-button).-small {
     --_button-padding-inline: var(--control-spacing-near, .5em);
     min-block-size: var(--control-height-small);
@@ -1535,6 +1543,20 @@
     --_card-padding-inline: var(--card-padding-inline, var(--spacing-base));
     --_card-padding-block: var(--card-padding-block, var(--spacing-far));
     --_card-border-radius: var(--card-border-radius, var(--border-radius-large));
+  }
+
+  :where(.nc-card)[data-size="xs"] {
+    --_card-padding-inline: var(--card-padding-inline, var(--spacing-nearest));
+    --_card-padding-block: var(--card-padding-block, var(--spacing-near));
+    --_card-border-radius: var(--card-border-radius, var(--border-radius-medium));
+  }
+
+  :where(.nc-card)[data-size="sm"] {
+    --_card-padding-inline: var(--card-padding-inline, var(--spacing-near));
+    --_card-padding-block: var(--card-padding-block, var(--spacing-base));
+  }
+
+  :where(.nc-card) {
     box-sizing: border-box;
     inline-size: 100%;
     padding-inline: var(--_card-padding-inline);
@@ -1550,24 +1572,13 @@
     overflow: hidden;
   }
 
-  :where(.nc-card)[data-size="xs"] {
-    --_card-padding-inline: var(--card-padding-inline, var(--spacing-nearest));
-    --_card-padding-block: var(--card-padding-block, var(--spacing-near));
-    --_card-border-radius: var(--card-border-radius, var(--border-radius-medium));
-  }
-
-  :where(.nc-card)[data-size="sm"] {
-    --_card-padding-inline: var(--card-padding-inline, var(--spacing-near));
-    --_card-padding-block: var(--card-padding-block, var(--spacing-base));
-  }
-
-  @media (min-width: 480px) {
+  @media (width >= 480px) {
     :where(.nc-card) {
       --_card-padding-inline: var(--card-padding-inline, var(--spacing-far));
     }
   }
 
-  @media (min-width: 1024px) {
+  @media (width >= 1024px) {
     :where(.nc-card) {
       --_card-padding-inline: var(--card-padding-inline, var(--spacing-farthest));
     }
@@ -1639,7 +1650,7 @@
     overflow: clip;
   }
 
-  @media (min-width: 36rem) {
+  @media (width >= 36rem) {
     :where(.nc-dialog) {
       --_dialog-radius: var(--dialog-radius, var(--border-radius-medium));
       inline-size: calc(100dvw - 2 * var(--_dialog-layout-padding));
@@ -1974,7 +1985,7 @@
   }
 
   :where(textarea:not([class]), .nc-textarea) {
-    min-block-size: calc(5lh + 2 * var(--_input-padding-block));
+    min-block-size: calc(8lh + 2 * var(--_input-padding-block));
     max-block-size: 80svh;
     min-inline-size: var(--input-inline-size, 100%);
     max-inline-size: 100%;

package/package.json

@@ -12,7 +12,7 @@
     "type": "git",
     "url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
   },
-  "version": "2.0.2",
+  "version": "2.0.4",
   "publishConfig": {
     "access": "public"
   },

package/src/styles/components/buttons.css

@@ -1,10 +1,4 @@
 @layer components.buttons {
-    .buttonReset {
-        padding: 0;
-        border: none;
-        background: none;
-    }
-
     :where(
             button:not([class]),
             button[type]:not([class]),
@@ -57,6 +51,7 @@
         text-decoration: unset;
         box-shadow: var(--_button-box-shadow);
         user-select: none;
+        text-box: cap alphabetic;
         -webkit-tap-highlight-color: transparent;
         -webkit-touch-callout: none;
 
@@ -71,6 +66,7 @@
             input[type="reset"]:not([class]),
             .nc-button
         ) {
+
         &:hover {
             background: var(--_button-background-hover);
             color: var(--_button-color-hover);
@@ -84,9 +80,15 @@
             font-weight: var(--font-weight-active);
         }
 
-        &:active {
+        &:is(:active, .-active) {
+            background-color: var(--_button-background-hover);
+            color: var(--_button-color-hover);
+            border-color: var(--_button-border-color-hover);
+
             box-shadow: none;
             transform: none;
+            filter: contrast(1.2) saturate(1.1);
+            backdrop-filter: contrast(2);
         }
 
         &[disabled] {
@@ -103,15 +105,6 @@
             cursor: not-allowed;
         }
 
-        &.-active {
-            background-color: var(--_button-background-hover);
-            color: var(--_button-color-hover);
-            border-color: var(--_button-border-color-hover);
-
-            box-shadow: none;
-            transform: none;
-        }
-
         &.-outline {
             background-color: transparent;
             color: var(--text);

package/src/styles/components/inputs/base.css

@@ -137,7 +137,7 @@
     }
 
     :where(textarea:not([class]), .nc-textarea) {
-        min-block-size: calc(5lh + 2 * var(--_input-padding-block));
+        min-block-size: calc(8lh + 2 * var(--_input-padding-block));
         max-block-size: 80svh;
         min-inline-size: var(--input-inline-size, 100%);
         max-inline-size: 100%;

package/src/styles/utils/base.css

@@ -202,7 +202,7 @@
     ::selection,
     ::target-text {
         background-color: var(--color-brand-primary-base);
-        color: var(--color-surface-base);
+        color: var(--color-brand-primary-emphasis);
     }
 
     :where(a, .nc-link) {

package/src/styles/utils/reset.css

@@ -53,6 +53,9 @@
         font-kerning: normal;
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
+
+        hanging-punctuation: first allow-end last;
+        word-break: break-word;
     }
 
     :where(body) {
@@ -141,8 +144,18 @@
         letter-spacing: inherit;
     }
 
-    :where(html):has(dialog:modal) {
-        scrollbar-gutter: stable;
-        overflow: hidden;
+    :where(html) {
+        overflow-y: scroll;
+    }
+
+    @supports (scrollbar-gutter: stable) {
+        :where(html) {
+            overflow-y: auto;
+            scrollbar-gutter: stable;
+        }
+    }
+
+    :where(pre) {
+      white-space: pre-wrap;
     }
 }