diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
index 775b9e78bdc..e9ed0bbbf64 100644
--- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
+++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -33,11 +33,11 @@
-
+
-
+
@@ -47,7 +47,7 @@
-
+
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
index e8e0f19694e..e53a72e9ef6 100644
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
- 8.5.9-beta03
+ 8.5.9-beta04
diff --git a/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.cs b/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.cs
index b461d335d1b..d5da4203b47 100644
--- a/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.cs
+++ b/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.cs
@@ -145,7 +145,7 @@ protected override void OnParametersSet()
RibbonArrowDownIcon ??= IconTheme.GetIconByKey(ComponentIcons.RibbonTabArrowDownIcon);
RibbonArrowPinIcon ??= IconTheme.GetIconByKey(ComponentIcons.RibbonTabArrowPinIcon);
- Items ??= Enumerable.Empty();
+ Items ??= [];
if (IsSupportAnchor)
{
diff --git a/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.scss b/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.scss
index 20614688aac..b08203f9134 100644
--- a/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.scss
+++ b/src/BootstrapBlazor/Components/RibbonTab/RibbonTab.razor.scss
@@ -25,180 +25,136 @@
--bb-ribbon-body-padding: #{$bb-ribbon-body-padding};
--bb-ribbon-menu-header-height: calc(var(--bb-ribbon-menu-height) + var(--bb-ribbon-menu-margin-top) + var(--bb-ribbon-menu-body-height));
position: relative;
-}
-
-.ribbon-tab.is-float:not(.is-expand) {
- --bb-ribbon-menu-body-height: 0px;
-}
-
-.ribbon-tab .ribbon-header {
- position: relative;
-}
-
-.ribbon-tab .ribbon-header .tabs-header {
- background-color: var(--bb-ribbon-menu-bg);
- border-bottom: 1px solid var(--bs-border-color);
-}
-
-.ribbon-tab .ribbon-header .tabs-border-card.tabs-top .tabs-header {
- border-top-left-radius: 0;
- border-top-right-radius: 0;
-}
-
-.ribbon-tab .ribbon-header .tabs-border-card {
- border-radius: unset;
- border: none;
- box-shadow: none;
-}
-
-.ribbon-tab .ribbon-header .tabs-border-card .tabs-header .tabs-item {
- padding: 0 var(--bb-ribbon-menu-padding);
- margin-top: var(--bb-ribbon-menu-margin-top);
- height: var(--bb-ribbon-menu-height);
- border-top-left-radius: var(--bb-ribbon-menu-radius);
- border-top-right-radius: var(--bb-ribbon-menu-radius);
- transition: background-color .3s ease-in-out, color .3s ease-in-out, border-right-color .3s ease-in-out, border-left-color .3s ease-in-out;
-}
-
-.ribbon-tab .ribbon-header .tabs-border-card .tabs-header .tabs-item.active {
- border-left-color: var(--bb-ribbon-menu-border-color);
- border-right-color: var(--bb-ribbon-menu-border-color);
- border-top-color: var(--bb-ribbon-menu-border-color);
-}
-
-.ribbon-tab .ribbon-header .tabs-border-card .tabs-header .tabs-item:nth-child(2) {
- padding-left: var(--bb-ribbon-menu-padding);
-}
-
-.ribbon-tab .ribbon-header .tabs-border-card .tabs-header .tabs-item:last-child {
- padding-right: var(--bb-ribbon-menu-padding);
-}
-
-.ribbon-tab .ribbon-header .tabs-border-card .tabs-header .tabs-item:not(:hover):not(.active) {
- color: var(--bb-ribbon-menu-color);
-}
-
-.ribbon-tab .ribbon-header .tabs-border-card .tabs-header .tabs-item:hover {
- color: var(--bb-ribbon-menu-hover-color);
-}
-
-.ribbon-tab .tabs-nav-scroll {
- padding: 0 var(--bb-ribbon-menu-padding);
-}
-
-.ribbon-tab .tabs .tabs-body {
- padding: 0;
-}
-
-.ribbon-tab .tabs-body-content {
- overflow: hidden;
- height: var(--bb-ribbon-menu-body-height);
- transition: height .3s ease-in-out;
-}
-
-.ribbon-tab.is-float:not(.is-expand) .tabs-body-content {
- height: 0;
-}
-
-.ribbon-tab .fa-thumb-tack {
- width: 18px;
- height: 28px;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-.ribbon-tab .tab-commands {
- display: flex;
- flex-wrap: nowrap;
- font-size: var(--bb-ribbon-button-fontsize);
- overflow: hidden;
- padding: var(--bb-ribbon-menu-body-padding);
- height: 100%;
-}
-
-.ribbon-tab .link-group {
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.ribbon-tab .link-button {
- font-size: var(--bb-ribbon-button-fontsize);
- padding: var(--bb-ribbon-button-padding);
- border-radius: var(--bb-ribbon-button-radius);
- border: var(--bb-ribbon-button-border-width) solid var(--bb-ribbon-button-border-color);
- min-width: var(--bb-ribbon-button-min-width);
- transition: background-color .3s ease-in-out, border-color .3s ease-in-out, box-shadow .3s ease-in-out;
-}
-
-.ribbon-tab .link-button.active {
- background-color: var(--bb-ribbon-button-active-bg);
- border-color: var(--bb-ribbon-button-active-border-color);
-}
-
-.ribbon-tab .link-button:not(:last-child) {
- margin-right: 1px;
-}
-
-.ribbon-tab .link-button:not([disabled]):hover {
- background-color: var(--bb-ribbon-button-hover-bg);
- border-color: var(--bb-ribbon-button-hover-border-color);
-}
-
-.ribbon-tab .link-button > i {
- font-size: 1rem;
- margin-bottom: .25rem;
-}
-
-.ribbon-tab .link-button > span {
- white-space: nowrap;
-}
-
-.ribbon-tab .link-group-name {
- margin-top: var(--bb-ribbon-group-margin-top);
- color: var(--bb-ribbon-group-color);
- font-size: var(--bb-ribbon-group-fontsize)
-}
-
-.ribbon-tab .divider-vertical {
- margin: 0 4px;
-}
-
-.ribbon-tab .ribbon-buttons {
- position: absolute;
- right: 1rem;
- top: var(--bb-ribbon-menu-margin-top);
- height: var(--bb-ribbon-menu-height);
-}
-
-.ribbon-tab .ribbon-buttons,
-.ribbon-tab .ribbon-customer-buttons {
- display: flex;
- align-items: center;
-}
-
-.ribbon-tab .ribbon-buttons > * {
- cursor: pointer;
-}
-
-.ribbon-tab .ribbon-customer-buttons {
- margin-right: 1rem;
-}
-
-.ribbon-tab .ribbon-button {
- padding: 1px 8px;
- cursor: pointer;
- border-radius: var(--bs-border-radius);
- transition: background-color .3s ease-in-out;
-}
-
-.ribbon-tab .ribbon-button:hover {
- background-color: var(--bb-tab-item-hover-color);
-}
-
-.ribbon-tab .ribbon-body {
- border-top: var(--bs-border-width) solid var(--bs-border-color);
- padding: var(--bb-ribbon-body-padding);
- position: relative;
+ &.is-float:not(.is-expand) {
+ --bb-ribbon-menu-body-height: 0px;
+
+ .tabs-body-content {
+ height: 0;
+ }
+ }
+
+ .ribbon-header {
+ position: relative;
+
+ .tabs-header {
+ background-color: var(--bb-ribbon-menu-bg);
+ border-bottom: 1px solid var(--bs-border-color);
+
+ .tabs-nav-scroll {
+ padding: 0 var(--bb-ribbon-menu-padding);
+ }
+ }
+
+ .tabs-body {
+ padding: 0;
+
+ .link-button {
+ font-size: var(--bb-ribbon-button-fontsize);
+ padding: var(--bb-ribbon-button-padding);
+ border-radius: var(--bb-ribbon-button-radius);
+ border: var(--bb-ribbon-button-border-width) solid var(--bb-ribbon-button-border-color);
+ min-width: var(--bb-ribbon-button-min-width);
+ transition: background-color .3s ease-in-out, border-color .3s ease-in-out, box-shadow .3s ease-in-out;
+
+ &.active {
+ background-color: var(--bb-ribbon-button-active-bg);
+ border-color: var(--bb-ribbon-button-active-border-color);
+ }
+
+ &:not(:last-child) {
+ margin-right: 1px;
+ }
+
+ &:not([disabled]):hover {
+ background-color: var(--bb-ribbon-button-hover-bg);
+ border-color: var(--bb-ribbon-button-hover-border-color);
+ }
+
+ > i {
+ font-size: 1rem;
+ margin-bottom: .25rem;
+ }
+
+ > span {
+ white-space: nowrap;
+ }
+ }
+
+ .tabs-body-content {
+ overflow: hidden;
+ height: var(--bb-ribbon-menu-body-height);
+ transition: height .3s ease-in-out;
+
+ .tab-commands {
+ display: flex;
+ flex-wrap: nowrap;
+ font-size: var(--bb-ribbon-button-fontsize);
+ overflow: hidden;
+ padding: var(--bb-ribbon-menu-body-padding);
+ height: 100%;
+
+ .link-group {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .link-group-name {
+ margin-top: var(--bb-ribbon-group-margin-top);
+ color: var(--bb-ribbon-group-color);
+ font-size: var(--bb-ribbon-group-fontsize)
+ }
+ }
+
+ .divider-vertical {
+ margin: 0 4px;
+ }
+ }
+ }
+ }
+
+ .ribbon-buttons {
+ position: absolute;
+ right: 1rem;
+ top: var(--bb-ribbon-menu-margin-top);
+ height: var(--bb-ribbon-menu-height);
+ display: flex;
+ align-items: center;
+
+ > * {
+ cursor: pointer;
+ }
+
+ .ribbon-customer-buttons {
+ display: flex;
+ align-items: center;
+ margin-right: 1rem;
+ }
+
+ .ribbon-button {
+ padding: 1px 8px;
+ cursor: pointer;
+ border-radius: var(--bs-border-radius);
+ transition: background-color .3s ease-in-out;
+
+ &:hover {
+ background-color: var(--bb-tab-item-hover-color);
+ }
+ }
+ }
+
+ .ribbon-arrow {
+ width: 18px;
+ height: 28px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
+
+ .ribbon-body {
+ border-top: var(--bs-border-width) solid var(--bs-border-color);
+ padding: var(--bb-ribbon-body-padding);
+ position: relative;
+ }
}
diff --git a/src/Extensions/Components/BootstrapBlazor.BootstrapIcon.Extensions/BootstrapBlazor.BootstrapIcon.Extensions.csproj b/src/Extensions/Components/BootstrapBlazor.BootstrapIcon.Extensions/BootstrapBlazor.BootstrapIcon.Extensions.csproj
index eba806ab8ad..62d5b4addd0 100644
--- a/src/Extensions/Components/BootstrapBlazor.BootstrapIcon.Extensions/BootstrapBlazor.BootstrapIcon.Extensions.csproj
+++ b/src/Extensions/Components/BootstrapBlazor.BootstrapIcon.Extensions/BootstrapBlazor.BootstrapIcon.Extensions.csproj
@@ -1,7 +1,7 @@
- 8.0.3
+ 8.0.4
diff --git a/src/Extensions/Components/BootstrapBlazor.BootstrapIcon.Extensions/DefaultIcon.cs b/src/Extensions/Components/BootstrapBlazor.BootstrapIcon.Extensions/DefaultIcon.cs
index d3dad50adf1..d8a5e44b608 100644
--- a/src/Extensions/Components/BootstrapBlazor.BootstrapIcon.Extensions/DefaultIcon.cs
+++ b/src/Extensions/Components/BootstrapBlazor.BootstrapIcon.Extensions/DefaultIcon.cs
@@ -102,7 +102,7 @@ internal class DefaultIcon
{ ComponentIcons.RibbonTabArrowUpIcon, "bi bi-chevron-up" },
{ ComponentIcons.RibbonTabArrowDownIcon, "bi bi-chevron-down" },
- { ComponentIcons.RibbonTabArrowPinIcon, "bi bi-pin bi-rotate-90" },
+ { ComponentIcons.RibbonTabArrowPinIcon, "bi bi-pin bi-pin-angle" },
{ ComponentIcons.MultiSelectClearIcon, "bi bi-x" },
diff --git a/src/Extensions/Components/BootstrapBlazor.MaterialDesign.Extensions/BootstrapBlazor.MaterialDesign.Extensions.csproj b/src/Extensions/Components/BootstrapBlazor.MaterialDesign.Extensions/BootstrapBlazor.MaterialDesign.Extensions.csproj
index 7fa622801bd..af1b33f36a1 100644
--- a/src/Extensions/Components/BootstrapBlazor.MaterialDesign.Extensions/BootstrapBlazor.MaterialDesign.Extensions.csproj
+++ b/src/Extensions/Components/BootstrapBlazor.MaterialDesign.Extensions/BootstrapBlazor.MaterialDesign.Extensions.csproj
@@ -1,7 +1,7 @@
- 8.0.6
+ 8.0.7
diff --git a/src/Extensions/Components/BootstrapBlazor.MaterialDesign.Extensions/DefaultIcon.cs b/src/Extensions/Components/BootstrapBlazor.MaterialDesign.Extensions/DefaultIcon.cs
index 93983dc7ec4..60e69138fe1 100644
--- a/src/Extensions/Components/BootstrapBlazor.MaterialDesign.Extensions/DefaultIcon.cs
+++ b/src/Extensions/Components/BootstrapBlazor.MaterialDesign.Extensions/DefaultIcon.cs
@@ -102,7 +102,7 @@ internal class DefaultIcon
{ ComponentIcons.RibbonTabArrowUpIcon, "mdi mdi-chevron-up" },
{ ComponentIcons.RibbonTabArrowDownIcon, "mdi mdi-chevron-down" },
- { ComponentIcons.RibbonTabArrowPinIcon, "mdi mdi-pin mdi-rotate-90" },
+ { ComponentIcons.RibbonTabArrowPinIcon, "mdi mdi-pin mdi-pin-off" },
{ ComponentIcons.MultiSelectClearIcon, "mdi mdi-close" },