@frame-ui-ng/components 0.5.1-beta.0 → 0.6.0-beta.0

package/accordion/src/styles/_vars.css

@@ -2,7 +2,6 @@
   --frame-accordion-radius: var(--frame-radius-md);
   --frame-accordion-item-border: var(--frame-border);
   --frame-accordion-item-radius: 0px;
-  --frame-accordion-item-padding-x: 0;
   --frame-accordion-trigger-min-height: calc(var(--frame-density-control-height-lg) + var(--frame-density-gap-lg));
   --frame-accordion-trigger-padding-y: var(--frame-density-panel-padding-md);
   --frame-accordion-trigger-padding-x: var(--frame-density-panel-padding-md);
@@ -17,10 +16,8 @@
   --frame-accordion-content-color: var(--frame-muted-foreground);
   --frame-accordion-content-font-size: 0.875rem;
   --frame-accordion-content-line-height: 1.6;
-  --frame-accordion-content-opacity-closed: 0;
-  --frame-accordion-content-opacity-open: 1;
-  --frame-accordion-content-transition-duration: 240ms;
-  --frame-accordion-content-transition-timing: cubic-bezier(0.2, 0, 0, 1);
+  --frame-accordion-content-motion-duration: 220ms;
+  --frame-accordion-content-motion-timing: cubic-bezier(0.2, 0, 0, 1);
   --frame-accordion-icon-size: 1rem;
   --frame-accordion-icon-rotation: 180deg;
 }

package/accordion/src/styles/accordion.css

@@ -1,31 +1,40 @@
 @import './_vars.css';
 
