@oslokommune/punkt-elements 16.26.7 → 17.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "16.26.7",
+  "version": "17.0.2",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -41,7 +41,7 @@
     "@babel/plugin-transform-private-property-in-object": "^7.27.1",
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-typescript": "^7.28.3",
-    "@oslokommune/punkt-assets": "^16.26.2",
+    "@oslokommune/punkt-assets": "^17.0.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@types/jest-axe": "^3.5.9",
@@ -80,5 +80,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "d18b9f10cae218fb12701b4dd63eaef41d39065b"
+  "gitHead": "53b7f70c8773eaf41b4d216be78bbaa6ea1e48ff"
 }

package/src/components/accordion/accordion-context.ts

@@ -0,0 +1,8 @@
+import { createContext } from '@lit/context'
+import type { TAccordionSkin } from 'shared-types'
+
+export interface AccordionContext {
+  skin?: TAccordionSkin
+}
+
+export const accordionContext = createContext<AccordionContext>(Symbol('pkt-accordion-context'))

package/src/components/accordion/accordion.test.ts

@@ -170,6 +170,50 @@ describe('PktAccordion', () => {
       })
     })
 
+    test('propagates plus-minus skin to items via context', async () => {
+      const container = await createAccordion('skin="plus-minus"')
+
+      const accordion = container.querySelector('pkt-accordion') as PktAccordion
+      const item = container.querySelector('pkt-accordion-item') as PktAccordionItem
+      await accordion.updateComplete
+      await item.updateComplete
+
+      expect(container.querySelector('.pkt-accordion-item__icon--plus')).toBeInTheDocument()
+      expect(container.querySelector('.pkt-accordion-item__icon--minus')).toBeInTheDocument()
+      expect(container.querySelector('[name="chevron-thin-down"]')).not.toBeInTheDocument()
+    })
+
+    test('updates item icons when skin property changes', async () => {
+      const container = await createAccordion('skin="outlined"')
+
+      const accordion = container.querySelector('pkt-accordion') as PktAccordion
+      const item = container.querySelector('pkt-accordion-item') as PktAccordionItem
+      await accordion.updateComplete
+      await item.updateComplete
+
+      expect(container.querySelector('[name="chevron-thin-down"]')).toBeInTheDocument()
+      expect(container.querySelector('.pkt-accordion-item__icon--plus')).not.toBeInTheDocument()
+
+      accordion.skin = 'plus-minus'
+      await accordion.updateComplete
+      await item.updateComplete
+
+      expect(container.querySelector('[name="chevron-thin-down"]')).not.toBeInTheDocument()
+      expect(container.querySelector('.pkt-accordion-item__icon--plus')).toBeInTheDocument()
+    })
+
+    test('item skin property overrides accordion skin', async () => {
+      const container = await createAccordion('skin="plus-minus"', 'skin="outlined"')
+
+      const accordion = container.querySelector('pkt-accordion') as PktAccordion
+      const item = container.querySelector('pkt-accordion-item') as PktAccordionItem
+      await accordion.updateComplete
+      await item.updateComplete
+
+      expect(container.querySelector('[name="chevron-thin-down"]')).toBeInTheDocument()
+      expect(container.querySelector('.pkt-accordion-item__icon--plus')).not.toBeInTheDocument()
+    })
+
     test('updates accordion item names when name property changes', async () => {
       const container = await createAccordionWithMultipleItems()
 

package/src/components/accordion/accordion.ts

@@ -1,8 +1,11 @@
+import { provide } from '@lit/context'
 import { html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import type { TAccordionSkin } from 'shared-types'
 
+import { accordionContext, type AccordionContext } from './accordion-context'
+
 export type TPktAccordionSkin = TAccordionSkin
 
 export interface IPktAccordion {
@@ -24,11 +27,18 @@ export class PktAccordion extends LitElement implements IPktAccordion {
     'borderless'
   @property({ type: String, reflect: true, attribute: 'name' }) name: string = ''
 
-  updated(changedProperties: Map<string, any>) {
+  // Deler skin med pkt-accordion-item-children via context
+  @provide({ context: accordionContext })
+  @state()
+  private context: AccordionContext = { skin: this.skin }
+
+  willUpdate(changedProperties: Map<string, any>) {
     if (changedProperties.has('skin')) {
-      this.requestUpdate()
+      this.context = { ...this.context, skin: this.skin }
     }
+  }
 
+  updated(changedProperties: Map<string, any>) {
     if (changedProperties.has('name')) {
       this.updateAccordionItemNames()
     }

package/src/components/accordion/accordionitem.ts

@@ -1,9 +1,11 @@
 import { PktElementWithSlot } from '@/base-elements/element-with-slot'
 import { slotContent } from '@/directives/slot-content'
+import { consume } from '@lit/context'
 import { html, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { createRef, Ref, ref } from 'lit/directives/ref.js'
 import { TPktAccordionSkin } from './accordion'
+import { accordionContext, type AccordionContext } from './accordion-context'
 import { classMap } from 'lit/directives/class-map.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
@@ -32,6 +34,11 @@ export class PktAccordionItem extends PktElementWithSlot implements IPktAccordio
   @property({ type: Boolean, reflect: true }) isOpen: boolean = false
   @property({ type: String, reflect: true }) name: string | undefined = undefined
 
+  // Skin fra pkt-accordion-forelder; egen skin-property overstyrer
+  @consume({ context: accordionContext, subscribe: true })
+  @property({ attribute: false })
+  private context?: AccordionContext
+
   accordionItemRef: Ref<HTMLDivElement> = createRef()
 
   constructor() {
@@ -51,7 +58,8 @@ export class PktAccordionItem extends PktElementWithSlot implements IPktAccordio
       [`pkt-accordion-item--${this.skin}`]: !!this.skin,
     }
 
-    const isPlusMinus = this.skin === 'plus-minus'
+    const actualSkin = this.skin ?? this.context?.skin
+    const isPlusMinus = actualSkin === 'plus-minus'
 
     return html`
       <details

package/src/components/alert/alert.test.ts

@@ -15,6 +15,7 @@ export interface AlertTestConfig extends BaseTestConfig {
   date?: string
   closeAlert?: boolean
   ariaLive?: string
+  size?: string
 }
 
 // Use shared framework
@@ -104,7 +105,7 @@ describe('PktAlert', () => {
       const alertDiv = alert.querySelector('.pkt-alert')
       expect(alertDiv).toHaveClass('pkt-alert')
       expect(alertDiv).toHaveClass('pkt-alert--info')
-      expect(alertDiv).not.toHaveClass('pkt-alert--compact')
+      expect(alertDiv).toHaveClass('pkt-alert--medium')
     })
 
     test('applies different skin properties correctly', async () => {
@@ -130,7 +131,55 @@ describe('PktAlert', () => {
       expect(alert.compact).toBe(true)
 
       const alertDiv = alert.querySelector('.pkt-alert')
-      expect(alertDiv).toHaveClass('pkt-alert--compact')
+      expect(alertDiv).toHaveClass('pkt-alert--small')
+    })
+
+    test('applies pkt-alert--medium by default', async () => {
+      const { alert } = await createAlertTest()
+
+      await alert.updateComplete
+
+      const alertDiv = alert.querySelector('.pkt-alert')
+      expect(alertDiv).toHaveClass('pkt-alert--medium')
+      expect(alertDiv).not.toHaveClass('pkt-alert--compact')
+    })
+
+    test('applies size classes for small and xsmall', async () => {
+      const { alert: smallAlert } = await createAlertTest({ size: 'small' })
+      await smallAlert.updateComplete
+
+      const smallDiv = smallAlert.querySelector('.pkt-alert')
+      expect(smallDiv).toHaveClass('pkt-alert--small')
+      expect(smallDiv).not.toHaveClass('pkt-alert--medium')
+
+      const { alert: xsmallAlert } = await createAlertTest({ size: 'xsmall' })
+      await xsmallAlert.updateComplete
+
+      const xsmallDiv = xsmallAlert.querySelector('.pkt-alert')
+      expect(xsmallDiv).toHaveClass('pkt-alert--xsmall')
+      expect(xsmallDiv).not.toHaveClass('pkt-alert--medium')
+    })
+
+    test('applies pkt-alert--small when compact is set without size', async () => {
+      const { alert } = await createAlertTest({ compact: true })
+
+      await alert.updateComplete
+
+      const alertDiv = alert.querySelector('.pkt-alert')
+      expect(alertDiv).toHaveClass('pkt-alert--small')
+      expect(alertDiv).not.toHaveClass('pkt-alert--compact')
+      expect(alertDiv).not.toHaveClass('pkt-alert--medium')
+    })
+
+    test('explicit size wins over compact', async () => {
+      const { alert } = await createAlertTest({ compact: true, size: 'xsmall' })
+
+      await alert.updateComplete
+
+      const alertDiv = alert.querySelector('.pkt-alert')
+      expect(alertDiv).toHaveClass('pkt-alert--xsmall')
+      expect(alertDiv).not.toHaveClass('pkt-alert--compact')
+      expect(alertDiv).not.toHaveClass('pkt-alert--small')
     })
 
     test('handles title property', async () => {

package/src/components/alert/alert.ts

@@ -18,8 +18,12 @@ export interface IPktAlert {
   title?: string
   date?: string | null
   ariaLive?: TAriaLive | null
+  /**
+   * @deprecated Bruk size i stedet. Uten eksplisitt size gir compact størrelsen 'small'.
+   */
   compact?: boolean
   role?: string
+  size?: 'medium' | 'small' | 'xsmall'
 }
 export class PktAlert extends PktElementWithSlot implements IPktAlert {
   constructor() {
@@ -29,7 +33,7 @@ export class PktAlert extends PktElementWithSlot implements IPktAlert {
 
   // Properties
 
-  @property({ type: Boolean, reflect: false }) compact = specs.props.compact.default
+  @property({ type: Boolean, reflect: false }) compact = specs.deprecated.compact.default
   @property({ type: String, reflect: true }) title: string = ''
   @property({ type: String, reflect: true }) skin: TAlertSkin = specs.props.skin
     .default as TAlertSkin
@@ -39,7 +43,8 @@ export class PktAlert extends PktElementWithSlot implements IPktAlert {
   @property({ type: Boolean, reflect: true }) closeAlert = specs.props.closeAlert.default
   @property({ type: String, reflect: true }) date: string | null = null
   @property({ type: String, reflect: true }) role: string = 'status'
-
+  @property({ type: String, attribute: 'size' })
+  size?: 'medium' | 'small' | 'xsmall'
   @state() _isClosed: boolean = false
 
   // Lifecycle
@@ -69,10 +74,11 @@ export class PktAlert extends PktElementWithSlot implements IPktAlert {
   // Render
 
   render() {
+    const alertSize = this.size ?? (this.compact ? 'small' : 'medium')
     const classes = {
       'pkt-alert': true,
-      'pkt-alert--compact': this.compact,
-      [`pkt-alert--${this.skin}`]: this.skin,
+      [`pkt-alert--${alertSize}`]: true,
+      [`pkt-alert--${this.skin}`]: true,
       'pkt-hide': this._isClosed,
     }
 
@@ -97,7 +103,7 @@ export class PktAlert extends PktElementWithSlot implements IPktAlert {
                   <pkt-button
                     tabindex="0"
                     aria-label="close"
-                    size=${this.compact ? 'small' : 'medium'}
+                    size=${alertSize}
                     type="button"
                     skin="tertiary"
                     iconName="close"

package/src/components/breadcrumbs/breadcrumbs.test.ts

@@ -61,7 +61,9 @@ describe('PktBreadcrumbs', () => {
       document.body.appendChild(container)
       container.innerHTML = `<pkt-breadcrumbs breadcrumbs='${JSON.stringify(defaultBreadcrumbs)}'></pkt-breadcrumbs>`
 
-      const element = container.querySelector('pkt-breadcrumbs') as CustomElementFor<'pkt-breadcrumbs'>
+      const element = container.querySelector(
+        'pkt-breadcrumbs',
+      ) as CustomElementFor<'pkt-breadcrumbs'>
       await customElements.whenDefined('pkt-breadcrumbs')
       await element.updateComplete
 
@@ -141,7 +143,10 @@ describe('PktBreadcrumbs', () => {
     test('dispatches navigate event on link click', async () => {
       const { breadcrumbs } = await createBreadcrumbsTest({ breadcrumbs: defaultBreadcrumbs })
       const navigateSpy = vi.fn()
-      breadcrumbs.addEventListener('navigate', navigateSpy)
+      breadcrumbs.addEventListener('navigate', (e: Event) => {
+        e.preventDefault()
+        navigateSpy(e)
+      })
 
       const link = breadcrumbs.querySelector('.pkt-breadcrumbs__link') as HTMLAnchorElement
       fireEvent.click(link)
@@ -154,7 +159,10 @@ describe('PktBreadcrumbs', () => {
     test('dispatches navigate event on mobile back-link click', async () => {
       const { breadcrumbs } = await createBreadcrumbsTest({ breadcrumbs: defaultBreadcrumbs })
       const navigateSpy = vi.fn()
-      breadcrumbs.addEventListener('navigate', navigateSpy)
+      breadcrumbs.addEventListener('navigate', (e: Event) => {
+        e.preventDefault()
+        navigateSpy(e)
+      })
 
       const mobileLink = breadcrumbs.querySelector('.pkt-breadcrumbs--mobile') as HTMLAnchorElement
       fireEvent.click(mobileLink)

package/src/components/button/button.test.ts

@@ -83,6 +83,29 @@ describe('PktButton', () => {
   })
 
   describe('Properties and attributes', () => {
+    test('flytter aria-haspopup/-expanded/-controls fra verten til den indre knappen', async () => {
+      const { button } = await createButtonTest({ content: 'Meny' })
+      button.setAttribute('aria-haspopup', 'dialog')
+      button.setAttribute('aria-expanded', 'false')
+      button.setAttribute('aria-controls', 'meny-panel')
+      button.requestUpdate()
+      await button.updateComplete
+
+      const inner = button.querySelector('button')
+      expect(inner).toHaveAttribute('aria-haspopup', 'dialog')
+      expect(inner).toHaveAttribute('aria-expanded', 'false')
+      expect(inner).toHaveAttribute('aria-controls', 'meny-panel')
+      expect(button).not.toHaveAttribute('aria-haspopup')
+      expect(button).not.toHaveAttribute('aria-expanded')
+      expect(button).not.toHaveAttribute('aria-controls')
+
+      // Ny verdi plukkes opp ved neste oppdatering
+      button.setAttribute('aria-expanded', 'true')
+      button.requestUpdate()
+      await button.updateComplete
+      expect(inner).toHaveAttribute('aria-expanded', 'true')
+    })
+
     test('applies default properties correctly', async () => {
       const { button } = await createButtonTest({ content: 'Test Button' })
       await button.updateComplete

package/src/components/button/button.ts

@@ -3,7 +3,7 @@ import { slotContent } from '@/directives/slot-content'
 import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon'
 import type { Booleanish, THTMLButtonType } from 'shared-types'
 import { html, nothing, PropertyValues } from 'lit'
-import { property, customElement } from 'lit/decorators.js'
+import { property, customElement, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
@@ -16,7 +16,7 @@ if (typeof window !== 'undefined') {
   window.pktAnimationPath = window.pktAnimationPath || defaultAnimationPath
 }
 export type TPktButtonMode = 'light' | 'dark'
-export type TPktButtonSize = 'small' | 'medium' | 'large'
+export type TPktButtonSize = 'xsmall' | 'small' | 'medium' | 'large'
 export type TPktButtonColor =
   | 'blue'
   | 'blue-outline'
@@ -59,7 +59,6 @@ export interface IPktButton {
   loadingAnimationPath?: string
 }
 export class PktButton extends PktElementWithSlot<IPktButton> implements IPktButton {
-
   // Properties
   @property({ type: String }) iconName: string = 'user'
   @property({ type: String }) secondIconName: string = 'user'
@@ -120,6 +119,29 @@ export class PktButton extends PktElementWithSlot<IPktButton> implements IPktBut
     }
   }
 
+  private static readonly relocatedAriaAttributes = [
+    'aria-haspopup',
+    'aria-expanded',
+    'aria-controls',
+  ] as const
+
+  @state() private relocatedAria: Record<string, string> = {}
+
+  protected willUpdate(changed: PropertyValues): void {
+    super.willUpdate(changed)
+    let moved = false
+    const next = { ...this.relocatedAria }
+    for (const name of PktButton.relocatedAriaAttributes) {
+      const value = this.getAttribute(name)
+      if (value !== null) {
+        next[name] = value
+        this.removeAttribute(name)
+        moved = true
+      }
+    }
+    if (moved) this.relocatedAria = next
+  }
+
   protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties)
 
@@ -156,6 +178,9 @@ export class PktButton extends PktElementWithSlot<IPktButton> implements IPktBut
         ?disabled=${!!this.disabled}
         aria-busy=${ifDefined(this.isLoading ? 'true' : undefined)}
         aria-disabled=${ifDefined(this.disabled || this.isLoading ? 'true' : undefined)}
+        aria-haspopup=${ifDefined(this.relocatedAria['aria-haspopup'])}
+        aria-expanded=${ifDefined(this.relocatedAria['aria-expanded'])}
+        aria-controls=${ifDefined(this.relocatedAria['aria-controls'])}
         form=${ifDefined(formId)}
       >
         ${this.isLoading

package/src/components/combobox/combobox.core.test.ts

@@ -77,6 +77,26 @@ describe('PktCombobox', () => {
       expect(listbox).toBeInTheDocument()
     })
 
+    test('applies input wrapper size classes for small and xsmall', async () => {
+      const smallContainer = await createCombobox('id="size-small" label="Test" input-size="small"')
+      const smallCombobox = smallContainer.querySelector('pkt-combobox') as PktCombobox
+      await smallCombobox.updateComplete
+      const smallInner = smallCombobox.querySelector('pkt-input-wrapper .pkt-inputwrapper')
+      expect(smallInner?.classList.contains('pkt-inputwrapper--small')).toBe(true)
+      expect(smallInner?.classList.contains('pkt-inputwrapper--xsmall')).toBe(false)
+
+      document.body.innerHTML = ''
+
+      const xsmallContainer = await createCombobox(
+        'id="size-xsmall" label="Test" input-size="xsmall"',
+      )
+      const xsmallCombobox = xsmallContainer.querySelector('pkt-combobox') as PktCombobox
+      await xsmallCombobox.updateComplete
+      const xsmallInner = xsmallCombobox.querySelector('pkt-input-wrapper .pkt-inputwrapper')
+      expect(xsmallInner?.classList.contains('pkt-inputwrapper--small')).toBe(false)
+      expect(xsmallInner?.classList.contains('pkt-inputwrapper--xsmall')).toBe(true)
+    })
+
     test('renders select-only combobox with correct ARIA attributes', async () => {
       const container = await createCombobox('id="test-arrow" name="test" label="Test"')
 

package/src/components/combobox/combobox.ts

@@ -278,6 +278,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
   render() {
     return html`
       <pkt-input-wrapper
+        .size=${this.inputSize}
         .label=${this.label}
         .helptext=${this.helptext}
         .helptextDropdown=${ifDefined(this.helptextDropdown)}
@@ -303,6 +304,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
           <div
             class=${classMap({
               'pkt-combobox__input': true,
+              [`pkt-combobox__input--${this.inputSize}`]: true,
               'pkt-combobox__input--fullwidth': this.fullwidth,
               'pkt-combobox__input--open': this._isOptionsOpen,
               'pkt-combobox__input--error': this.hasError,

package/src/components/consent/consent.test.ts

@@ -172,6 +172,9 @@ describe('PktConsent', () => {
       const button = consent.querySelector('pkt-button')
       expect(button).toBeInTheDocument()
       expect(button?.getAttribute('skin')).toBe(null) // Default button
+      // aria-haspopup flyttes fra pkt-button-verten til den indre knappen
+      expect(button?.querySelector('button')).toHaveAttribute('aria-haspopup', 'dialog')
+      expect(button).not.toHaveAttribute('aria-haspopup')
     })
 
     test('renders as link trigger type', async () => {
@@ -193,10 +196,10 @@ describe('PktConsent', () => {
       expect(consent.triggerType).toBe('footerlink')
       const footerLink = consent.querySelector('a.pkt-footer__link')
       expect(footerLink).toBeInTheDocument()
+      expect(footerLink).toHaveAttribute('aria-haspopup', 'dialog')
 
-      const icon = footerLink?.querySelector('pkt-icon')
-      expect(icon).toBeInTheDocument()
-      expect(icon?.getAttribute('name')).toBe('chevron-right')
+      // Ny footer-stil: ren understreket lenke uten ikon.
+      expect(footerLink?.querySelector('pkt-icon')).toBeNull()
     })
 
     test('renders as icon trigger type', async () => {

package/src/components/consent/consent.ts

@@ -3,7 +3,6 @@ import { html, PropertyValues } from 'lit'
 import { PktElement } from '@/base-elements/element'
 import { consentStrings } from './strings'
 import '../button'
-import '../icon'
 
 interface ConsentItem {
   name: string
@@ -205,25 +204,34 @@ export class PktConsent extends PktElement<IPktConsent> implements IPktConsent {
   }
 
   render() {
+    // aria-haspopup: triggeren åpner consent-dialogen, den navigerer ikke
     if (this.triggerType === 'link') {
-      return html`<a href="#" class="pkt-link" @click=${this.openModal}>${this.triggerText}</a>`
+      return html`<a href="#" class="pkt-link" aria-haspopup="dialog" @click=${this.openModal}
+        >${this.triggerText}</a
+      >`
     }
     if (this.triggerType === 'footerlink') {
-      return html`<a href="#" class="pkt-footer__link" @click=${this.openModal}>
-        <pkt-icon name="chevron-right" class="pkt-footer__link-icon"></pkt-icon>
-        ${this.triggerText}
-      </a>`
+      return html`<a
+        href="#"
+        class="pkt-footer__link"
+        aria-haspopup="dialog"
+        @click=${this.openModal}
+        >${this.triggerText}</a
+      >`
     }
     if (this.triggerType === 'icon') {
       return html`<pkt-button
         skin="tertiary"
         variant="icon-only"
         iconName="cookie"
+        aria-haspopup="dialog"
         @click=${this.openModal}
         >${this.triggerText}</pkt-button
       >`
     }
-    return html`<pkt-button @click=${this.openModal}>${this.triggerText}</pkt-button>`
+    return html`<pkt-button aria-haspopup="dialog" @click=${this.openModal}
+      >${this.triggerText}</pkt-button
+    >`
   }
 }
 

package/src/components/datepicker/datepicker-base.ts

@@ -5,6 +5,7 @@ import { classMap } from 'lit/directives/class-map.js'
 import { PktElement } from '@/base-elements/element'
 import { cssUtils } from './datepicker-utils'
 import { IDatepickerStrings } from './datepicker-types'
+import type { TPktInputSize } from 'shared-types/size'
 import '@/components/icon'
 
 /**
@@ -43,6 +44,9 @@ export abstract class PktDatepickerBase extends PktElement {
   @property({ type: Object })
   inputClasses: Record<string, boolean> = {}
 
+  @property({ type: String })
+  inputSize: TPktInputSize = 'medium'
+
   @property({ type: Object })
   internals?: ElementInternals
 
@@ -122,7 +126,7 @@ export abstract class PktDatepickerBase extends PktElement {
   protected renderCalendarButton(): TemplateResult {
     return html`
       <button
-        class="${classMap(cssUtils.getButtonClasses())}"
+        class="${classMap(cssUtils.getButtonClasses(this.inputSize))}"
         type="button"
         @click=${(e: Event) => this.dispatchToggleCalendar(e)}
         @keydown=${(e: KeyboardEvent) => {

package/src/components/datepicker/datepicker-utils.test.ts

@@ -427,6 +427,11 @@ describe('datepicker-utils', () => {
         const classes = cssUtils.getInputClasses(false, false, false, false, false, 'text')
         expect(classes['ios-readonly-hack']).toBe(true)
       })
+
+      it('should include input size class', () => {
+        const classes = cssUtils.getInputClasses(false, false, false, false, false, 'date', 'small')
+        expect(classes['pkt-input--small']).toBe(true)
+      })
     })
 
     describe('getButtonClasses', () => {
@@ -438,6 +443,11 @@ describe('datepicker-utils', () => {
         expect(classes['pkt-btn--tertiary']).toBe(true)
         expect(classes['pkt-datepicker__calendar-button']).toBe(true)
       })
+
+      it('should include button size class', () => {
+        const classes = cssUtils.getButtonClasses('xsmall')
+        expect(classes['pkt-btn--xsmall']).toBe(true)
+      })
     })
 
     describe('getRangeLabelClasses', () => {

package/src/components/datepicker/datepicker.core.test.ts

@@ -59,6 +59,23 @@ describe('PktDatepicker', () => {
       expect(calendarButton).toBeInTheDocument()
     })
 
+    test.each([
+      ['small', 'small'],
+      ['xsmall', 'xsmall'],
+    ] as const)(
+      'input-size="%s" applies size classes on host, input and calendar button',
+      async (size, sizeClass) => {
+        const container = await createDatepicker(`label="Test" id="size-test" input-size="${size}"`)
+        const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+        await datepicker.updateComplete
+
+        expect(datepicker.inputSize).toBe(size)
+        expect(datepicker.classList.contains(`pkt-datepicker--${sizeClass}`)).toBe(true)
+        expect(datepicker.querySelector(`.pkt-input--${sizeClass}`)).toBeTruthy()
+        expect(datepicker.querySelector(`.pkt-btn--${sizeClass}`)).toBeTruthy()
+      },
+    )
+
     test('renders calendar when opened', async () => {
       const container = await createDatepicker('label="Test Datepicker"')
 

package/src/components/datepicker/datepicker.ts

@@ -226,6 +226,9 @@ export class PktDatepicker extends PktInputElement<Props> {
         this._value = [this._value[0] ?? '']
       }
     }
+    this.classList.toggle('pkt-datepicker--medium', this.inputSize === 'medium')
+    this.classList.toggle('pkt-datepicker--small', this.inputSize === 'small')
+    this.classList.toggle('pkt-datepicker--xsmall', this.inputSize === 'xsmall')
     super.updated(changedProperties)
   }
 
@@ -301,6 +304,7 @@ export class PktDatepicker extends PktInputElement<Props> {
         .readonly=${this.readonly}
         .disabled=${this.disabled}
         .inputClasses=${this.inputClasses}
+        .inputSize=${this.inputSize}
         .internals=${this.internals}
         .strings=${this.strings}
         @toggle-calendar=${(e: CustomEvent) => this.toggleCalendar(e.detail)}
@@ -337,6 +341,7 @@ export class PktDatepicker extends PktInputElement<Props> {
         .disabled=${this.disabled}
         .showRangeLabels=${this.showRangeLabels}
         .inputClasses=${this.inputClasses}
+        .inputSize=${this.inputSize}
         .internals=${this.internals}
         .strings=${this.strings}
         @toggle-calendar=${(e: CustomEvent) => this.toggleCalendar(e.detail)}
@@ -416,6 +421,7 @@ export class PktDatepicker extends PktInputElement<Props> {
         .disabled=${this.disabled}
         .maxlength=${this.maxlength}
         .inputClasses=${this.inputClasses}
+        .inputSize=${this.inputSize}
         .internals=${this.internals}
         .strings=${this.strings}
         @toggle-calendar=${(e: CustomEvent) => this.toggleCalendar(e.detail)}
@@ -483,6 +489,7 @@ export class PktDatepicker extends PktInputElement<Props> {
       this.range,
       this.readonly,
       this.inputType,
+      this.inputSize,
     )
 
     return html`
@@ -508,6 +515,7 @@ export class PktDatepicker extends PktInputElement<Props> {
         .helptextDropdown=${this.helptextDropdown}
         .helptextDropdownButton=${this.helptextDropdownButton}
         .ariaDescribedBy=${this.ariaDescribedBy}
+        .size=${this.inputSize}
         class="pkt-datepicker"
       >
         <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>