@dnanpm/ui-components 0.0.5 → 0.2.0

package/dist/styles/utils/elevation.css

@@ -0,0 +1,28 @@
+@layer dna-design-system {/* 
+ * TODO: Replace local variables (_elevation-semantic-low, high and extra-high) 
+ * with official design tokens once elevation tokens are added to the design token set
+ */
+
+._elevationLow_4gnft_6 {
+    --_elevation-semantic-low: 0px 2px 16px 0px rgba(18, 18, 18, 0.06);
+    --_elevation-style: var(--_elevation-semantic-low);
+}
+
+._elevationHigh_4gnft_11 {
+    --_elevation-semantic-high: 0px 4px 24px 0px rgba(18, 18, 18, 0.08);
+    --_elevation-style: var(--_elevation-semantic-high);
+}
+
+._elevationExtraHigh_4gnft_16 {
+    --_elevation-semantic-extra-high: 0px 8px 64px 0px rgba(18, 18, 18, 0.16);
+    --_elevation-style: var(--_elevation-semantic-extra-high);
+}
+
+._elevationLow_4gnft_6,
+._elevationHigh_4gnft_11,
+._elevationExtraHigh_4gnft_16 {
+    border: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
+    box-shadow: var(--_elevation-style);
+    border-radius: var(--radius-semantic-md);
+}
+}

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

@@ -0,0 +1,10 @@
+require('./elevation.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const elevationLow = "_elevationLow_4gnft_6";
+const elevationStyles = {
+  elevationLow
+};
+exports.default = elevationStyles;
+exports.elevationLow = elevationLow;
+//# sourceMappingURL=elevation.module.css.cjs.map

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

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

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

@@ -0,0 +1,10 @@
+import './elevation.css';
+const elevationLow = "_elevationLow_4gnft_6";
+const elevationStyles = {
+  elevationLow
+};
+export {
+  elevationStyles as default,
+  elevationLow
+};
+//# sourceMappingURL=elevation.module.css.js.map

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

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

package/dist/styles/utils/focus.css

@@ -0,0 +1,80 @@
+@layer dna-design-system {._focusable_ikczm_1 {
+    /* Marker class for shared focus treatment */
+}
+
+._focusable_ikczm_1:focus {
+    outline-color: transparent;
+}
+
+._focusable_ikczm_1:focus-visible {
+    /* Transparent outline ensures a visible ring fallback in forced colors. */
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    box-shadow:
+        0 0 0 2px var(--color-semantic-utility-focus-soft),
+        0 0 0 4px var(--color-semantic-utility-focus-strong);
+}
+
+@media (forced-colors: active) {
+    ._focusable_ikczm_1:focus-visible {
+        outline-color: Highlight;
+        box-shadow: none;
+    }
+}
+
+._focusableInset_ikczm_25 {
+    /* Marker class for inset focus treatment (ring stays inside the element boundary) */
+}
+
+._focusableInset_ikczm_25:focus {
+    outline-color: transparent;
+}
+
+._focusableInset_ikczm_25:focus-visible {
+    outline: 2px solid transparent;
+    box-shadow:
+        inset 0 0 0 2px var(--color-semantic-utility-focus-strong),
+        inset 0 0 0 4px var(--color-semantic-utility-focus-soft);
+}
+
+@media (forced-colors: active) {
+    ._focusableInset_ikczm_25:focus-visible {
+        outline-color: Highlight;
+        box-shadow: none;
+    }
+}
+
+@scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
+    ._focusable_ikczm_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_ikczm_25: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_ikczm_1:focus-visible,
+        ._focusableInset_ikczm_25:focus-visible {
+            box-shadow: none;
+        }
+    }
+}
+
+._focusClipGuard_ikczm_68 {
+    /*
+     * Prevents focus rings from being clipped when the container uses overflow: hidden.
+     *
+     * Usage:
+     * - Apply this class to the clipping container.
+     * - Override --focus-clip-guard-bleed-inline when a component needs a custom bleed amount.
+     */
+    --focus-clip-guard-bleed-inline: var(--spacing-ui-xxs);
+    margin-inline: calc(var(--focus-clip-guard-bleed-inline) * -1);
+    padding-inline: var(--focus-clip-guard-bleed-inline);
+}
+}

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

@@ -0,0 +1,16 @@
+require('./focus.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const focusable = "_focusable_ikczm_1";
+const focusableInset = "_focusableInset_ikczm_25";
+const focusClipGuard = "_focusClipGuard_ikczm_68";
+const focusStyles = {
+  focusable,
+  focusableInset,
+  focusClipGuard
+};
+exports.default = focusStyles;
+exports.focusClipGuard = focusClipGuard;
+exports.focusable = focusable;
+exports.focusableInset = focusableInset;
+//# sourceMappingURL=focus.module.css.cjs.map

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

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

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

@@ -0,0 +1,16 @@
+import './focus.css';
+const focusable = "_focusable_ikczm_1";
+const focusableInset = "_focusableInset_ikczm_25";
+const focusClipGuard = "_focusClipGuard_ikczm_68";
+const focusStyles = {
+  focusable,
+  focusableInset,
+  focusClipGuard
+};
+export {
+  focusStyles as default,
+  focusClipGuard,
+  focusable,
+  focusableInset
+};
+//# sourceMappingURL=focus.module.css.js.map

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

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

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

@@ -0,0 +1,7 @@
+@layer dna-design-system {._underlineLink_1nw3t_1 {
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+    text-decoration-skip-ink: auto;
+    text-decoration-thickness: from-font;
+}
+}

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

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

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

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

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

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

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

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