diff --git a/packages/swirl-components/src/components.d.ts b/packages/swirl-components/src/components.d.ts index c51741dde..0ea1baaaa 100644 --- a/packages/swirl-components/src/components.d.ts +++ b/packages/swirl-components/src/components.d.ts @@ -413,6 +413,9 @@ export namespace Components { "label": string; "loopAround"?: boolean; "nextSlideButtonLabel"?: string; + "padding"?: SwirlCarouselPadding; + "paddingBlockEnd"?: SwirlCarouselPadding; + "paddingBlockStart"?: SwirlCarouselPadding; "paddingInlineEnd"?: SwirlCarouselPadding; "paddingInlineStart"?: SwirlCarouselPadding; "previousSlideButtonLabel"?: string; @@ -6092,6 +6095,9 @@ declare namespace LocalJSX { "loopAround"?: boolean; "nextSlideButtonLabel"?: string; "onActiveSlidesChange"?: (event: SwirlCarouselCustomEvent) => void; + "padding"?: SwirlCarouselPadding; + "paddingBlockEnd"?: SwirlCarouselPadding; + "paddingBlockStart"?: SwirlCarouselPadding; "paddingInlineEnd"?: SwirlCarouselPadding; "paddingInlineStart"?: SwirlCarouselPadding; "previousSlideButtonLabel"?: string; diff --git a/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.css b/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.css index cf504f81e..ff476d1b1 100644 --- a/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.css +++ b/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.css @@ -2,14 +2,11 @@ :host { --swirl-carousel-spacing: var(--s-space-16); - --swirl-carousel-padding-block: var(--s-space-24); position: relative; display: block; overflow: hidden; width: 100%; - margin-top: calc(-1 * var(--swirl-carousel-padding-block)); - margin-bottom: calc(-1 * var(--swirl-carousel-padding-block)); &(:hover) { & .carousel__previous-slide-button, @@ -33,9 +30,9 @@ &:after { content: ''; width: var(--s-space-32); - height: calc(100% - var(--swirl-carousel-padding-block) * 2); + height: 100%; position: absolute; - top: var(--swirl-carousel-padding-block); + top: 0; z-index: 1; pointer-events: none; transition: opacity 0.2s; @@ -71,8 +68,6 @@ overflow-x: auto; overflow-y: hidden; width: 100%; - padding: var(--swirl-carousel-padding-block) var(--s-space-16); - scroll-padding: var(--s-space-16); scrollbar-width: none; scroll-snap-type: x mandatory; scroll-behavior: smooth; diff --git a/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx b/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx index 598f3bcb6..1f892a953 100644 --- a/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx +++ b/packages/swirl-components/src/components/swirl-carousel/swirl-carousel.tsx @@ -55,6 +55,9 @@ export class SwirlCarousel { @Prop() previousSlideButtonLabel?: string = "Previous slide"; @Prop() fade?: boolean = false; @Prop() loopAround?: boolean = false; + @Prop() padding?: SwirlCarouselPadding = "16"; + @Prop() paddingBlockEnd?: SwirlCarouselPadding; + @Prop() paddingBlockStart?: SwirlCarouselPadding; @Prop() paddingInlineEnd?: SwirlCarouselPadding; @Prop() paddingInlineStart?: SwirlCarouselPadding; @Prop() spacing?: SwirlCarouselSpacing = "16"; @@ -199,6 +202,15 @@ export class SwirlCarousel { this.el.style.setProperty("--swirl-carousel-spacing", `${this.spacing}px`); const slidesStyles = { + padding: Boolean(this.padding) + ? `var(--s-space-${this.padding})` + : undefined, + paddingBlockEnd: Boolean(this.paddingBlockEnd) + ? `var(--s-space-${this.paddingBlockEnd})` + : undefined, + paddingBlockStart: Boolean(this.paddingBlockStart) + ? `var(--s-space-${this.paddingBlockStart})` + : undefined, paddingInlineEnd: Boolean(this.paddingInlineEnd) ? `var(--s-space-${this.paddingInlineEnd})` : undefined, @@ -207,6 +219,8 @@ export class SwirlCarousel { : undefined, scrollPadding: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` + : Boolean(this.padding) + ? `var(--s-space-${this.padding})` : undefined, }; diff --git a/packages/swirl-components/vscode-data.json b/packages/swirl-components/vscode-data.json index a929fb9d7..7fd010bc6 100644 --- a/packages/swirl-components/vscode-data.json +++ b/packages/swirl-components/vscode-data.json @@ -1642,6 +1642,123 @@ "name": "next-slide-button-label", "description": "" }, + { + "name": "padding", + "description": "", + "values": [ + { + "name": "0" + }, + { + "name": "12" + }, + { + "name": "16" + }, + { + "name": "2" + }, + { + "name": "24" + }, + { + "name": "32" + }, + { + "name": "4" + }, + { + "name": "40" + }, + { + "name": "48" + }, + { + "name": "64" + }, + { + "name": "8" + } + ] + }, + { + "name": "padding-block-end", + "description": "", + "values": [ + { + "name": "0" + }, + { + "name": "12" + }, + { + "name": "16" + }, + { + "name": "2" + }, + { + "name": "24" + }, + { + "name": "32" + }, + { + "name": "4" + }, + { + "name": "40" + }, + { + "name": "48" + }, + { + "name": "64" + }, + { + "name": "8" + } + ] + }, + { + "name": "padding-block-start", + "description": "", + "values": [ + { + "name": "0" + }, + { + "name": "12" + }, + { + "name": "16" + }, + { + "name": "2" + }, + { + "name": "24" + }, + { + "name": "32" + }, + { + "name": "4" + }, + { + "name": "40" + }, + { + "name": "48" + }, + { + "name": "64" + }, + { + "name": "8" + } + ] + }, { "name": "padding-inline-end", "description": "",