@oslokommune/punkt-elements 16.0.3 → 16.1.0

package/src/components/card/card.ts

@@ -3,9 +3,8 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 import { customElement, property } from 'lit/decorators.js'
 import { html, nothing } from 'lit'
 import { IPktTag } from '@/components/tag'
-import { PktElement } from '@/base-elements/element'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
-import { ref, createRef, Ref } from 'lit/directives/ref.js'
+import { PktElementWithSlot } from '@/base-elements/element-with-slot'
+import { slotContent } from '@/directives/slot-content'
 import { IPktHeading } from '../heading'
 import specs from 'componentSpecs/card.json'
 import '@/components/icon'
@@ -38,18 +37,7 @@ export interface IPktCard {
 }
 
 @customElement('pkt-card')
-export class PktCard extends PktElement implements IPktCard {
-  // Refs
-
-  defaultSlot: Ref<HTMLElement> = createRef()
-
-  //Constructor
-
-  constructor() {
-    super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
-  }
-
+export class PktCard extends PktElementWithSlot implements IPktCard {
   // Properties
 
   @property({ type: String }) ariaLabel: string = ''
@@ -252,10 +240,7 @@ export class PktCard extends PktElement implements IPktCard {
   }
 
   renderSlot() {
-    return html`
-      ${this.defaultSlot &&
-      html`<section class="pkt-card__content" ${ref(this.defaultSlot)}></section>`}
-    `
+    return html`<section class="pkt-card__content">${slotContent(this)}</section>`
   }
 
   renderMetadata() {

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

@@ -2,7 +2,6 @@ import { property, state } from 'lit/decorators.js'
 import { Ref, createRef } from 'lit/directives/ref.js'
 import { PktInputElement } from '@/base-elements/input-element'
 import { PktOptionsSlotController } from '@/controllers/pkt-options-controller'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
 import { isMaxSelectionReached } from 'shared-utils/combobox/option-utils'
 import specs from 'componentSpecs/combobox.json'
 
@@ -14,13 +13,9 @@ import PktListbox from '../listbox'
  * Declares all reactive properties, state, refs, and simple helpers.
  */
 export class ComboboxBase extends PktInputElement {
-  protected readonly helptextSlot: Ref<HTMLElement> = createRef()
-
   constructor() {
     super()
     this.optionsController = new PktOptionsSlotController(this)
-    this.slotController = new PktSlotController(this, this.helptextSlot)
-    this.slotController.skipOptions = true
   }
 
   // Props / Attributes

package/src/components/combobox/combobox-utils.ts

@@ -6,7 +6,7 @@ import { buildFulltext } from 'shared-utils/combobox/option-utils'
  * Lit-specific utility functions for PktCombobox component.
  *
  * Framework-agnostic functions live in shared-utils/combobox/.
- * Only Lit-specific functions (using Ref, in-place mutation, PktSlotController) stay here.
+ * Only Lit-specific functions (using Ref, in-place mutation) stay here.
  */
 
 // Selection state helpers (mutating, Lit-specific)

package/src/components/combobox/combobox.ts

@@ -13,6 +13,7 @@ import type {
 import { findOptionByValue, findOptionIndex } from 'shared-utils/combobox/option-utils'
 import { getSingleValueForInput } from 'shared-utils/combobox/input-utils'
 import { slotUtils, optionStateUtils } from './combobox-utils'
+import { slotContent } from '@/directives/slot-content'
 import { ComboboxHandlers } from './combobox-handlers'
 
 import '../input-wrapper'
@@ -295,7 +296,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
         class="pkt-combobox__wrapper"
         @labelClick=${this.handleInputClick}
       >
-        <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
         <div class="pkt-combobox" @focusout=${this.handleFocusOut}>
           <div
             class=${classMap({

package/src/components/datepicker/datepicker.ts

@@ -14,7 +14,7 @@ import './datepicker-popup'
 import './datepicker-single'
 import './datepicker-range'
 import './datepicker-multiple'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { slotContent } from '@/directives/slot-content'
 import {
   valueUtils,
   inputTypeUtils,
@@ -135,11 +135,6 @@ export class PktDatepicker extends PktInputElement<Props> {
    * Housekeeping / lifecycle methods
    */
 
-  constructor() {
-    super()
-    this.slotController = new PktSlotController(this, this.helptextSlot)
-  }
-
   connectedCallback() {
     super.connectedCallback()
     if (this.timezone && this.timezone !== window.pktTz) {
@@ -256,7 +251,6 @@ export class PktDatepicker extends PktInputElement<Props> {
 
   calRef: Ref<PktCalendar> = createRef()
   popupRef: Ref<HTMLDivElement> = createRef()
-  helptextSlot: Ref<HTMLElement> = createRef()
 
   // Child component refs
   singleInputRef: Ref<PktDatepickerSingle> = createRef()
@@ -521,7 +515,7 @@ export class PktDatepicker extends PktInputElement<Props> {
         .ariaDescribedBy=${this.ariaDescribedBy}
         class="pkt-datepicker"
       >
-        <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
         ${this.multiple
           ? html`<pkt-date-tags
               .dates=${this._value}

package/src/components/header/header-service.ts

@@ -1,9 +1,9 @@
-import { PktElement } from '@/base-elements/element'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { PktElementWithSlot } from '@/base-elements/element-with-slot'
 import { html, nothing, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { createRef, Ref, ref } from 'lit/directives/ref.js'
+import { slotContent } from '@/directives/slot-content'
 import {
   User,
   Representing,
@@ -28,7 +28,7 @@ import './header-user-menu'
 const CDN_LOGO_PATH = 'https://punkt-cdn.oslo.kommune.no/latest/logos/'
 
 @customElement('pkt-header-service')
-export class PktHeaderService extends PktElement<IPktHeader> implements IPktHeader {
+export class PktHeaderService extends PktElementWithSlot<IPktHeader> implements IPktHeader {
   @property({ type: String, attribute: 'service-name' }) serviceName?: string
   @property({ type: String, attribute: 'service-link' }) serviceLink?: string
   @property({ type: String, attribute: 'logo-link' }) logoLink?: string
@@ -69,13 +69,9 @@ export class PktHeaderService extends PktElement<IPktHeader> implements IPktHead
   @state() private openMenu: THeaderMenu = 'none'
   @state() private isHidden = false
   @state() private componentWidth = typeof window !== 'undefined' ? window.innerWidth : 0
-  @state() private hasSlotContent = false
   @state() private alignSlotRight = false
   @state() private alignSearchRight = false
 
-  defaultSlot: Ref<HTMLElement> = createRef()
-  slotController!: PktSlotController
-
   private headerRef: Ref<HTMLElement> = createRef()
   private userContainerRef: Ref<HTMLElement> = createRef()
   private slotContainerRef: Ref<HTMLElement> = createRef()
@@ -89,15 +85,6 @@ export class PktHeaderService extends PktElement<IPktHeader> implements IPktHead
   private lastFocusedElement: HTMLElement | null = null
   private shouldRestoreFocus = false
 
-  constructor() {
-    super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
-  }
-
-  updateSlots(filledSlots: Set<string | null | undefined>) {
-    this.hasSlotContent = filledSlots.has(null) || filledSlots.has(undefined)
-  }
-
   connectedCallback() {
     super.connectedCallback()
     this.setupScrollListener()
@@ -520,7 +507,7 @@ export class PktHeaderService extends PktElement<IPktHeader> implements IPktHead
         @focusout=${(e: FocusEvent) => this.handleFocusOut(e, 'slot')}
         ${ref(this.slotContainerRef)}
       >
-        ${this.isTablet && this.hasSlotContent
+        ${this.isTablet && this.hasSlotContent()
           ? html`
               <pkt-button
                 skin="secondary"
@@ -543,8 +530,7 @@ export class PktHeaderService extends PktElement<IPktHeader> implements IPktHead
           role=${this.isTablet ? 'menu' : nothing}
           aria-label=${this.isTablet ? 'Meny' : nothing}
           ${ref(this.slotContentRef)}
-          ${ref(this.defaultSlot)}
-        ></div>
+        >${slotContent(this)}</div>
       </div>
     `
   }

package/src/components/header/header.ts

@@ -1,9 +1,8 @@
-import { PktElement } from '@/base-elements/element'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { PktElementWithSlot } from '@/base-elements/element-with-slot'
+import { slotContent } from '@/directives/slot-content'
 import { html, PropertyValues } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
-import { createRef, Ref, ref } from 'lit/directives/ref.js'
 import {
   User,
   Representing,
@@ -33,10 +32,7 @@ import './header-service'
  * TODO: Add `type` prop to switch between `service` and `global` header types
  */
 @customElement('pkt-header')
-export class PktHeader extends PktElement<IPktHeader> implements IPktHeader {
-  defaultSlot: Ref<HTMLElement> = createRef()
-  slotController!: PktSlotController
-
+export class PktHeader extends PktElementWithSlot<IPktHeader> implements IPktHeader {
   @property({ type: String, attribute: 'service-name' }) serviceName?: string
   @property({ type: String, attribute: 'service-link' }) serviceLink?: string
   @property({ type: String, attribute: 'logo-link' }) logoLink?: string
@@ -76,11 +72,6 @@ export class PktHeader extends PktElement<IPktHeader> implements IPktHeader {
   @property({ type: Array, attribute: 'user-menu-footer' }) userMenuFooter?: UserMenuItem[]
   @property({ type: Array, attribute: 'user-options' }) userOptions?: UserMenuItem[]
 
-  constructor() {
-    super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
-  }
-
   firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties)
     this.emitDeprecationWarnings()
@@ -136,7 +127,7 @@ export class PktHeader extends PktElement<IPktHeader> implements IPktHeader {
         .userMenu=${this.effectiveUserMenu}
         .representing=${this.representing}
       >
-        <div class="pkt-contents" ${ref(this.defaultSlot)}></div>
+        <div class="pkt-contents">${slotContent(this)}</div>
       </pkt-header-service>
     `
   }

package/src/components/helptext/helptext.test.ts

@@ -362,29 +362,19 @@ describe('PktHelptext', () => {
   })
 
   describe('Slot management', () => {
-    test('updates slot state when slots are filled', async () => {
+    test('detects slot content via hasSlotContent()', async () => {
       const container = await createHelptext('', '<span>Slotted content</span>')
 
       const helptext = container.querySelector('pkt-helptext') as PktHelptext
       await helptext.updateComplete
 
-      // Simulate slot controller updating filled slots
-      const filledSlots = new Set(['default'])
-      helptext.updateSlots(filledSlots)
-      await helptext.updateComplete
-
-      expect(helptext.filledSlots.size).toBe(1)
-      expect(helptext.filledSlots.has('default')).toBe(true)
+      expect(helptext.hasSlotContent()).toBe(true)
     })
 
     test('applies has-helptext class when slots are filled', async () => {
       const container = await createHelptext('', '<span>Slotted content</span>')
 
       const helptext = container.querySelector('pkt-helptext') as PktHelptext
-
-      // Simulate slot controller updating filled slots
-      const filledSlots = new Set(['default'])
-      helptext.updateSlots(filledSlots)
       await helptext.updateComplete
 
       const helptextContainer = helptext.querySelector('.pkt-inputwrapper__helptext-container')

package/src/components/helptext/helptext.ts

@@ -1,23 +1,15 @@
-import { PktElement } from '@/base-elements/element'
+import { PktElementWithSlot } from '@/base-elements/element-with-slot'
 import { html, nothing } from 'lit'
-import { createRef, ref, Ref } from 'lit/directives/ref.js'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
 import { uuidish } from 'shared-utils/utils'
 import specs from 'componentSpecs/input-wrapper.json'
 import '@/components/icon'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { slotContent } from '@/directives/slot-content'
 
 @customElement('pkt-helptext')
-export class PktHelptext extends PktElement {
-  defaultSlot: Ref<HTMLElement> = createRef()
-
-  constructor() {
-    super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
-  }
-
+export class PktHelptext extends PktElementWithSlot {
   @property({ type: String, reflect: true })
   forId: string = uuidish()
 
@@ -32,12 +24,6 @@ export class PktHelptext extends PktElement {
 
   @state() isHelpTextOpen: boolean = false
 
-  @state() filledSlots: Set<string | null | undefined> = new Set()
-
-  updateSlots(filledSlots: Set<string | null | undefined>) {
-    this.filledSlots = new Set(filledSlots)
-  }
-
   render() {
     const toggleDropdown = () => {
       const isOpen = !this.isHelpTextOpen
@@ -53,7 +39,7 @@ export class PktHelptext extends PktElement {
     const helptextClasses = classMap({
       'pkt-inputwrapper__helptext-container': true,
       'pkt-inputwrapper__has-helptext':
-        this.helptext || this.helptextDropdown || this.filledSlots.size > 0,
+        this.helptext || this.helptextDropdown || this.hasSlotContent(),
     })
 
     const helptextDropdown = () => {
@@ -88,7 +74,7 @@ export class PktHelptext extends PktElement {
     const helptextElement = () => {
       return html`<div class="${helptextClasses}">
         <div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
-          <div class="pkt-contents" ${ref(this.defaultSlot)} name="helptext"></div>
+          <div class="pkt-contents" name="helptext">${slotContent(this)}</div>
           ${this.helptext && unsafeHTML(this.helptext)}
         </div>
         ${helptextDropdown()}

package/src/components/input-wrapper/input-wrapper.test.ts

@@ -259,9 +259,9 @@ describe('PktInputWrapper', () => {
       })
       await wrapper.updateComplete
 
-      const slottedContent = wrapper.querySelector('[name="helptext"]')
-      expect(slottedContent).toBeInTheDocument()
-      expect(slottedContent?.textContent).toContain('Slotted help content')
+      const helptextEl = wrapper.querySelector('pkt-helptext')
+      expect(helptextEl).toBeInTheDocument()
+      expect(helptextEl?.textContent).toContain('Slotted help content')
     })
   })
 

package/src/components/input-wrapper/input-wrapper.ts

@@ -1,6 +1,5 @@
-import { PktElement } from '@/base-elements/element'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
-import { ref, Ref, createRef } from 'lit/directives/ref.js'
+import { PktElementWithSlot } from '@/base-elements/element-with-slot'
+import { slotContent } from '@/directives/slot-content'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { html, nothing, PropertyValues } from 'lit'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
@@ -42,15 +41,7 @@ type Props = ElementProps<
 >
 
 @customElement('pkt-input-wrapper')
-export class PktInputWrapper extends PktElement<Props> {
-  defaultSlot: Ref<HTMLElement> = createRef()
-  helptextSlot: Ref<HTMLElement> = createRef()
-
-  constructor() {
-    super()
-    this.slotController = new PktSlotController(this, this.defaultSlot, this.helptextSlot)
-  }
-
+export class PktInputWrapper extends PktElementWithSlot<Props> {
   /**
    * Element attributes
    */
@@ -158,9 +149,7 @@ export class PktInputWrapper extends PktElement<Props> {
           @toggleHelpText=${(e: CustomEvent) => {
             this.toggleDropdown(e)
           }}
-          ${ref(this.helptextSlot)}
-          name="helptext"
-        ></pkt-helptext>
+        >${slotContent(this, 'helptext')}</pkt-helptext>
       `
     }
 
@@ -197,7 +186,7 @@ export class PktInputWrapper extends PktElement<Props> {
         ${labelElement()} 
         ${helptextElement()}
         ${this.counterPosition === 'top' ? counterElement() : nothing}
-        <div class="pkt-contents" ${ref(this.defaultSlot)}></div>
+        <div class="pkt-contents">${slotContent(this)}</div>
         ${this.counterPosition === 'bottom' ? counterElement() : nothing} 
         ${errorElement()}
       `

package/src/components/link/link.ts

@@ -1,6 +1,5 @@
-import { PktElement } from '@/base-elements/element'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
-import { ref, Ref, createRef } from 'lit/directives/ref.js'
+import { PktElementWithSlot } from '@/base-elements/element-with-slot'
+import { slotContent } from '@/directives/slot-content'
 import { html, nothing } from 'lit'
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property } from 'lit/decorators.js'
@@ -8,14 +7,7 @@ import specs from 'componentSpecs/link.json'
 import '@/components/icon'
 
 @customElement('pkt-link')
-export class PktLink extends PktElement {
-  defaultSlot: Ref<HTMLElement> = createRef()
-
-  constructor() {
-    super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
-  }
-
+export class PktLink extends PktElementWithSlot {
   /**
    * Element attributes
    */
@@ -41,7 +33,7 @@ export class PktLink extends PktElement {
       .rel=${this.external ? 'noopener noreferrer' : nothing}
       >${this.iconName
         ? html`<pkt-icon name=${this.iconName} class="pkt-link__icon"></pkt-icon>`
-        : ''} <span ${ref(this.defaultSlot)}>Link</span></a
+        : ''} <span>${slotContent(this)}</span></a
     >`
   }
 }

package/src/components/linkcard/linkcard.test.ts

@@ -78,7 +78,7 @@ describe('PktLinkCard', () => {
 
       const textSlot = linkCard.querySelector('.pkt-linkcard__text')
       expect(textSlot).toBeInTheDocument()
-      expect(textSlot?.innerHTML).toBe(content)
+      expect(textSlot?.innerHTML).toContain(content)
     })
   })
 
@@ -266,7 +266,7 @@ describe('PktLinkCard', () => {
       expect(icon?.getAttribute('name')).toBe(config.iconName)
 
       const textSlot = linkCard.querySelector('.pkt-linkcard__text')
-      expect(textSlot?.innerHTML).toBe(config.content)
+      expect(textSlot?.innerHTML).toContain(config.content)
     })
 
     test('renders minimal configuration', async () => {

package/src/components/linkcard/linkcard.ts

@@ -1,9 +1,7 @@
 import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import { ref } from 'lit/directives/ref.js'
-import { Ref, createRef } from 'lit/directives/ref.js'
-import { PktElement } from '@/base-elements/element'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { PktElementWithSlot } from '@/base-elements/element-with-slot'
+import { slotContent } from '@/directives/slot-content'
 import '@/components/icon'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
@@ -27,9 +25,7 @@ export interface IPktLinkCard {
 }
 
 @customElement('pkt-linkcard')
-export class PktLinkCard extends PktElement implements IPktLinkCard {
-  defaultSlot: Ref<HTMLElement> = createRef()
-
+export class PktLinkCard extends PktElementWithSlot implements IPktLinkCard {
   @property({ type: String, reflect: true }) title: string = ''
   @property({ type: String, reflect: true }) href: string = '#'
   @property({ type: String, reflect: true }) iconName: string = ''
@@ -37,11 +33,6 @@ export class PktLinkCard extends PktElement implements IPktLinkCard {
   @property({ type: Boolean, reflect: true }) openInNewTab: boolean = false
   @property({ type: String, reflect: true }) skin: TLinkCardSkin = 'normal'
 
-  constructor() {
-    super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
-  }
-
   render() {
     const classes = ['pkt-linkcard', this.skin && `pkt-linkcard--${this.skin}`]
       .filter(Boolean)
@@ -61,7 +52,7 @@ export class PktLinkCard extends PktElement implements IPktLinkCard {
         ${this.iconName && html`<pkt-icon class="pkt-link__icon" name="${this.iconName}" />`}
         ${this.title && html`<div class=${titleClasses}>${this.title}</div>`}
 
-        <div class="pkt-linkcard__text" ${ref(this.defaultSlot)}></div>
+        <div class="pkt-linkcard__text">${slotContent(this)}</div>
       </a>
     `
   }

package/src/components/loader/loader.ts

@@ -1,9 +1,8 @@
-import { PktElement } from '@/base-elements/element'
+import { PktElementWithSlot } from '@/base-elements/element-with-slot'
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
-import { createRef, ref, Ref } from 'lit/directives/ref.js'
 import { html, nothing } from 'lit'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { slotContent } from '@/directives/slot-content'
 import { TPktSize } from '@/types/size'
 import '@/components/icon'
 
@@ -49,14 +48,7 @@ export interface IPktLoader {
 }
 
 @customElement('pkt-loader')
-export class PktLoader extends PktElement implements IPktLoader {
-  defaultSlot: Ref<HTMLElement> = createRef()
-
-  constructor() {
-    super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
-  }
-
+export class PktLoader extends PktElementWithSlot implements IPktLoader {
   @property({ type: Number }) delay: number = 0
   @property({ type: Boolean }) inline: boolean = false
   @property({ type: Boolean }) isLoading: boolean = true
@@ -110,7 +102,7 @@ export class PktLoader extends PktElement implements IPktLoader {
             ${this.message && html`<p>${this.message}</p>`}
           </div>`
         : nothing}
-      <div class=${slotClasses} ${ref(this.defaultSlot)}></div>
+      <div class=${slotClasses}>${slotContent(this)}</div>
     </div>`
   }
 

package/src/components/messagebox/messagebox.ts

@@ -1,7 +1,5 @@
-import { PktElement } from '@/base-elements/element'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
-import { ref } from 'lit/directives/ref.js'
-import { Ref, createRef } from 'lit/directives/ref.js'
+import { PktElementWithSlot } from '@/base-elements/element-with-slot'
+import { slotContent } from '@/directives/slot-content'
 import { html, nothing, PropertyValues } from 'lit'
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -21,12 +19,9 @@ export interface IPktMessagebox {
 }
 
 @customElement('pkt-messagebox')
-export class PktMessagebox extends PktElement implements IPktMessagebox {
-  defaultSlot: Ref<HTMLElement> = createRef()
-
+export class PktMessagebox extends PktElementWithSlot implements IPktMessagebox {
   constructor() {
     super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
     this._isClosed = false
   }
 
@@ -73,7 +68,7 @@ export class PktMessagebox extends PktElement implements IPktMessagebox {
           </div>`
         : nothing}
       ${this.title ? html`<div class="pkt-messagebox__title">${this.title}</div>` : nothing}
-      <div class="pkt-messagebox__text" ${ref(this.defaultSlot)}></div>
+      <div class="pkt-messagebox__text">${slotContent(this)}</div>
     </div>`
   }
 

package/src/components/modal/modal.ts

@@ -1,8 +1,8 @@
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
 import { html, nothing, PropertyValues } from 'lit'
-import { PktElement } from '@/base-elements/element'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { PktElementWithSlot } from '@/base-elements/element-with-slot'
+import { slotContent } from '@/directives/slot-content'
 import { ref } from 'lit/directives/ref.js'
 import { Ref, createRef } from 'lit/directives/ref.js'
 import { TPktSize } from '@/types/size'
@@ -22,7 +22,7 @@ export interface IPktModal {
 }
 
 @customElement('pkt-modal')
-export class PktModal extends PktElement implements IPktModal {
+export class PktModal extends PktElementWithSlot implements IPktModal {
   // Public properties"
   @property({ type: String }) headingText?: string = ''
   @property({ type: Boolean }) removePadding?: boolean = false
@@ -35,14 +35,12 @@ export class PktModal extends PktElement implements IPktModal {
   @property({ type: String }) drawerPosition?: 'left' | 'right' = 'right'
   @property({ type: Boolean }) transparentBackdrop?: boolean = false
 
-  defaultSlot: Ref<HTMLElement> = createRef()
   dialogRef: Ref<HTMLDialogElement> = createRef()
 
   @state() _isOpen: boolean = false
 
   constructor() {
     super()
-    this.slotController = new PktSlotController(this, this.defaultSlot)
     this._isOpen = false
   }
 
@@ -201,8 +199,7 @@ export class PktModal extends PktElement implements IPktModal {
             <div
               id="pkt-modal__content"
               class=${classMap(contentClasses)}
-              ${ref(this.defaultSlot)}
-            ></div>
+            >${slotContent(this)}</div>
           </div>
         </div>
       </dialog>

package/src/components/select/select.ts

@@ -4,7 +4,7 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { PktOptionsInputElement } from '@/base-elements/options-input-element'
 import { PktOptionsSlotController } from '@/controllers/pkt-options-controller'
-import { PktSlotController } from '@/controllers/pkt-slot-controller'
+import { slotContent } from '@/directives/slot-content'
 import '@/components/input-wrapper'
 
 export type TSelectOption = {
@@ -41,7 +41,6 @@ declare global {
 @customElement('pkt-select')
 export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> implements IPktSelect {
   inputRef: Ref<HTMLSelectElement> = createRef()
-  private helptextSlot: Ref<HTMLElement> = createRef()
 
   @property({ type: String }) value: string = ''
 
@@ -51,8 +50,6 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
   constructor() {
     super()
     this.optionsController = new PktOptionsSlotController(this)
-    this.slotController = new PktSlotController(this, this.helptextSlot)
-    this.slotController.skipOptions = true
   }
 
   connectedCallback(): void {
@@ -251,7 +248,7 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
               )
             : ''}
         </select>
-        <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
       </pkt-input-wrapper>
     `
   }