Refresh UI components and showcase; release updated framework packages

packages/ui/components/Carousel.wrn

@@ -34,6 +34,7 @@ component Carousel {
     showCounter: boolean = false
     thumbnails: string = "none"
     ariaLabel: string = "Content carousel"
+    framed: boolean = false
     variant: string = "default"
     class: string = ""
   }
@@ -316,6 +317,7 @@ component Carousel {
   view {
     <section
       {...attrs}
+      data-framed="{framed}"
       class="wrn-component wrn-next--carousel wrn-component--color-{color} wrn-component--size-{size} wrn-next--variant-{variant} {class}"
       data-rtl="{isRTL}"
       data-centered="{isCentered}"
@@ -477,6 +479,22 @@ component Carousel {
       box-shadow: var(--wrn-shadow-1);
     }
 
+    .wrn-next--carousel[data-framed="false"] {
+      padding: 0;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+    .wrn-next__carousel-slide:has(> img)::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: rgb(0 0 0 / 0.4);
+      pointer-events: none;
+    }
+    .wrn-next__carousel-slide:has(> img) .wrn-next__carousel-slide-content,
+    .wrn-next__carousel-slide:has(> img) .wrn-next__carousel-slide-content p { color: white; }
     .wrn-next__carousel-header h3,
     .wrn-next__carousel-header p {
       margin: 0;
@@ -515,6 +533,12 @@ component Carousel {
       outline: none;
     }
 
+    .wrn-next--carousel[data-framed="false"] .wrn-next__carousel-viewport {
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+    }
+
     .wrn-next__carousel-viewport:focus-visible {
       box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-carousel-color) 30%, transparent);
     }