-[frAccordion] {
-  display: grid;
-  border: 1px solid var(--frame-frame-line-muted, var(--frame-border));
+frame-accordion {
+  display: block;
+  inline-size: 100%;
+  width: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  border: 0;
   background: var(--frame-surface);
   border-radius: var(--frame-accordion-radius, var(--frame-radius-md));
   overflow: hidden;
 }
 
-[frAccordion][data-border='true'] {
-  border-color: var(--frame-border);
-  padding-inline: 0;
+frame-accordion[data-border='true'] {
+  border: 1px solid var(--frame-border);
 }
 
-[frAccordionItem] {
-  position: relative;
+frame-accordion-item {
+  display: block;
+  inline-size: 100%;
+  width: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
   border-bottom: 1px solid var(--frame-accordion-item-border, var(--frame-border));
   border-radius: var(--frame-accordion-item-radius, 0px);
-  padding-inline: 0;
 }
 
-[frAccordionItem]:last-child {
+frame-accordion-item:last-child {
   border-bottom: 0;
 }
 
-[frAccordionTrigger] {
+button[frameAccordionTrigger] {
   inline-size: 100%;
+  width: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
   min-block-size: var(--frame-accordion-trigger-min-height, 3.25rem);
   display: inline-flex;
   align-items: center;
@@ -47,50 +56,55 @@
     background-color 160ms ease;
 }
 
-[frAccordionTrigger]:where(:not([data-disabled])):hover {
+button[frameAccordionTrigger]:where(:not([data-disabled])):hover {
   color: var(--frame-accordion-trigger-hover-color, var(--frame-foreground));
   background: color-mix(in srgb, var(--frame-muted) 42%, transparent);
 }
 
-[frAccordionTrigger]:focus-visible {
+button[frameAccordionTrigger]:focus-visible {
   outline: 1px solid var(--frame-frame-accent, var(--frame-ring));
   outline-offset: -1px;
 }
 
-[frAccordionTrigger][data-state='open'] {
+button[frameAccordionTrigger][data-state='open'] {
   color: var(--frame-frame-accent, var(--frame-primary));
 }
 
-[frAccordionTrigger]:where(:disabled, [data-disabled]) {
+button[frameAccordionTrigger]:where(:disabled, [data-disabled]) {
   cursor: not-allowed;
   opacity: var(--frame-accordion-trigger-disabled-opacity, 0.55);
 }
 
-[frAccordionContent] {
+.frame-accordion__content {
   box-sizing: border-box;
+  inline-size: 100%;
+  width: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow: hidden;
+  opacity: 0;
   color: var(--frame-accordion-content-color, var(--frame-muted-foreground));
   font-size: var(--frame-accordion-content-font-size, 0.875rem);
   line-height: var(--frame-accordion-content-line-height, 1.6);
-  overflow: hidden;
-  padding-block: 0 var(--frame-accordion-content-padding-bottom, 1rem);
-  padding-inline: var(--frame-accordion-content-padding-inline, 1rem);
   transition:
-    height var(--frame-accordion-content-transition-duration, 240ms)
-      var(--frame-accordion-content-transition-timing, cubic-bezier(0.2, 0, 0, 1)),
-    opacity var(--frame-accordion-content-transition-duration, 220ms)
-      var(--frame-accordion-content-transition-timing, ease);
-  will-change: height, opacity;
+    height var(--frame-accordion-content-motion-duration, 220ms)
+      var(--frame-accordion-content-motion-timing, cubic-bezier(0.2, 0, 0, 1)),
+    opacity var(--frame-accordion-content-motion-duration, 220ms)
+      var(--frame-accordion-content-motion-timing, cubic-bezier(0.2, 0, 0, 1));
 }
 
-[frAccordionContent][data-state='closed'] {
-  opacity: var(--frame-accordion-content-opacity-closed, 0);
+.frame-accordion__content[data-state='open'] {
+  opacity: 1;
 }
 
-[frAccordionContent][data-state='open'] {
-  opacity: var(--frame-accordion-content-opacity-open, 1);
+.frame-accordion__content-inner {
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  padding-block: var(--frame-accordion-content-padding-bottom, 1rem);
+  padding-inline: var(--frame-accordion-content-padding-inline, 1rem);
 }
 
-[frAccordionIcon] {
+[frameAccordionIcon] {
   inline-size: var(--frame-accordion-icon-size, 1rem);
   block-size: var(--frame-accordion-icon-size, 1rem);
   flex: 0 0 auto;
@@ -100,7 +114,7 @@
     transform 180ms ease;
 }
 
-[frAccordionTrigger][data-state='open'] [frAccordionIcon] {
+button[frameAccordionTrigger][data-state='open'] [frameAccordionIcon] {
   color: var(--frame-frame-accent, var(--frame-primary));
   transform: rotate(var(--frame-accordion-icon-rotation, 180deg));
 }

package/breadcrumb/src/styles/breadcrumb.css

@@ -75,8 +75,12 @@ nav[frBreadcrumb] {
 }
 
 [frBreadcrumbSeparator]:empty::before {
-  color: var(--frame-frame-accent, var(--frame-primary));
-  content: "/";
+  inline-size: var(--frame-breadcrumb-separator-size);
+  block-size: var(--frame-breadcrumb-separator-size);
+  background: var(--frame-frame-accent, var(--frame-primary));
+  content: "";
+  mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M16%203%208%2021%27/%3E%3C/svg%3E") center / contain no-repeat;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M16%203%208%2021%27/%3E%3C/svg%3E") center / contain no-repeat;
 }
 
 [frBreadcrumbEllipsis],
@@ -97,6 +101,12 @@ frame-breadcrumb-ellipsis:hover {
   background: var(--frame-breadcrumb-ellipsis-hover-bg);
 }
 
+[frBreadcrumbEllipsis] svg,
+frame-breadcrumb-ellipsis svg {
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
 .frame-breadcrumb__sr-only {
   position: absolute;
   width: 1px;

package/button/src/styles/button.css

@@ -13,13 +13,6 @@
   --frame-button-root-active-bg: color-mix(in srgb, var(--frame-primary) 84%, var(--frame-foreground));
   --frame-button-root-active-border: var(--frame-button-root-hover-border);
   --frame-button-root-active-color: var(--frame-button-root-hover-color);
-  --frame-button-root-corner-color: color-mix(in srgb, var(--frame-primary-foreground) 88%, transparent);
-  --frame-button-root-corner-inset: var(--frame-frame-tick-inset, 0px);
-  --frame-button-root-corner-size: clamp(
-    0px,
-    calc((1px - var(--frame-button-root-radius, 0px)) * 9999),
-    var(--frame-frame-tick-size, 0.5rem)
-  );
   --frame-spinner-size: var(--frame-button-loading-size, 1rem);
   --frame-spinner-stroke: var(--frame-button-loading-stroke, 2px);
   --frame-spinner-track-color: var(
@@ -27,6 +20,8 @@
     color-mix(in srgb, currentColor 24%, transparent)
   );
   --frame-spinner-indicator-color: currentColor;
+  appearance: none;
+  -webkit-appearance: none;
   position: relative;
   display: inline-flex;
   min-width: fit-content;
@@ -36,7 +31,7 @@
   gap: var(--frame-button-root-gap, 0.5rem);
   border: 1px solid var(--frame-button-root-border);
   border-radius: var(--frame-button-root-radius, var(--frame-radius-md));
-  background: var(--frame-button-root-bg);
+  background-color: var(--frame-button-root-bg);
   box-shadow: var(--frame-button-root-shadow, var(--frame-shadow-sm));
   color: var(--frame-button-root-color);
   cursor: pointer;
@@ -59,32 +54,6 @@
   white-space: nowrap;
 }
 
-.frame-button::before {
-  position: absolute;
-  inset: 1px;
-  border-radius: inherit;
-  background:
-    linear-gradient(var(--frame-button-root-corner-color), var(--frame-button-root-corner-color))
-      left var(--frame-button-root-corner-inset) top var(--frame-button-root-corner-inset) /
-      var(--frame-button-root-corner-size) 1px no-repeat,
-    linear-gradient(var(--frame-button-root-corner-color), var(--frame-button-root-corner-color))
-      left var(--frame-button-root-corner-inset) top var(--frame-button-root-corner-inset) / 1px
-      var(--frame-button-root-corner-size) no-repeat,
-    linear-gradient(var(--frame-button-root-corner-color), var(--frame-button-root-corner-color))
-      right var(--frame-button-root-corner-inset) bottom var(--frame-button-root-corner-inset) /
-      var(--frame-button-root-corner-size) 1px no-repeat,
-    linear-gradient(var(--frame-button-root-corner-color), var(--frame-button-root-corner-color))
-      right var(--frame-button-root-corner-inset) bottom var(--frame-button-root-corner-inset) / 1px
-      var(--frame-button-root-corner-size) no-repeat;
-  pointer-events: none;
-  content: '';
-  transition: opacity 150ms ease;
-}
-
-:root[data-frame-corner-handles='false'] .frame-button::before {
-  content: none;
-}
-
 .frame-icon-button {
   inline-size: var(--frame-button-root-height, 2.5rem);
   min-inline-size: var(--frame-button-root-height, 2.5rem);
@@ -114,14 +83,14 @@
 }
 
 .frame-button:where(:not(:disabled, [data-disabled])):hover {
-  background: var(--frame-button-root-hover-bg);
+  background-color: var(--frame-button-root-hover-bg);
   border-color: var(--frame-button-root-hover-border);
   color: var(--frame-button-root-hover-color);
   filter: var(--frame-button-root-hover-filter, brightness(0.98));
 }
 
 .frame-button:where(:not(:disabled, [data-disabled])):active {
-  background: var(--frame-button-root-active-bg);
+  background-color: var(--frame-button-root-active-bg);
   border-color: var(--frame-button-root-active-border);
   /* box-shadow: var(--frame-button-root-active-shadow, inset 0 1px 2px rgb(0 0 0 / 0.12)); */
   color: var(--frame-button-root-active-color);
@@ -170,10 +139,6 @@
   box-shadow: var(--frame-button-root-disabled-shadow, none);
 }
 
-.frame-button:where(:disabled, [data-disabled])::before {
-  transition: none;
-}
-
 .frame-button[data-appearance='outline'] {
   --frame-button-root-bg: var(--frame-surface);
   --frame-button-root-border: var(--frame-border);
@@ -184,7 +149,6 @@
   --frame-button-root-active-bg: color-mix(in srgb, var(--frame-surface) 65%, var(--frame-muted));
   --frame-button-root-active-border: var(--frame-button-root-hover-border);
   --frame-button-root-active-color: var(--frame-button-root-hover-color);
-  --frame-button-root-corner-color: var(--frame-frame-accent);
 }
 
 .frame-button[data-appearance='ghost'] {
@@ -197,19 +161,9 @@
   --frame-button-root-active-bg: color-mix(in srgb, var(--frame-muted) 80%, transparent);
   --frame-button-root-active-border: var(--frame-button-root-hover-border);
   --frame-button-root-active-color: var(--frame-button-root-hover-color);
-  --frame-button-root-corner-color: var(--frame-frame-accent);
   --frame-button-root-shadow: none;
 }
 
-.frame-button[data-appearance='ghost']::before {
-  opacity: 0;
-}
-
-.frame-button[data-appearance='ghost']:where(:not(:disabled, [data-disabled])):hover::before,
-.frame-button[data-appearance='ghost']:focus-visible::before {
-  opacity: 1;
-}
-
 .frame-button[data-size='sm'] {
   --frame-button-root-height: var(--frame-density-control-height-sm);
   min-height: var(--frame-button-root-height);

package/button-group/src/styles/button-group.css

@@ -73,41 +73,3 @@ frame-button-group[data-orientation='vertical'] > :not(:first-child):not(:last-c
   position: relative;
 }
 
-.frame-button-group::before,
-[frButtonGroup]::before,
-frame-button-group::before {
-  --frame-button-group-corner-size: clamp(
-    0px,
-    calc((1px - var(--frame-button-group-radius, 0px)) * 9999),
-    var(--frame-frame-tick-size, 0.375rem)
-  );
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  background:
-    linear-gradient(var(--frame-blueprint-corner-color, var(--frame-frame-accent)), var(--frame-blueprint-corner-color, var(--frame-frame-accent)))
-      left top / var(--frame-button-group-corner-size) 1px no-repeat,
-    linear-gradient(var(--frame-blueprint-corner-color, var(--frame-frame-accent)), var(--frame-blueprint-corner-color, var(--frame-frame-accent)))
-      left top / 1px var(--frame-button-group-corner-size) no-repeat,
-    linear-gradient(var(--frame-blueprint-corner-color, var(--frame-frame-accent)), var(--frame-blueprint-corner-color, var(--frame-frame-accent)))
-      right bottom / var(--frame-button-group-corner-size) 1px no-repeat,
-    linear-gradient(var(--frame-blueprint-corner-color, var(--frame-frame-accent)), var(--frame-blueprint-corner-color, var(--frame-frame-accent)))
-      right bottom / 1px var(--frame-button-group-corner-size) no-repeat;
-  content: "";
-  pointer-events: none;
-}
-
-:root[data-frame-corner-handles='false'] .frame-button-group::before,
-:root[data-frame-corner-handles='false'] [frButtonGroup]::before,
-:root[data-frame-corner-handles='false'] frame-button-group::before {
-  content: none;
-}
-
-.frame-button-group > .frame-button::before,
-.frame-button-group > [frButton]::before,
-[frButtonGroup] > .frame-button::before,
-[frButtonGroup] > [frButton]::before,
-frame-button-group > .frame-button::before,
-frame-button-group > [frButton]::before {
-  content: none;
-}

package/calendar/src/styles/_vars.css

@@ -8,6 +8,8 @@
   --frame-calendar-gap: var(--frame-density-gap-xl);
   --frame-calendar-cell-size: var(--frame-density-control-height-md);
   --frame-calendar-effective-cell-size: var(--frame-calendar-cell-size);
+  --frame-calendar-cell-gap-block: 0.125rem;
+  --frame-calendar-cell-gap-inline: 0.125rem;
   --frame-calendar-column-count: 7;
   --frame-calendar-month-flex: 0 0 calc(var(--frame-calendar-effective-cell-size) * var(--frame-calendar-column-count));
   --frame-calendar-cell-radius: var(--frame-radius-md);
@@ -28,6 +30,8 @@
   --frame-calendar-select-radius: var(--frame-radius-md);
   --frame-calendar-select-border: var(--frame-border);
   --frame-calendar-select-bg: var(--frame-background);
+  --frame-calendar-select-min-width: 5rem;
+  --frame-calendar-select-padding-inline: 0.75rem;
   --frame-calendar-focus-shadow: none;
   --frame-calendar-transition-duration: 150ms;
 }

package/calendar/src/styles/calendar.css

@@ -52,21 +52,23 @@
 }
 
 .frame-calendar__select {
-  min-height: var(--frame-calendar-select-height);
-  border: 1px solid var(--frame-calendar-select-border);
-  border-radius: var(--frame-calendar-select-radius);
-  background: var(--frame-calendar-select-bg);
-  color: inherit;
-  font: inherit;
-  font-size: 0.8125rem;
-  padding-inline: 0.5rem;
-  transition:
-    border-color var(--frame-calendar-transition-duration) ease,
-    transform var(--frame-calendar-transition-duration) ease,
-    box-shadow var(--frame-calendar-transition-duration) ease;
+  --frame-select-trigger-height: var(--frame-calendar-select-height);
+  --frame-select-trigger-min-width: auto;
+  --frame-select-trigger-radius: var(--frame-calendar-select-radius);
+  --frame-select-trigger-padding-inline: var(--frame-calendar-select-padding-inline);
+  --frame-select-trigger-font-size: 0.8125rem;
+  --frame-select-trigger-font-weight: 400;
+  --frame-select-content-min-width: 100%;
+
+  min-width: var(--frame-calendar-select-min-width);
+}
+
+.frame-calendar__select-icon {
+  display: block;
+  inline-size: 1rem;
+  block-size: 1rem;
 }
 
-.frame-calendar__select:focus-visible,
 .frame-calendar__nav-button:focus-visible,
 .frame-calendar__day:focus-visible {
   outline: none;
@@ -105,8 +107,14 @@
   box-shadow: 2px 2px 0 color-mix(in srgb, var(--frame-frame-line-muted, var(--frame-border)) 82%, transparent);
 }
 
+.frame-calendar__nav-icon {
+  display: block;
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
 .frame-calendar__nav-button:disabled,
-.frame-calendar__select:disabled {
+.frame-calendar__select[data-disabled] {
   cursor: not-allowed;
   opacity: var(--frame-calendar-day-disabled-opacity);
 }
@@ -157,8 +165,8 @@
   position: relative;
   box-sizing: border-box;
   inline-size: var(--frame-calendar-effective-cell-size);
-  padding-block: 0.125rem;
-  padding-inline: 0;
+  padding-block: var(--frame-calendar-cell-gap-block);
+  padding-inline: var(--frame-calendar-cell-gap-inline);
   text-align: center;
 }
 
@@ -168,8 +176,8 @@
   box-sizing: border-box;
   display: inline-flex;
   inline-size: 100%;
-  min-inline-size: var(--frame-calendar-effective-cell-size);
-  min-block-size: var(--frame-calendar-effective-cell-size);
+  min-inline-size: calc(var(--frame-calendar-effective-cell-size) - (var(--frame-calendar-cell-gap-inline) * 2));
+  min-block-size: calc(var(--frame-calendar-effective-cell-size) - (var(--frame-calendar-cell-gap-block) * 2));
   aspect-ratio: 1;
   flex-direction: column;
   align-items: center;

package/carousel/src/styles/carousel.css

@@ -1,89 +1,103 @@
-@import './_vars.css';
-
-[frCarousel],
-frame-carousel {
-  position: relative;
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-[frCarouselContent] {
-  display: flex;
-  gap: var(--frame-carousel-gap);
-  overflow: auto;
-  overscroll-behavior: contain;
-  scroll-behavior: smooth;
-  scroll-snap-type: x mandatory;
-  scrollbar-width: none;
-  border-radius: var(--frame-carousel-viewport-radius);
-}
-
-[frCarouselContent]::-webkit-scrollbar {
-  display: none;
-}
-
-[frCarouselContent][data-orientation='vertical'] {
-  max-block-size: var(--frame-carousel-vertical-size, 20rem);
-  flex-direction: column;
-  scroll-snap-type: y mandatory;
-}
-
-[frCarouselItem],
-[data-frame-carousel-clone] {
-  flex: 0 0 var(--frame-carousel-item-size);
-  min-width: 0;
-  min-height: 0;
-  scroll-snap-align: var(--frame-carousel-snap-align, start);
-}
-
-[frCarousel][data-align='center'] [frCarouselItem],
-[frCarousel][data-align='center'] [data-frame-carousel-clone],
-frame-carousel[data-align='center'] [frCarouselItem],
-frame-carousel[data-align='center'] [data-frame-carousel-clone] {
-  --frame-carousel-snap-align: center;
-}
-
-[frCarousel][data-align='end'] [frCarouselItem],
-[frCarousel][data-align='end'] [data-frame-carousel-clone],
-frame-carousel[data-align='end'] [frCarouselItem],
-frame-carousel[data-align='end'] [data-frame-carousel-clone] {
-  --frame-carousel-snap-align: end;
-}
-
-[frCarouselPrevious],
-[frCarouselNext] {
-  position: absolute;
-  z-index: 1;
-  inline-size: var(--frame-carousel-control-size);
-  block-size: var(--frame-carousel-control-size);
-  padding: 0;
-}
-
-[frCarousel][data-orientation='horizontal'] [frCarouselPrevious],
-frame-carousel[data-orientation='horizontal'] [frCarouselPrevious] {
-  inset-block-start: 50%;
-  inset-inline-start: var(--frame-carousel-control-offset);
-  transform: translateY(-50%);
-}
-
-[frCarousel][data-orientation='horizontal'] [frCarouselNext],
-frame-carousel[data-orientation='horizontal'] [frCarouselNext] {
-  inset-block-start: 50%;
-  inset-inline-end: var(--frame-carousel-control-offset);
-  transform: translateY(-50%);
-}
-
-[frCarousel][data-orientation='vertical'] [frCarouselPrevious],
-frame-carousel[data-orientation='vertical'] [frCarouselPrevious] {
-  inset-block-start: var(--frame-carousel-control-offset);
-  inset-inline-start: 50%;
-  transform: translateX(-50%) rotate(90deg);
-}
-
-[frCarousel][data-orientation='vertical'] [frCarouselNext],
-frame-carousel[data-orientation='vertical'] [frCarouselNext] {
-  inset-block-end: var(--frame-carousel-control-offset);
-  inset-inline-start: 50%;
-  transform: translateX(-50%) rotate(90deg);
-}
+@import './_vars.css';
+
+[frCarousel],
+frame-carousel,
+.frame-carousel {
+  position: relative;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+[frCarouselContent],
+.frame-carousel__content {
+  display: flex;
+  gap: var(--frame-carousel-gap);
+  overflow: auto;
+  overscroll-behavior: contain;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  border-radius: var(--frame-carousel-viewport-radius);
+}
+
+[frCarouselContent]::-webkit-scrollbar,
+.frame-carousel__content::-webkit-scrollbar {
+  display: none;
+}
+
+[frCarouselContent][data-orientation='vertical'],
+.frame-carousel__content[data-orientation='vertical'] {
+  max-block-size: var(--frame-carousel-vertical-size, 20rem);
+  flex-direction: column;
+  scroll-snap-type: y mandatory;
+}
+
+[frCarouselItem],
+[data-frame-carousel-clone],
+.frame-carousel__item {
+  flex: 0 0 var(--frame-carousel-item-size);
+  min-width: 0;
+  min-height: 0;
+  scroll-snap-align: var(--frame-carousel-snap-align, start);
+}
+
+[frCarousel][data-align='center'] [frCarouselItem],
+[frCarousel][data-align='center'] [data-frame-carousel-clone],
+frame-carousel[data-align='center'] [frCarouselItem],
+frame-carousel[data-align='center'] [data-frame-carousel-clone],
+.frame-carousel[data-align='center'] .frame-carousel__item,
+.frame-carousel[data-align='center'] [data-frame-carousel-clone] {
+  --frame-carousel-snap-align: center;
+}
+
+[frCarousel][data-align='end'] [frCarouselItem],
+[frCarousel][data-align='end'] [data-frame-carousel-clone],
+frame-carousel[data-align='end'] [frCarouselItem],
+frame-carousel[data-align='end'] [data-frame-carousel-clone],
+.frame-carousel[data-align='end'] .frame-carousel__item,
+.frame-carousel[data-align='end'] [data-frame-carousel-clone] {
+  --frame-carousel-snap-align: end;
+}
+
+[frCarouselPrevious],
+[frCarouselNext],
+.frame-carousel__control {
+  position: absolute;
+  z-index: 1;
+  inline-size: var(--frame-carousel-control-size);
+  block-size: var(--frame-carousel-control-size);
+  padding: 0;
+}
+
+[frCarousel][data-orientation='horizontal'] [frCarouselPrevious],
+frame-carousel[data-orientation='horizontal'] [frCarouselPrevious],
+.frame-carousel[data-orientation='horizontal'] .frame-carousel__control--previous {
+  inset-block-start: 50%;
+  inset-inline-start: var(--frame-carousel-control-offset);
+  transform: translateY(-50%);
+}
+
+[frCarousel][data-orientation='horizontal'] [frCarouselNext],
+frame-carousel[data-orientation='horizontal'] [frCarouselNext],
+.frame-carousel[data-orientation='horizontal'] .frame-carousel__control--next {
+  inset-block-start: 50%;
+  inset-inline-end: var(--frame-carousel-control-offset);
+  transform: translateY(-50%);
+}
+
+[frCarousel][data-orientation='vertical'] [frCarouselPrevious],
+frame-carousel[data-orientation='vertical'] [frCarouselPrevious],
+.frame-carousel[data-orientation='vertical'] .frame-carousel__control--previous {
+  inset-block-start: var(--frame-carousel-control-offset);
+  inset-inline-start: 50%;
+  transform: translateX(-50%) rotate(90deg);
+}
+
+[frCarousel][data-orientation='vertical'] [frCarouselNext],
+frame-carousel[data-orientation='vertical'] [frCarouselNext],
+.frame-carousel[data-orientation='vertical'] .frame-carousel__control--next {
+  inset-block-end: var(--frame-carousel-control-offset);
+  inset-inline-start: 50%;
+  transform: translateX(-50%) rotate(90deg);
+}