@dnanpm/ui-components 0.6.0 → 0.8.0

package/dist/styles/utils/elevation.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"elevation.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"elevation.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/dist/styles/utils/elevation.module.css.js

@@ -1,13 +1,16 @@
 import './elevation.css';
 const elevationLow = "_elevationLow_dspr0_1";
+const elevationMedium = "_elevationMedium_dspr0_8";
 const elevationHigh = "_elevationHigh_dspr0_16";
 const elevationStyles = {
   elevationLow,
+  elevationMedium,
   elevationHigh
 };
 export {
   elevationStyles as default,
   elevationHigh,
-  elevationLow
+  elevationLow,
+  elevationMedium
 };
 //# sourceMappingURL=elevation.module.css.js.map

package/dist/styles/utils/elevation.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"elevation.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"elevation.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/styles/utils/focus.css

@@ -1,12 +1,16 @@
-@layer dds-components {._focusable_azt70_1 {
+@layer dds-components {._focusable_bhneb_1 {
     /* Marker class for shared focus treatment */
 }
 
-._focusable_azt70_1:focus {
+._focusable_bhneb_1:where(:focus, :focus-visible) {
+    border-radius: var(--radius-semantic-sm);
+}
+
+._focusable_bhneb_1:focus {
     outline-color: transparent;
 }
 
-._focusable_azt70_1:focus-visible {
+._focusable_bhneb_1:focus-visible {
     /* Transparent outline ensures a visible ring fallback in forced colors. */
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -16,21 +20,25 @@
 }
 
 @media (forced-colors: active) {
-    ._focusable_azt70_1:focus-visible {
+    ._focusable_bhneb_1:focus-visible {
         outline-color: Highlight;
         box-shadow: none;
     }
 }
 
-._focusableInset_azt70_25 {
+._focusableInset_bhneb_29 {
     /* Marker class for inset focus treatment (ring stays inside the element boundary) */
 }
 
-._focusableInset_azt70_25:focus {
+._focusableInset_bhneb_29:where(:focus, :focus-visible) {
+    border-radius: var(--radius-semantic-sm);
+}
+
+._focusableInset_bhneb_29:focus {
     outline-color: transparent;
 }
 
-._focusableInset_azt70_25:focus-visible {
+._focusableInset_bhneb_29:focus-visible {
     outline: 2px solid transparent;
     box-shadow:
         inset 0 0 0 2px var(--color-semantic-utility-focus-strong),
@@ -38,34 +46,34 @@
 }
 
 @media (forced-colors: active) {
-    ._focusableInset_azt70_25:focus-visible {
+    ._focusableInset_bhneb_29:focus-visible {
         outline-color: Highlight;
         box-shadow: none;
     }
 }
 
 @scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
-    ._focusable_azt70_1:focus-visible {
+    ._focusable_bhneb_1:focus-visible {
         box-shadow:
             0 0 0 2px var(--color-semantic-utility-focus-strong),
             0 0 0 4px var(--color-semantic-utility-focus-soft);
     }
 
-    ._focusableInset_azt70_25:focus-visible {
+    ._focusableInset_bhneb_29:focus-visible {
         box-shadow:
             inset 0 0 0 2px var(--color-semantic-utility-focus-soft),
             inset 0 0 0 4px var(--color-semantic-utility-focus-strong);
     }
 
     @media (forced-colors: active) {
-        ._focusable_azt70_1:focus-visible,
-        ._focusableInset_azt70_25:focus-visible {
+        ._focusable_bhneb_1:focus-visible,
+        ._focusableInset_bhneb_29:focus-visible {
             box-shadow: none;
         }
     }
 }
 
-._focusClipGuard_azt70_68 {
+._focusClipGuard_bhneb_76 {
     /*
      * Prevents focus rings from being clipped when the container uses overflow: hidden.
      *

package/dist/styles/utils/focus.module.css.cjs

@@ -1,9 +1,9 @@
 require('./focus.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const focusable = "_focusable_azt70_1";
-const focusableInset = "_focusableInset_azt70_25";
-const focusClipGuard = "_focusClipGuard_azt70_68";
+const focusable = "_focusable_bhneb_1";
+const focusableInset = "_focusableInset_bhneb_29";
+const focusClipGuard = "_focusClipGuard_bhneb_76";
 const focusStyles = {
   focusable,
   focusableInset,

package/dist/styles/utils/focus.module.css.js

@@ -1,7 +1,7 @@
 import './focus.css';
-const focusable = "_focusable_azt70_1";
-const focusableInset = "_focusableInset_azt70_25";
-const focusClipGuard = "_focusClipGuard_azt70_68";
+const focusable = "_focusable_bhneb_1";
+const focusableInset = "_focusableInset_bhneb_29";
+const focusClipGuard = "_focusClipGuard_bhneb_76";
 const focusStyles = {
   focusable,
   focusableInset,

package/dist/styles/utils/overlay.css

@@ -0,0 +1,37 @@
+@layer dds-components {._overlayStrong_1w2h3_1::before,
+._overlaySoft_1w2h3_2::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 5;
+    opacity: 1;
+    transition: opacity 0.2s ease;
+}
+
+@starting-style {
+    ._overlayStrong_1w2h3_1::before,
+    ._overlaySoft_1w2h3_2::before {
+        opacity: 0;
+    }
+}
+
+._overlayClosing_1w2h3_19::before {
+    opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    ._overlayStrong_1w2h3_1::before,
+    ._overlaySoft_1w2h3_2::before {
+        transition: none;
+    }
+}
+
+._overlayStrong_1w2h3_1::before {
+    background: var(--color-semantic-utility-overlay-strong);
+}
+
+._overlaySoft_1w2h3_2::before {
+    background: var(--color-semantic-utility-overlay-soft);
+}
+}

package/dist/styles/utils/overlay.module.css.cjs

@@ -0,0 +1,13 @@
+require('./overlay.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const overlayStrong = "_overlayStrong_1w2h3_1";
+const overlayClosing = "_overlayClosing_1w2h3_19";
+const overlayStyles = {
+  overlayStrong,
+  overlayClosing
+};
+exports.default = overlayStyles;
+exports.overlayClosing = overlayClosing;
+exports.overlayStrong = overlayStrong;
+//# sourceMappingURL=overlay.module.css.cjs.map

package/dist/styles/utils/overlay.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/styles/utils/overlay.module.css.js

@@ -0,0 +1,13 @@
+import './overlay.css';
+const overlayStrong = "_overlayStrong_1w2h3_1";
+const overlayClosing = "_overlayClosing_1w2h3_19";
+const overlayStyles = {
+  overlayStrong,
+  overlayClosing
+};
+export {
+  overlayStyles as default,
+  overlayClosing,
+  overlayStrong
+};
+//# sourceMappingURL=overlay.module.css.js.map

package/dist/styles/utils/overlay.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/styles/utils/text-decoration.css

@@ -1,4 +1,12 @@
-@layer dds-components {._underlineLink_1nw3t_1 {
+@layer dds-components {._underlineLink_15fbp_1 {
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+    text-decoration-skip-ink: auto;
+    text-decoration-thickness: from-font;
+}
+
+._underlineLinkOnHover_15fbp_8:hover,
+._underlineLinkOnHover_15fbp_8:focus-visible {
     text-decoration: underline;
     text-underline-offset: 0.2em;
     text-decoration-skip-ink: auto;

package/dist/styles/utils/text-decoration.module.css.cjs

@@ -1,10 +1,13 @@
 require('./text-decoration.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const underlineLink = "_underlineLink_1nw3t_1";
+const underlineLink = "_underlineLink_15fbp_1";
+const underlineLinkOnHover = "_underlineLinkOnHover_15fbp_8";
 const textDecorationStyles = {
-  underlineLink
+  underlineLink,
+  underlineLinkOnHover
 };
 exports.default = textDecorationStyles;
 exports.underlineLink = underlineLink;
+exports.underlineLinkOnHover = underlineLinkOnHover;
 //# sourceMappingURL=text-decoration.module.css.cjs.map

package/dist/styles/utils/text-decoration.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"text-decoration.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"text-decoration.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/styles/utils/text-decoration.module.css.js

@@ -1,10 +1,13 @@
 import './text-decoration.css';
-const underlineLink = "_underlineLink_1nw3t_1";
+const underlineLink = "_underlineLink_15fbp_1";
+const underlineLinkOnHover = "_underlineLinkOnHover_15fbp_8";
 const textDecorationStyles = {
-  underlineLink
+  underlineLink,
+  underlineLinkOnHover
 };
 export {
   textDecorationStyles as default,
-  underlineLink
+  underlineLink,
+  underlineLinkOnHover
 };
 //# sourceMappingURL=text-decoration.module.css.js.map

package/dist/styles/utils/text-decoration.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-decoration.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"text-decoration.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/styles.css

@@ -285,6 +285,16 @@ body {
     padding: 0;
 }
 
+body.dds-un-scrollable {
+    overflow: hidden;
+}
+
+@media screen and (min-width: 1024px) {
+    body.dds-un-scrollable {
+        overflow: initial;
+    }
+}
+
 img,
 picture,
 svg,
@@ -314,6 +324,11 @@ html {
     font: var(--typography-body-md);
 }
 
+body {
+    background-color: var(--color-semantic-surface-neutral-soft);
+    color: var(--color-semantic-foreground-default);
+}
+
 h1,
 h2,
 h3,
@@ -452,14 +467,16 @@ ol {
 /* ─── Dark color scheme ─── */
 
 @scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
-    .dds-prose {
-        a {
-            color: var(--color-semantic-foreground-link-inverse);
+    :scope {
+        color: var(--color-semantic-foreground-inverse);
+    }
 
-            &:hover {
-                color: var(--color-semantic-foreground-link-inverse-hover);
-            }
-        }
+    :where(a) {
+        color: var(--color-semantic-foreground-link-inverse);
+    }
+
+    :where(a:hover) {
+        color: var(--color-semantic-foreground-link-inverse-hover);
     }
 }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dnanpm/ui-components",
-    "version": "0.6.0",
+    "version": "0.8.0",
     "description": "DNA Design System - React UI Components",
     "author": "DNA Oy",
     "license": "ISC",
@@ -27,6 +27,7 @@
         "build": "tsc --project tsconfig.build.json && vite build",
         "dev": "vite build --watch",
         "gen:component": "plop --plopfile ./scripts/template-generators/plopfile.mjs component",
+        "tokens:check-css-vars": "bash scripts/check-token-css-vars.sh",
         "test": "vitest run --coverage",
         "test:watch": "vitest",
         "format": "prettier --write .",
@@ -85,8 +86,8 @@
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/DNA-Online-Services/dna-design-system.git",
+        "url": "https://dnae.ghe.com/dna/dna-design-system.git",
         "directory": "packages/ui-components"
     },
-    "homepage": "https://github.com/DNA-Online-Services/dna-design-system/tree/main/packages/ui-components#readme"
+    "homepage": "https://dnae.ghe.com/dna/dna-design-system/tree/main/packages/ui-components#readme"
 }