npm - @dynamic-framework/ui-react - Versions diffs - 2.9.0 → 2.11.0 - Mend

@dynamic-framework/ui-react 2.9.0 → 2.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (478) hide show

package/src/style/abstracts/variables/_chips.scss CHANGED Viewed

@@ -10,4 +10,6 @@ $chip-padding-y: $spacer-1 !default;
 $chip-font-size: $small-font-size !default;
 $chip-font-weight: $font-weight-bold !default;
 $chip-line-height: $line-height-base !default;
+$chip-icon-container-size: 1lh !default;
+$chip-icon-container-size-fallback: $line-height-base * 1em !default;
 // scss-docs-end chip-variables

package/src/style/abstracts/variables/_colors.scss CHANGED Viewed

@@ -404,7 +404,7 @@ $info-text-emphasis: var(--#{$prefix}info-600) !default;
 $warning-text-emphasis: var(--#{$prefix}warning-800) !default;
 $danger-text-emphasis: var(--#{$prefix}danger-600) !default;
 $light-text-emphasis: var(--#{$prefix}gray-600) !default;
-$dark-text-emphasis: var(--#{$prefix}gray-25) !default;
+$dark-text-emphasis: var(--#{$prefix}gray-900) !default;
 // scss-docs-end theme-text-variables
 // scss-docs-start theme-bg-subtle-variables
@@ -415,7 +415,7 @@ $info-bg-subtle: var(--#{$prefix}info-25) !default;
 $warning-bg-subtle: var(--#{$prefix}warning-25) !default;
 $danger-bg-subtle: var(--#{$prefix}danger-25) !default;
 $light-bg-subtle: var(--#{$prefix}gray-100) !default;
-$dark-bg-subtle: var(--#{$prefix}gray-400) !default;
+$dark-bg-subtle: var(--#{$prefix}gray-300) !default;
 // scss-docs-end theme-bg-subtle-variables
 // scss-docs-start theme-border-subtle-variables

package/src/style/base/_buttons.scss CHANGED Viewed

@@ -149,8 +149,11 @@
     @include box-shadow(none);
   }
+  // The glyph follows the button's font size unless a size is set explicitly,
+  // through DIcon's `size` (inline) or `--bs-icon-component-size` on the icon
+  // or the button.
   .d-icon {
-    --#{$prefix}icon-size: var(--#{$prefix}btn-font-size);
+    --#{$prefix}icon-size: var(--#{$prefix}icon-component-size, var(--#{$prefix}btn-font-size));
   }
 }

package/src/style/base/_input-group.scss CHANGED Viewed

@@ -71,11 +71,14 @@
   --#{$prefix}input-group-sm-icon-size: #{$input-group-sm-icon-size};
   --#{$prefix}input-group-lg-icon-size: #{$input-group-lg-icon-size};
-  &.input-group-sm .d-icon {
+  // Icons inside a button (a DButton or DButtonIcon in `inputStart`/`inputEnd`)
+  // keep following the button's font size, as before `.btn .d-icon` honored
+  // an explicit icon size.
+  &.input-group-sm .d-icon:not(.btn .d-icon) {
     --#{$prefix}icon-component-size: var(--#{$prefix}input-group-sm-icon-size);
   }
-  &.input-group-lg .d-icon {
+  &.input-group-lg .d-icon:not(.btn .d-icon) {
     --#{$prefix}icon-component-size: var(--#{$prefix}input-group-lg-icon-size);
   }

package/src/style/base/_list-group.scss CHANGED Viewed

@@ -4,3 +4,58 @@
   gap: var(--#{$prefix}list-group-item-gap);
   align-items: center;
 }
+// Interactive item inside a list: the <li> is the visual item (borders,
+// colors, active/disabled) and the link or button fills it, so the group keeps
+// `ul/ol > li` semantics and Bootstrap's sibling selectors still apply.
+.d-list-group-item-interactive {
+  padding: 0;
+  &:not(.active):focus-within {
+    z-index: 1;
+    color: var(--#{$prefix}list-group-action-hover-color);
+    background-color: var(--#{$prefix}list-group-action-hover-bg);
+  }
+}
+.d-list-group-item-link {
+  display: flex;
+  flex: 1 1 auto;
+  gap: var(--#{$prefix}list-group-item-gap);
+  align-items: center;
+  align-self: stretch;
+  width: 100%;
+  padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  text-decoration: none;
+  background-color: transparent;
+  border: 0;
+  border-radius: inherit;
+  &:hover {
+    color: inherit;
+  }
+}
+// In a numbered list the counter goes inside the link or button, so the whole
+// row, number included, is clickable. The <li> drops its own counter.
+.list-group-numbered > .list-group-item.d-list-group-item-interactive::before {
+  content: none;
+  counter-increment: none;
+}
+.list-group-numbered > .d-list-group-item-interactive > .d-list-group-item-link::before {
+  content: counters(section, ".") ". ";
+  content: counters(section, ".") ". " / "";
+  counter-increment: section;
+}
+// The generated number is decoration: an <ol> already announces the position,
+// so screen readers skip it (the second declaration uses the alt-text syntax;
+// browsers without it keep the first).
+.list-group-numbered > .list-group-item::before {
+  content: counters(section, ".") ". ";
+  content: counters(section, ".") ". " / "";
+}

package/src/style/components/_d-chip.scss CHANGED Viewed

@@ -8,6 +8,7 @@
   --#{$prefix}chip-font-size: #{$chip-font-size};
   --#{$prefix}chip-font-weight: #{$chip-font-weight};
   --#{$prefix}chip-line-height: #{$chip-line-height};
+  --#{$prefix}chip-icon-container-size: #{$chip-icon-container-size};
   display: inline-flex;
   flex-direction: row;
@@ -29,14 +30,18 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--#{$prefix}chip-line-height);
-    height: var(--#{$prefix}chip-line-height);
+    width: var(--#{$prefix}chip-icon-container-size);
+    height: var(--#{$prefix}chip-icon-container-size);
     padding: 0;
     margin: 0;
     background: transparent;
     border: 0;
   }
+  @supports not (width: 1lh) {
+    --#{$prefix}chip-icon-container-size: #{$chip-icon-container-size-fallback};
+  }
   @each $theme, $value in map-remove($theme-colors, "light", "dark", "warning") {
     $color: color-contrast($value);
     &.d-chip-#{$theme} {

package/src/style/components/_d-tabs.scss CHANGED Viewed

@@ -1,4 +1,6 @@
 .d-tabs {
+  --#{$prefix}tabs-content-margin-bottom: var(--#{$prefix}ref-spacer-4);
   display: flex;
   width: 100%;
 }
@@ -14,6 +16,7 @@
 .d-tabs-content {
   width: 100%;
+  margin-bottom: var(--#{$prefix}tabs-content-margin-bottom);
 }
 .nav-toggle-button-group {

package/src/style/helpers/_color-bg.scss CHANGED Viewed

@@ -5,6 +5,11 @@
       color: var(--#{$prefix}secondary-700);
       background: var(--#{$prefix}secondary-50);
     }
+  } @else if map-has-key($theme-colors, $color) {
+    .text-bg-#{$color} {
+      color: var(--#{$prefix}#{$color}-text-bg-color) if($enable-important-utilities, !important, null);
+      background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
+    }
   } @else {
     .text-bg-#{$color} {
       color: color-contrast-var($value) if($enable-important-utilities, !important, null);

package/src/style/root/_root.scss CHANGED Viewed

@@ -71,6 +71,15 @@
     --#{$prefix}#{$color}-border-subtle: #{$value};
   }
+  // Text color of `.text-bg-<color>`, resolved in Sass against the default
+  // role value. It lives in a variable so a theme that redefines
+  // `--bs-<color>-rgb` can move it too. `secondary` already reads its ramp.
+  @each $color, $value in $theme-colors {
+    @if $color != "secondary" {
+      --#{$prefix}#{$color}-text-bg-color: #{color-contrast-var($value)};
+    }
+  }
   // Fonts
   // Note: Use `inspect` for lists so that quoted items keep the quotes.

package/dist/types/components/DVoucher/hooks/useScreenshotDownload.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/components/DVoucher/hooks/useScreenshotWebShare.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/hooks/tests/useCountdown.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/hooks/tests/useDisableBodyScrollEffect.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/hooks/tests/useDisableInputWheel.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/hooks/tests/useFormatCurrency.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/hooks/tests/useInputCurrency.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/hooks/tests/useItemSelection.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/hooks/tests/useMediaBreakpointUp.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/hooks/tests/useMediaQuery.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/hooks/tests/usePortal.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/hooks/tests/useProvidedRefOrCreate.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/hooks/tests/useStackState.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/utils/tests/attr-accept.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/utils/tests/buildUrl.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/utils/tests/changeQueryString.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/utils/tests/configureI18n.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/utils/tests/formatCurrency.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/utils/tests/getCssVariable.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/utils/tests/getKeyboardFocusableElements.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/utils/tests/getQueryString.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/utils/tests/mediaQuery.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/utils/tests/sanitizeHref.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};

package/dist/types/utils/tests/validatePhoneNumber.spec.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {};