diff --git a/src/components/breadcrumbs/breadcrumbs.css b/src/components/breadcrumbs/breadcrumbs.css index 77de88c..f1fdd03 100644 --- a/src/components/breadcrumbs/breadcrumbs.css +++ b/src/components/breadcrumbs/breadcrumbs.css @@ -8,7 +8,7 @@ } &:is(iu-hero-banner){ @media (--lg){ - margin-top: var(--iu-spacing-6); + margin-top: var(--iu-spacing-9); } } } \ No newline at end of file diff --git a/src/components/card/nav-card.ts b/src/components/card/nav-card.ts index 8df7a21..0ca0b68 100644 --- a/src/components/card/nav-card.ts +++ b/src/components/card/nav-card.ts @@ -28,7 +28,7 @@ padding: var(--iu-grid-gutter); color: var(--iu-color-black); text-decoration: none; - font-size: var(--iu-fs-lg); + font-size: var(--iu-fs-md); &:hover{ background: var(--iu-color-black); color: var(--iu-color-white); @@ -40,7 +40,7 @@ } .excerpt{ font-size: var(--iu-fs-1); - margin-bottom: var(--iu-spacing-5); + margin-bottom: var(--iu-spacing-3); flex-grow: 1; } .subtitle{ @@ -65,7 +65,7 @@ `; @property() href : string = ''; - @property() text : string = ''; + @property() heading : string = ''; @property() excerpt? : string; @property() subtitle? : string; @@ -123,7 +123,7 @@ ${this.subtitle ? html`${this.subtitle}` : ''} ${this.excerpt && !this.subtitle ? html`${this.excerpt}` : ''}
-

${this.text}

+

${this.heading}

${external ? this.renderExtIcon() : this.renderIntIcon()}
diff --git a/src/components/card/page-card.ts b/src/components/card/page-card.ts new file mode 100644 index 0000000..f2c2a01 --- /dev/null +++ b/src/components/card/page-card.ts @@ -0,0 +1,61 @@ +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ + +import {LitElement, html, css} from 'lit'; +import {customElement, property, query} from 'lit/decorators.js'; + +@customElement('iu-page-card') + +export class PageCard extends LitElement { + + static override styles = css` + :host{ + display: block; + } + a{ + text-decoration: none; + color: var(--iu-color-black); + } + p{ + padding-right: var(--iu-spacing-2); + font: var(--iu-f-xl); + margin-bottom: var(--iu-spacing-2); + margin-top: 0; + } + .img{ + position: relative; + margin-bottom: 1.125rem; + aspect-ratio: 3 / 2; + } + .img img{ + width: 100%; + height: 100%; + object-cover: cover; + } + `; + + @property() href : string = ''; + @property() heading : string = ''; + @property() img? : string = ''; + + override render() { + return html` + +

${this.heading}

+
+ ${this.img && html``} +
+
+ `; + } + +} + +declare global { + interface HTMLElementTagNameMap { + 'iu-page-card': PageCard; + } +} \ No newline at end of file diff --git a/src/components/carousel/carousel.ts b/src/components/carousel/carousel.ts index 53f3e9c..53aa90f 100644 --- a/src/components/carousel/carousel.ts +++ b/src/components/carousel/carousel.ts @@ -15,8 +15,9 @@ @customElement('iu-carousel') export class Carousel extends LitElement { + private swiper?: Swiper; static override styles = [ - css([swiperStyles]), + css`${unsafeCSS(swiperStyles)}`, css` .img{ aspect-ratio: 3/2; @@ -73,19 +74,43 @@ @property({ type: Array }) items: Array<{ path: string; caption?: string }> = []; override firstUpdated() { + const swiperEl = this.shadowRoot?.querySelector('.swiper') as HTMLElement; + const paginationEl = this.shadowRoot?.querySelector('.swiper-pagination') as HTMLElement; + const nextEl = this.shadowRoot?.querySelector('.swiper-button-next') as HTMLElement; + const prevEl = this.shadowRoot?.querySelector('.swiper-button-prev') as HTMLElement; + + if (!swiperEl || !paginationEl || !nextEl || !prevEl) { + console.error('Required Swiper elements not found'); + return; + } + // Initialize Swiper once the component is rendered - new Swiper(this.shadowRoot.querySelector('.swiper'), { + this.swiper = new Swiper(swiperEl, { modules: [EffectFade, Navigation, Pagination], loop: true, effect: 'fade', - crossFade: true, pagination: { - el: this.shadowRoot.querySelector('.swiper-pagination') + el: paginationEl, + clickable: true, + renderBullet: (index, className) => { + return ``; + } }, navigation: { - nextEl: this.shadowRoot.querySelector('.swiper-button-next'), - prevEl: this.shadowRoot.querySelector('.swiper-button-prev') + nextEl: nextEl, + prevEl: prevEl }, + on: { + slideChange: () => { + // Update aria-selected state for pagination bullets + const bullets = paginationEl.querySelectorAll('button'); + bullets.forEach((bullet, index) => { + bullet.setAttribute('aria-selected', + index === this.swiper?.realIndex ? 'true' : 'false' + ); + }); + } + } }); requestAnimationFrame(() => { const height = Math.floor(this.clientWidth / 1.5) @@ -95,11 +120,11 @@ override render() { return html` -
-
+
+