@oslokommune/punkt-css 17.0.4 → 17.0.6

package/CHANGELOG.md

@@ -5,6 +5,42 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [17.0.6](https://github.com/oslokommune/punkt/compare/17.0.5...17.0.6) (2026-08-13)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+* For å være konsekvente: Logiske istedenfor fysiske margins og paddings (#3583). 
+
+
+### Chores
+Ingen
+
+---
+
+
+## [17.0.5](https://github.com/oslokommune/punkt/compare/17.0.4...17.0.5) (2026-08-13)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+* Flytt fargehjelpeklasser ut av `:root` (#3582). De hører ikke hjemme der og det legges til unødvendig høy spesifisitet var å legge dem der. `:root` er kun for CSS-variabler.
+
+
+### Chores
+Ingen
+
+---
+
+
 ## [17.0.4](https://github.com/oslokommune/punkt/compare/17.0.3...17.0.4) (2026-08-13)
 
 ### ⚠ BREAKING CHANGES

package/dist/css/components/alert.css

@@ -71,13 +71,13 @@ pkt-alert {
   line-height: 1.75rem;
 }
 .pkt-alert__text p {
-  margin-bottom: 1rem;
+  margin-block-end: 1rem;
 }
 .pkt-alert__text p:first-of-type {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 .pkt-alert__text p:last-of-type {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .pkt-alert__date {
   grid-column: 1/-1;

package/dist/css/components/alert.min.css

@@ -1 +1 @@
-.pkt-alert{--pkt-color-alert-bc: var(--pkt-color-border-blue);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-blue);--pkt-color-alert-txt: var(--pkt-color-text-body-dark);--pkt-color-alert-icon-fg: var(--pkt-color-brand-dark-blue-1000);--pkt-color-alert-close-fg: var(--pkt-color-brand-dark-blue-1000)}.pkt-alert--error{--pkt-color-alert-bc: var(--pkt-color-border-red);--pkt-color-alert-bg: var(--pkt-color-surface-default-faded-red)}.pkt-alert--success{--pkt-color-alert-bc: var(--pkt-color-border-green);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-green)}.pkt-alert--warning{--pkt-color-alert-bc: var(--pkt-color-border-yellow);--pkt-color-alert-bg: var(--pkt-color-surface-default-yellow)}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}pkt-alert{display:block}.pkt-alert__grid{display:grid;grid-template-columns:min-content auto min-content;grid-row-gap:1rem;grid-column-gap:1.5rem;justify-items:left;align-items:center}.pkt-alert__noTitle .pkt-alert__text{grid-row:1/2;grid-column:2/3}.pkt-alert{border-left:.25rem solid var(--pkt-color-alert-bc);background-color:var(--pkt-color-alert-bg);color:var(--pkt-color-alert-txt);padding:1rem 1.5rem;display:block}.pkt-alert__title{grid-column:2/3;letter-spacing:-0.2px;font-weight:500;font-size:1.125rem;line-height:1.75rem}.pkt-alert__text{grid-column:1/-1;grid-row:2/3;overflow-wrap:break-word;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-alert__text p{margin-bottom:1rem}.pkt-alert__text p:first-of-type{margin-top:0}.pkt-alert__text p:last-of-type{margin-bottom:0}.pkt-alert__date{grid-column:1/-1;grid-row:3/4;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-alert__icon{--fg-color: var(--pkt-color-alert-icon-fg);height:2rem;width:2rem;grid-area:icon;grid-row:1/2;grid-column:1/2}.pkt-alert__close{grid-column:3/4;grid-row:1/2}.pkt-alert__close svg{--fg-color: var(--pkt-color-alert-close-fg)}.pkt-alert--small,.pkt-alert--compact{display:flex;min-height:3rem;padding:.5rem .75rem}.pkt-alert--small .pkt-alert__grid,.pkt-alert--compact .pkt-alert__grid{gap:.5rem;width:100%}.pkt-alert--small .pkt-alert__icon,.pkt-alert--compact .pkt-alert__icon{width:1.5rem;height:1.5rem}.pkt-alert--small .pkt-alert__title,.pkt-alert--compact .pkt-alert__title{letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem}.pkt-alert--small .pkt-alert__text,.pkt-alert--compact .pkt-alert__text{letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-alert--xsmall{display:flex;min-height:2.5rem;padding:.375rem .75rem}.pkt-alert--xsmall .pkt-alert__grid{gap:.375rem;width:100%}.pkt-alert--xsmall .pkt-alert__icon{width:1.25rem;height:1.25rem}.pkt-alert--xsmall .pkt-alert__title{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-alert--xsmall .pkt-alert__text{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}
+.pkt-alert{--pkt-color-alert-bc: var(--pkt-color-border-blue);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-blue);--pkt-color-alert-txt: var(--pkt-color-text-body-dark);--pkt-color-alert-icon-fg: var(--pkt-color-brand-dark-blue-1000);--pkt-color-alert-close-fg: var(--pkt-color-brand-dark-blue-1000)}.pkt-alert--error{--pkt-color-alert-bc: var(--pkt-color-border-red);--pkt-color-alert-bg: var(--pkt-color-surface-default-faded-red)}.pkt-alert--success{--pkt-color-alert-bc: var(--pkt-color-border-green);--pkt-color-alert-bg: var(--pkt-color-surface-default-light-green)}.pkt-alert--warning{--pkt-color-alert-bc: var(--pkt-color-border-yellow);--pkt-color-alert-bg: var(--pkt-color-surface-default-yellow)}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}pkt-alert{display:block}.pkt-alert__grid{display:grid;grid-template-columns:min-content auto min-content;grid-row-gap:1rem;grid-column-gap:1.5rem;justify-items:left;align-items:center}.pkt-alert__noTitle .pkt-alert__text{grid-row:1/2;grid-column:2/3}.pkt-alert{border-left:.25rem solid var(--pkt-color-alert-bc);background-color:var(--pkt-color-alert-bg);color:var(--pkt-color-alert-txt);padding:1rem 1.5rem;display:block}.pkt-alert__title{grid-column:2/3;letter-spacing:-0.2px;font-weight:500;font-size:1.125rem;line-height:1.75rem}.pkt-alert__text{grid-column:1/-1;grid-row:2/3;overflow-wrap:break-word;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-alert__text p{margin-block-end:1rem}.pkt-alert__text p:first-of-type{margin-block-start:0}.pkt-alert__text p:last-of-type{margin-block-end:0}.pkt-alert__date{grid-column:1/-1;grid-row:3/4;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-alert__icon{--fg-color: var(--pkt-color-alert-icon-fg);height:2rem;width:2rem;grid-area:icon;grid-row:1/2;grid-column:1/2}.pkt-alert__close{grid-column:3/4;grid-row:1/2}.pkt-alert__close svg{--fg-color: var(--pkt-color-alert-close-fg)}.pkt-alert--small,.pkt-alert--compact{display:flex;min-height:3rem;padding:.5rem .75rem}.pkt-alert--small .pkt-alert__grid,.pkt-alert--compact .pkt-alert__grid{gap:.5rem;width:100%}.pkt-alert--small .pkt-alert__icon,.pkt-alert--compact .pkt-alert__icon{width:1.5rem;height:1.5rem}.pkt-alert--small .pkt-alert__title,.pkt-alert--compact .pkt-alert__title{letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem}.pkt-alert--small .pkt-alert__text,.pkt-alert--compact .pkt-alert__text{letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-alert--xsmall{display:flex;min-height:2.5rem;padding:.375rem .75rem}.pkt-alert--xsmall .pkt-alert__grid{gap:.375rem;width:100%}.pkt-alert--xsmall .pkt-alert__icon{width:1.25rem;height:1.25rem}.pkt-alert--xsmall .pkt-alert__title{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-alert--xsmall .pkt-alert__text{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}

package/dist/css/components/badge.css

@@ -5,7 +5,7 @@
 .pkt-badge {
   display: inline-flex;
   height: 1.5em;
-  margin-left: 0.4em;
+  margin-inline-start: 0.4em;
   padding: 0.25em 0.4em;
   color: black;
   font-weight: 500;
@@ -36,6 +36,6 @@
 }
 
 .pkt-btn--small > .pkt-badge {
-  padding-top: 0.28em;
+  padding-block-start: 0.28em;
   transform: translateY(-0.1em);
 }

package/dist/css/components/badge.min.css

@@ -1 +1 @@
-.pkt-badge{display:inline-flex;height:1.5em;margin-left:.4em;padding:.25em .4em;color:#000;font-weight:500;font-size:.75em;line-height:1em;border-radius:1px}.pkt-badge.pkt-badge--small,.pkt-h1>.pkt-badge,.pkt-h2>.pkt-badge,.pkt-h3>.pkt-badge{font-size:.5em;transform:translateY(-0.25em)}.pkt-btn:not(.pkt-btn--ter)>.pkt-badge{color:inherit;background:rgba(0,0,0,0);border:1px solid;border-radius:4px}.pkt-btn--pri:not(.pkt-btn--neg)>.pkt-badge,.pkt-btn--neg.pkt-btn--ter>.pkt-badge,.pkt-btn--neg.pkt-btn--ghost>.pkt-badge{border-color:#fff}.pkt-btn--small>.pkt-badge{padding-top:.28em;transform:translateY(-0.1em)}
+.pkt-badge{display:inline-flex;height:1.5em;margin-inline-start:.4em;padding:.25em .4em;color:#000;font-weight:500;font-size:.75em;line-height:1em;border-radius:1px}.pkt-badge.pkt-badge--small,.pkt-h1>.pkt-badge,.pkt-h2>.pkt-badge,.pkt-h3>.pkt-badge{font-size:.5em;transform:translateY(-0.25em)}.pkt-btn:not(.pkt-btn--ter)>.pkt-badge{color:inherit;background:rgba(0,0,0,0);border:1px solid;border-radius:4px}.pkt-btn--pri:not(.pkt-btn--neg)>.pkt-badge,.pkt-btn--neg.pkt-btn--ter>.pkt-badge,.pkt-btn--neg.pkt-btn--ghost>.pkt-badge{border-color:#fff}.pkt-btn--small>.pkt-badge{padding-block-start:.28em;transform:translateY(-0.1em)}

package/dist/css/components/breadcrumbs.css

@@ -77,7 +77,7 @@
 .pkt-breadcrumbs__icon {
   width: 1rem;
   height: 1rem;
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
 }
 .pkt-breadcrumbs--desktop {
   display: none !important;

package/dist/css/components/breadcrumbs.min.css

@@ -1 +1 @@
-.pkt-breadcrumbs{position:relative;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-breadcrumbs__list{display:flex;flex-direction:column;height:auto;list-style-type:none;border-bottom:1px solid rgba(0,0,0,0);transition:all .4s ease-in-out}@media screen and (min-width: 36rem){.pkt-breadcrumbs__list{flex-direction:row;border-bottom-color:rgba(0,0,0,0) !important}}.pkt-breadcrumbs__item{position:relative;display:none;width:100%;text-decoration:underline}@media screen and (min-width: 36rem){.pkt-breadcrumbs__item{display:block;width:auto}}.pkt-breadcrumbs__item:last-child{display:block;text-decoration:none}@media screen and (min-width: 48rem){.pkt-breadcrumbs__item:last-child{max-width:300px}}.pkt-breadcrumbs__item:last-child .pkt-breadcrumbs__text{max-width:200px}.pkt-breadcrumbs__label{display:flex;align-items:center;width:100%;white-space:nowrap}.pkt-breadcrumbs__text{display:block;max-width:300px;overflow:hidden;text-overflow:ellipsis;font-weight:300}@media screen and (min-width: 36rem){.pkt-breadcrumbs__text{max-width:120px}}@media screen and (min-width: 48rem){.pkt-breadcrumbs__text{max-width:200px}}@media screen and (min-width: 64rem){.pkt-breadcrumbs__text{max-width:300px}}.pkt-breadcrumbs__icon{width:1rem;height:1rem;margin-left:.5rem}.pkt-breadcrumbs--desktop{display:none !important}@media screen and (min-width: 36rem){.pkt-breadcrumbs--desktop{display:inline-flex !important}}.pkt-breadcrumbs--mobile{display:inline-flex !important}@media screen and (min-width: 36rem){.pkt-breadcrumbs--mobile{display:none !important}}
+.pkt-breadcrumbs{position:relative;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-breadcrumbs__list{display:flex;flex-direction:column;height:auto;list-style-type:none;border-bottom:1px solid rgba(0,0,0,0);transition:all .4s ease-in-out}@media screen and (min-width: 36rem){.pkt-breadcrumbs__list{flex-direction:row;border-bottom-color:rgba(0,0,0,0) !important}}.pkt-breadcrumbs__item{position:relative;display:none;width:100%;text-decoration:underline}@media screen and (min-width: 36rem){.pkt-breadcrumbs__item{display:block;width:auto}}.pkt-breadcrumbs__item:last-child{display:block;text-decoration:none}@media screen and (min-width: 48rem){.pkt-breadcrumbs__item:last-child{max-width:300px}}.pkt-breadcrumbs__item:last-child .pkt-breadcrumbs__text{max-width:200px}.pkt-breadcrumbs__label{display:flex;align-items:center;width:100%;white-space:nowrap}.pkt-breadcrumbs__text{display:block;max-width:300px;overflow:hidden;text-overflow:ellipsis;font-weight:300}@media screen and (min-width: 36rem){.pkt-breadcrumbs__text{max-width:120px}}@media screen and (min-width: 48rem){.pkt-breadcrumbs__text{max-width:200px}}@media screen and (min-width: 64rem){.pkt-breadcrumbs__text{max-width:300px}}.pkt-breadcrumbs__icon{width:1rem;height:1rem;margin-inline-start:.5rem}.pkt-breadcrumbs--desktop{display:none !important}@media screen and (min-width: 36rem){.pkt-breadcrumbs--desktop{display:inline-flex !important}}.pkt-breadcrumbs--mobile{display:inline-flex !important}@media screen and (min-width: 36rem){.pkt-breadcrumbs--mobile{display:none !important}}

package/dist/css/components/calendar.css

@@ -10,7 +10,7 @@ pkt-calendar .pkt-cal-month-nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1rem;
+  margin-block-end: 1rem;
 }
 .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker,
 pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker {
@@ -67,7 +67,7 @@ pkt-calendar .pkt-cal-days .pkt-btn {
 .pkt-calendar .pkt-cal-days,
 pkt-calendar .pkt-cal-days {
   margin: 0;
-  padding-left: 0;
+  padding-inline-start: 0;
   border-spacing: 0;
 }
 .pkt-calendar .pkt-cal-days td,

package/dist/css/components/calendar.min.css

@@ -1 +1 @@
-.pkt-calendar,pkt-calendar{z-index:2;display:block;position:relative;max-width:25rem}.pkt-calendar .pkt-cal-month-nav,pkt-calendar .pkt-cal-month-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker{display:flex;gap:.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input{letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select),pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select){text-align:right}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker>.pkt-cal-input-year,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker>.pkt-cal-input-year{max-width:4.5rem}.pkt-calendar .pkt-cal-month-nav td,.pkt-calendar .pkt-cal-days td,pkt-calendar .pkt-cal-month-nav td,pkt-calendar .pkt-cal-days td{border:0}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-month-nav td>div,.pkt-calendar .pkt-cal-month-nav th>div,.pkt-calendar .pkt-cal-days .pkt-btn,.pkt-calendar .pkt-cal-days td>div,.pkt-calendar .pkt-cal-days th>div,pkt-calendar .pkt-cal-month-nav .pkt-btn,pkt-calendar .pkt-cal-month-nav td>div,pkt-calendar .pkt-cal-month-nav th>div,pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-days td>div,pkt-calendar .pkt-cal-days th>div{font:inherit;aspect-ratio:1/1;display:flex;justify-content:center;align-items:center;border:0}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-month-nav .pkt-btn,pkt-calendar .pkt-cal-days .pkt-btn{margin:0;border-radius:50%}.pkt-calendar .pkt-cal-days,pkt-calendar .pkt-cal-days{margin:0;padding-left:0;border-spacing:0}.pkt-calendar .pkt-cal-days td,pkt-calendar .pkt-cal-days td{padding:0}.pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-days .pkt-btn{padding:0}.pkt-calendar .pkt-cal-days button,.pkt-calendar .pkt-cal-days div,pkt-calendar .pkt-cal-days button,pkt-calendar .pkt-cal-days div{aspect-ratio:1/1;justify-content:center;align-items:center;position:relative;text-align:center}.pkt-calendar .pkt-cal-days button:before,.pkt-calendar .pkt-cal-days button:after,.pkt-calendar .pkt-cal-days div:before,.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days button:before,pkt-calendar .pkt-cal-days button:after,pkt-calendar .pkt-cal-days div:before,pkt-calendar .pkt-cal-days div:after{content:"";display:block;position:absolute;top:0;bottom:0;z-index:-1}.pkt-calendar .pkt-cal-days button:before,.pkt-calendar .pkt-cal-days div:before,pkt-calendar .pkt-cal-days button:before,pkt-calendar .pkt-cal-days div:before{left:0;right:50%}.pkt-calendar .pkt-cal-days button:after,.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days button:after,pkt-calendar .pkt-cal-days div:after{left:50%;right:0}.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days,pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days{grid-template-columns:repeat(8, 12.5%)}.pkt-calendar .pkt-cal-other,.pkt-calendar .pkt-cal-days [data-disabled],pkt-calendar .pkt-cal-other,pkt-calendar .pkt-cal-days [data-disabled]{cursor:not-allowed;color:var(--pkt-color-grays-gray-200);background:rgba(0,0,0,0);border:none}.pkt-calendar .pkt-cal-today .pkt-btn,pkt-calendar .pkt-cal-today .pkt-btn{text-decoration:underline;outline:1px solid var(--pkt-color-border-default);outline-offset:-1px}.pkt-calendar .pkt-cal-selected .pkt-btn,.pkt-calendar .pkt-cal-selected .pkt-btn:focus,.pkt-calendar .pkt-cal-selected .pkt-btn:hover,pkt-calendar .pkt-cal-selected .pkt-btn,pkt-calendar .pkt-cal-selected .pkt-btn:focus,pkt-calendar .pkt-cal-selected .pkt-btn:hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-brand-dark-blue-1000)}.pkt-calendar .pkt-cal-in-range .pkt-btn,.pkt-calendar .pkt-cal-in-range .pkt-btn:focus,.pkt-calendar .pkt-cal-in-range .pkt-btn:hover,pkt-calendar .pkt-cal-in-range .pkt-btn,pkt-calendar .pkt-cal-in-range .pkt-btn:focus,pkt-calendar .pkt-cal-in-range .pkt-btn:hover{color:var(--pkt-color-brand-dark-blue-1000)}.pkt-calendar .pkt-cal-in-range :before,.pkt-calendar .pkt-cal-in-range :after,.pkt-calendar .pkt-cal-in-range-first :after,.pkt-calendar .pkt-cal-in-range-last :before,pkt-calendar .pkt-cal-in-range :before,pkt-calendar .pkt-cal-in-range :after,pkt-calendar .pkt-cal-in-range-first :after,pkt-calendar .pkt-cal-in-range-last :before{background-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-in-range-first :before,.pkt-calendar .pkt-cal-in-range-last :after,pkt-calendar .pkt-cal-in-range-first :before,pkt-calendar .pkt-cal-in-range-last :after{background-color:rgba(0,0,0,0)}.pkt-calendar .pkt-cal-range-hover :before,.pkt-calendar .pkt-cal-range-hover .pkt-btn,pkt-calendar .pkt-cal-range-hover :before,pkt-calendar .pkt-cal-range-hover .pkt-btn{background-color:var(--pkt-color-surface-default-light-blue);color:var(--pkt-color-brand-dark-blue-1000)}.pkt-calendar .pkt-cal-range-hover ::after,pkt-calendar .pkt-cal-range-hover ::after{background-color:rgba(0,0,0,0)}.pkt-calendar .pkt-cal-range-hover .pkt-btn,pkt-calendar .pkt-cal-range-hover .pkt-btn{border-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-excluded,pkt-calendar .pkt-cal-excluded{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-calendar .pkt-cal-excluded :before,.pkt-calendar .pkt-cal-excluded :after,pkt-calendar .pkt-cal-excluded :before,pkt-calendar .pkt-cal-excluded :after{background-color:rgba(0,0,0,0)}
+.pkt-calendar,pkt-calendar{z-index:2;display:block;position:relative;max-width:25rem}.pkt-calendar .pkt-cal-month-nav,pkt-calendar .pkt-cal-month-nav{display:flex;justify-content:space-between;align-items:center;margin-block-end:1rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker{display:flex;gap:.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input{letter-spacing:-0.2px;font-weight:500;font-size:1rem;line-height:1.5rem}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select),pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select){text-align:right}.pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker>.pkt-cal-input-year,pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker>.pkt-cal-input-year{max-width:4.5rem}.pkt-calendar .pkt-cal-month-nav td,.pkt-calendar .pkt-cal-days td,pkt-calendar .pkt-cal-month-nav td,pkt-calendar .pkt-cal-days td{border:0}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-month-nav td>div,.pkt-calendar .pkt-cal-month-nav th>div,.pkt-calendar .pkt-cal-days .pkt-btn,.pkt-calendar .pkt-cal-days td>div,.pkt-calendar .pkt-cal-days th>div,pkt-calendar .pkt-cal-month-nav .pkt-btn,pkt-calendar .pkt-cal-month-nav td>div,pkt-calendar .pkt-cal-month-nav th>div,pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-days td>div,pkt-calendar .pkt-cal-days th>div{font:inherit;aspect-ratio:1/1;display:flex;justify-content:center;align-items:center;border:0}.pkt-calendar .pkt-cal-month-nav .pkt-btn,.pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-month-nav .pkt-btn,pkt-calendar .pkt-cal-days .pkt-btn{margin:0;border-radius:50%}.pkt-calendar .pkt-cal-days,pkt-calendar .pkt-cal-days{margin:0;padding-inline-start:0;border-spacing:0}.pkt-calendar .pkt-cal-days td,pkt-calendar .pkt-cal-days td{padding:0}.pkt-calendar .pkt-cal-days .pkt-btn,pkt-calendar .pkt-cal-days .pkt-btn{padding:0}.pkt-calendar .pkt-cal-days button,.pkt-calendar .pkt-cal-days div,pkt-calendar .pkt-cal-days button,pkt-calendar .pkt-cal-days div{aspect-ratio:1/1;justify-content:center;align-items:center;position:relative;text-align:center}.pkt-calendar .pkt-cal-days button:before,.pkt-calendar .pkt-cal-days button:after,.pkt-calendar .pkt-cal-days div:before,.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days button:before,pkt-calendar .pkt-cal-days button:after,pkt-calendar .pkt-cal-days div:before,pkt-calendar .pkt-cal-days div:after{content:"";display:block;position:absolute;top:0;bottom:0;z-index:-1}.pkt-calendar .pkt-cal-days button:before,.pkt-calendar .pkt-cal-days div:before,pkt-calendar .pkt-cal-days button:before,pkt-calendar .pkt-cal-days div:before{left:0;right:50%}.pkt-calendar .pkt-cal-days button:after,.pkt-calendar .pkt-cal-days div:after,pkt-calendar .pkt-cal-days button:after,pkt-calendar .pkt-cal-days div:after{left:50%;right:0}.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,.pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days,pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days{grid-template-columns:repeat(8, 12.5%)}.pkt-calendar .pkt-cal-other,.pkt-calendar .pkt-cal-days [data-disabled],pkt-calendar .pkt-cal-other,pkt-calendar .pkt-cal-days [data-disabled]{cursor:not-allowed;color:var(--pkt-color-grays-gray-200);background:rgba(0,0,0,0);border:none}.pkt-calendar .pkt-cal-today .pkt-btn,pkt-calendar .pkt-cal-today .pkt-btn{text-decoration:underline;outline:1px solid var(--pkt-color-border-default);outline-offset:-1px}.pkt-calendar .pkt-cal-selected .pkt-btn,.pkt-calendar .pkt-cal-selected .pkt-btn:focus,.pkt-calendar .pkt-cal-selected .pkt-btn:hover,pkt-calendar .pkt-cal-selected .pkt-btn,pkt-calendar .pkt-cal-selected .pkt-btn:focus,pkt-calendar .pkt-cal-selected .pkt-btn:hover{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-brand-dark-blue-1000)}.pkt-calendar .pkt-cal-in-range .pkt-btn,.pkt-calendar .pkt-cal-in-range .pkt-btn:focus,.pkt-calendar .pkt-cal-in-range .pkt-btn:hover,pkt-calendar .pkt-cal-in-range .pkt-btn,pkt-calendar .pkt-cal-in-range .pkt-btn:focus,pkt-calendar .pkt-cal-in-range .pkt-btn:hover{color:var(--pkt-color-brand-dark-blue-1000)}.pkt-calendar .pkt-cal-in-range :before,.pkt-calendar .pkt-cal-in-range :after,.pkt-calendar .pkt-cal-in-range-first :after,.pkt-calendar .pkt-cal-in-range-last :before,pkt-calendar .pkt-cal-in-range :before,pkt-calendar .pkt-cal-in-range :after,pkt-calendar .pkt-cal-in-range-first :after,pkt-calendar .pkt-cal-in-range-last :before{background-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-in-range-first :before,.pkt-calendar .pkt-cal-in-range-last :after,pkt-calendar .pkt-cal-in-range-first :before,pkt-calendar .pkt-cal-in-range-last :after{background-color:rgba(0,0,0,0)}.pkt-calendar .pkt-cal-range-hover :before,.pkt-calendar .pkt-cal-range-hover .pkt-btn,pkt-calendar .pkt-cal-range-hover :before,pkt-calendar .pkt-cal-range-hover .pkt-btn{background-color:var(--pkt-color-surface-default-light-blue);color:var(--pkt-color-brand-dark-blue-1000)}.pkt-calendar .pkt-cal-range-hover ::after,pkt-calendar .pkt-cal-range-hover ::after{background-color:rgba(0,0,0,0)}.pkt-calendar .pkt-cal-range-hover .pkt-btn,pkt-calendar .pkt-cal-range-hover .pkt-btn{border-color:var(--pkt-color-surface-default-light-blue)}.pkt-calendar .pkt-cal-excluded,pkt-calendar .pkt-cal-excluded{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-calendar .pkt-cal-excluded :before,.pkt-calendar .pkt-cal-excluded :after,pkt-calendar .pkt-cal-excluded :before,pkt-calendar .pkt-cal-excluded :after{background-color:rgba(0,0,0,0)}

package/dist/css/components/card.css

@@ -33,7 +33,7 @@ pkt-card {
   margin: 0;
   font-size: 1.875rem;
   font-weight: 400;
-  margin-bottom: 0.5rem;
+  margin-block-end: 0.5rem;
   hyphens: auto;
   overflow-wrap: break-word;
 }
@@ -45,15 +45,15 @@ pkt-card {
   padding: 0;
   margin: 0;
   line-height: unset;
-  margin-bottom: 1rem;
+  margin-block-end: 1rem;
   font-size: 1.25rem;
   font-weight: 300;
   hyphens: auto;
   overflow-wrap: break-word;
 }
 .pkt-card .pkt-card__metadata {
-  margin-top: 1rem;
-  margin-bottom: 0;
+  margin-block-start: 1rem;
+  margin-block-end: 0;
   line-height: unset;
   gap: 0.5rem;
 }
@@ -64,12 +64,12 @@ pkt-card {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
-  margin-bottom: 0.5rem;
-  margin-top: 0;
+  margin-block-end: 0.5rem;
+  margin-block-start: 0;
 }
 .pkt-card .pkt-card__tags-bottom {
-  margin-top: 0.5rem;
-  margin-bottom: 0;
+  margin-block-start: 0.5rem;
+  margin-block-end: 0;
 }
 .pkt-card.pkt-card--horizontal {
   flex-direction: row;
@@ -105,15 +105,15 @@ pkt-card {
 }
 .pkt-card.pkt-card--horizontal .pkt-card__image {
   max-width: 400px;
-  margin-right: 2rem;
+  margin-inline-end: 2rem;
 }
 .pkt-card.pkt-card--horizontal .pkt-card__image-square {
   align-self: stretch;
 }
 @media screen and (max-width: 36rem) {
   .pkt-card.pkt-card--horizontal .pkt-card__image {
-    margin-right: 0;
-    margin-bottom: 2rem;
+    margin-inline-end: 0;
+    margin-block-end: 2rem;
     max-height: 400px;
   }
   .pkt-card.pkt-card--horizontal .pkt-card__image-square {
@@ -121,7 +121,7 @@ pkt-card {
   }
 }
 .pkt-card.pkt-card--vertical .pkt-card__image {
-  margin-bottom: 2rem;
+  margin-block-end: 2rem;
   max-height: 400px;
 }
 .pkt-card.pkt-card--padding-none.pkt-card--vertical .pkt-card__image-square {

package/dist/css/components/card.min.css

@@ -1 +1 @@
-pkt-card{display:block;width:100%}.pkt-card{position:relative;display:flex;align-items:center;width:100%;min-width:12.5rem;padding:1.5rem}.pkt-card .pkt-card__wrapper{display:flex;flex-direction:column;flex:1 1 53%;width:100%;overflow:hidden}.pkt-card.pkt-card--padding-none{padding:0}.pkt-card .pkt-card__heading h1,.pkt-card .pkt-card__heading h2,.pkt-card .pkt-card__heading h3,.pkt-card .pkt-card__heading h4,.pkt-card .pkt-card__heading h5{padding:0;margin:0;font-size:1.875rem;font-weight:400;margin-bottom:.5rem;hyphens:auto;overflow-wrap:break-word}.pkt-card .pkt-card__link{text-decoration-thickness:.12rem;text-underline-offset:.15em}.pkt-card p.pkt-card__subheading{padding:0;margin:0;line-height:unset;margin-bottom:1rem;font-size:1.25rem;font-weight:300;hyphens:auto;overflow-wrap:break-word}.pkt-card .pkt-card__metadata{margin-top:1rem;margin-bottom:0;line-height:unset;gap:.5rem}.pkt-card .pkt-card__metadata-lead{font-weight:500}.pkt-card .pkt-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.5rem;margin-top:0}.pkt-card .pkt-card__tags-bottom{margin-top:.5rem;margin-bottom:0}.pkt-card.pkt-card--horizontal{flex-direction:row}@media screen and (max-width: 36rem){.pkt-card.pkt-card--horizontal{flex-direction:column}}.pkt-card.pkt-card--vertical{flex-direction:column;min-width:12.5rem}.pkt-card .pkt-card__image{aspect-ratio:1;flex:1 1 47%;width:100%;overflow:hidden}.pkt-card .pkt-card__image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.pkt-card .pkt-card__image.pkt-card__image-round{border-radius:50%;align-self:unset;flex-grow:0;max-height:400px;max-width:400px}.pkt-card.pkt-card--horizontal .pkt-card__image{max-width:400px;margin-right:2rem}.pkt-card.pkt-card--horizontal .pkt-card__image-square{align-self:stretch}@media screen and (max-width: 36rem){.pkt-card.pkt-card--horizontal .pkt-card__image{margin-right:0;margin-bottom:2rem;max-height:400px}.pkt-card.pkt-card--horizontal .pkt-card__image-square{max-width:unset}}.pkt-card.pkt-card--vertical .pkt-card__image{margin-bottom:2rem;max-height:400px}.pkt-card.pkt-card--padding-none.pkt-card--vertical .pkt-card__image-square{aspect-ratio:19/10}@media screen and (max-width: 36rem){.pkt-card.pkt-card--padding-none.pkt-card--horizontal .pkt-card__image-square{aspect-ratio:19/10}}.pkt-card .pkt-card__wrapper .pkt-card__link::before{content:"";position:absolute;inset:0;z-index:1;box-shadow:0px 0px 0px 0px rgba(0,0,0,0);outline:2px solid var(--pkt-color-brand-warm-blue-1000);outline-offset:-2px;outline-color:rgba(0,0,0,0);transition:all .3s ease-in-out}.pkt-card .pkt-card__link-heading{transition:color .2s ease-in-out,text-decoration-color .2s ease-in-out}.pkt-card:hover.pkt-card--border-on-hover .pkt-card__link::before,.pkt-card:focus-visible.pkt-card--border-on-hover .pkt-card__link::before,.pkt-card:focus-within.pkt-card--border-on-hover .pkt-card__link::before{cursor:pointer;outline-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card:hover .pkt-card__link-heading,.pkt-card:focus-visible .pkt-card__link-heading,.pkt-card:focus-within .pkt-card__link-heading{color:var(--pkt-color-brand-warm-blue-1000);text-decoration-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card .pkt-card__link:focus{outline:none;box-shadow:none}.pkt-card .pkt-card__link-heading:focus-within{color:var(--pkt-color-brand-warm-blue-1000);text-decoration-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card .pkt-card__wrapper .pkt-card__link:focus-visible::before{box-shadow:0px 0px 0px 4px var(--pkt-color-brand-purple-1000);outline-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card.pkt-card--padding-none{outline:none;background-color:rgba(0,0,0,0)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--gray{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--blue{background-color:var(--pkt-color-brand-blue-200)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--green{background-color:var(--pkt-color-brand-light-green-400)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--beige{background-color:var(--pkt-color-brand-light-beige-1000)}.pkt-card--outlined,.pkt-card--outlined-beige{background-color:var(--pkt-color-background-default);outline-offset:-2px}.pkt-card--outlined{outline:2px solid var(--pkt-color-grays-gray-100)}.pkt-card--outlined-beige{outline:2px solid var(--pkt-color-brand-light-beige-1000)}.pkt-card--gray{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-card--blue{background-color:var(--pkt-color-brand-blue-200)}.pkt-card--green{background-color:var(--pkt-color-brand-light-green-400)}.pkt-card--beige{background-color:var(--pkt-color-brand-light-beige-1000)}
+pkt-card{display:block;width:100%}.pkt-card{position:relative;display:flex;align-items:center;width:100%;min-width:12.5rem;padding:1.5rem}.pkt-card .pkt-card__wrapper{display:flex;flex-direction:column;flex:1 1 53%;width:100%;overflow:hidden}.pkt-card.pkt-card--padding-none{padding:0}.pkt-card .pkt-card__heading h1,.pkt-card .pkt-card__heading h2,.pkt-card .pkt-card__heading h3,.pkt-card .pkt-card__heading h4,.pkt-card .pkt-card__heading h5{padding:0;margin:0;font-size:1.875rem;font-weight:400;margin-block-end:.5rem;hyphens:auto;overflow-wrap:break-word}.pkt-card .pkt-card__link{text-decoration-thickness:.12rem;text-underline-offset:.15em}.pkt-card p.pkt-card__subheading{padding:0;margin:0;line-height:unset;margin-block-end:1rem;font-size:1.25rem;font-weight:300;hyphens:auto;overflow-wrap:break-word}.pkt-card .pkt-card__metadata{margin-block-start:1rem;margin-block-end:0;line-height:unset;gap:.5rem}.pkt-card .pkt-card__metadata-lead{font-weight:500}.pkt-card .pkt-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-block-end:.5rem;margin-block-start:0}.pkt-card .pkt-card__tags-bottom{margin-block-start:.5rem;margin-block-end:0}.pkt-card.pkt-card--horizontal{flex-direction:row}@media screen and (max-width: 36rem){.pkt-card.pkt-card--horizontal{flex-direction:column}}.pkt-card.pkt-card--vertical{flex-direction:column;min-width:12.5rem}.pkt-card .pkt-card__image{aspect-ratio:1;flex:1 1 47%;width:100%;overflow:hidden}.pkt-card .pkt-card__image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.pkt-card .pkt-card__image.pkt-card__image-round{border-radius:50%;align-self:unset;flex-grow:0;max-height:400px;max-width:400px}.pkt-card.pkt-card--horizontal .pkt-card__image{max-width:400px;margin-inline-end:2rem}.pkt-card.pkt-card--horizontal .pkt-card__image-square{align-self:stretch}@media screen and (max-width: 36rem){.pkt-card.pkt-card--horizontal .pkt-card__image{margin-inline-end:0;margin-block-end:2rem;max-height:400px}.pkt-card.pkt-card--horizontal .pkt-card__image-square{max-width:unset}}.pkt-card.pkt-card--vertical .pkt-card__image{margin-block-end:2rem;max-height:400px}.pkt-card.pkt-card--padding-none.pkt-card--vertical .pkt-card__image-square{aspect-ratio:19/10}@media screen and (max-width: 36rem){.pkt-card.pkt-card--padding-none.pkt-card--horizontal .pkt-card__image-square{aspect-ratio:19/10}}.pkt-card .pkt-card__wrapper .pkt-card__link::before{content:"";position:absolute;inset:0;z-index:1;box-shadow:0px 0px 0px 0px rgba(0,0,0,0);outline:2px solid var(--pkt-color-brand-warm-blue-1000);outline-offset:-2px;outline-color:rgba(0,0,0,0);transition:all .3s ease-in-out}.pkt-card .pkt-card__link-heading{transition:color .2s ease-in-out,text-decoration-color .2s ease-in-out}.pkt-card:hover.pkt-card--border-on-hover .pkt-card__link::before,.pkt-card:focus-visible.pkt-card--border-on-hover .pkt-card__link::before,.pkt-card:focus-within.pkt-card--border-on-hover .pkt-card__link::before{cursor:pointer;outline-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card:hover .pkt-card__link-heading,.pkt-card:focus-visible .pkt-card__link-heading,.pkt-card:focus-within .pkt-card__link-heading{color:var(--pkt-color-brand-warm-blue-1000);text-decoration-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card .pkt-card__link:focus{outline:none;box-shadow:none}.pkt-card .pkt-card__link-heading:focus-within{color:var(--pkt-color-brand-warm-blue-1000);text-decoration-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card .pkt-card__wrapper .pkt-card__link:focus-visible::before{box-shadow:0px 0px 0px 4px var(--pkt-color-brand-purple-1000);outline-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card.pkt-card--padding-none{outline:none;background-color:rgba(0,0,0,0)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--gray{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--blue{background-color:var(--pkt-color-brand-blue-200)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--green{background-color:var(--pkt-color-brand-light-green-400)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--beige{background-color:var(--pkt-color-brand-light-beige-1000)}.pkt-card--outlined,.pkt-card--outlined-beige{background-color:var(--pkt-color-background-default);outline-offset:-2px}.pkt-card--outlined{outline:2px solid var(--pkt-color-grays-gray-100)}.pkt-card--outlined-beige{outline:2px solid var(--pkt-color-brand-light-beige-1000)}.pkt-card--gray{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-card--blue{background-color:var(--pkt-color-brand-blue-200)}.pkt-card--green{background-color:var(--pkt-color-brand-light-green-400)}.pkt-card--beige{background-color:var(--pkt-color-brand-light-beige-1000)}

package/dist/css/components/combobox.css

@@ -37,7 +37,7 @@ pkt-combobox[fullwidth], pkt-combobox--fullwidth,
   border-color: transparent;
 }
 .pkt-combobox__wrapper .pkt-combobox__value {
-  padding-left: 0.5rem;
+  padding-inline-start: 0.5rem;
 }
 .pkt-combobox__wrapper .pkt-combobox__input {
   display: flex;
@@ -189,10 +189,10 @@ pkt-combobox[fullwidth], pkt-combobox--fullwidth,
 .pkt-combobox__wrapper .pkt-combobox__placeholder {
   color: var(--pkt-color-text-placeholder);
   opacity: 1;
-  padding-left: 0.5rem;
+  padding-inline-start: 0.5rem;
 }
 .pkt-combobox__wrapper .pkt-listbox__open {
-  margin-top: 0.5rem;
+  margin-block-start: 0.5rem;
 }
 
 .pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within {

package/dist/css/components/combobox.min.css

@@ -1 +1 @@
-pkt-combobox,.pkt-combobox-component{display:block;max-width:31rem;width:100%}pkt-combobox[fullwidth],pkt-combobox--fullwidth,.pkt-combobox-component[fullwidth],.pkt-combobox-component--fullwidth{max-width:100%}.pkt-combobox__wrapper{position:relative;width:100%}.pkt-combobox__wrapper .pkt-combobox{position:relative;display:flex;flex-direction:column;width:100%}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn{position:absolute;right:.25rem;height:100%;min-width:1.125rem;min-height:1.125rem;padding:.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn svg{width:1.5rem;height:1.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]){background-color:inherit;border-color:rgba(0,0,0,0)}.pkt-combobox__wrapper .pkt-combobox__value{padding-left:.5rem}.pkt-combobox__wrapper .pkt-combobox__input{display:flex;align-items:center;position:relative;margin:0;padding:.5rem 2rem .5rem .5rem;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);color:var(--pkt-color-input-text-normal);min-height:3rem;gap:.375rem;flex-wrap:wrap;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem;line-height:1.25}.pkt-combobox__wrapper .pkt-combobox__input-div{display:contents}.pkt-combobox__wrapper .pkt-combobox__input--fullwidth{width:100%}.pkt-combobox__wrapper .pkt-combobox__input--small{min-height:2.625rem;padding:.375rem 2.5rem .375rem .375rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-combobox__wrapper .pkt-combobox__input--small .pkt-combobox__arrow-icon svg{width:1.25rem;height:1.25rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall{min-height:2.25rem;padding:.25rem 2.25rem .25rem .25rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon{padding:.25rem .5rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon svg{width:1.125rem;height:1.125rem}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error){border-color:var(--pkt-color-input-border-hover)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error)>.pkt-combobox__value{color:var(--pkt-color-input-text-hover)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon{--fg-color: var(--pkt-color-brand-warm-blue-1000)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon:not(.pkt-combobox__arrow-icon--open) svg{transform:translateY(0.25rem)}.pkt-combobox__wrapper .pkt-combobox__input--error,.pkt-combobox__wrapper .pkt-combobox__input--error:hover,.pkt-combobox__wrapper .pkt-combobox__input--error:focus,.pkt-combobox__wrapper .pkt-combobox__input--error:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-combobox__wrapper .pkt-combobox__input:focus,.pkt-combobox__wrapper .pkt-combobox__input:focus-within,.pkt-combobox__wrapper .pkt-combobox__input:focus-visible,.pkt-combobox__wrapper .pkt-combobox__input--open{border-color:var(--pkt-color-input-border-active);outline:2px solid var(--pkt-color-input-border-active)}.pkt-combobox__wrapper .pkt-combobox__input--disabled,.pkt-combobox__wrapper .pkt-combobox__input--disabled:hover,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus-within{background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-border-states-disabled);color:var(--pkt-color-text-action-disabled);cursor:inherit}.pkt-combobox__wrapper .pkt-combobox__input input{border:none;font-size:inherit;font-family:inherit;font-weight:inherit;color:inherit;background:rgba(0,0,0,0);letter-spacing:inherit;line-height:1.4rem;padding:0 0 0 .5rem;margin:0;flex:1;min-width:3rem}.pkt-combobox__wrapper .pkt-combobox__input input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-combobox__wrapper .pkt-combobox__input input:focus,.pkt-combobox__wrapper .pkt-combobox__input input:active{outline:none}.pkt-combobox__wrapper .pkt-combobox__input .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__tag-list{display:contents;list-style:none;margin:0;padding:0}.pkt-combobox__wrapper .pkt-combobox__tag-list li{display:contents}.pkt-combobox__wrapper .pkt-combobox__arrow-icon{position:absolute;right:.25rem;min-width:1.125rem;min-height:1.125rem;padding:.5rem;transform:rotate(0deg);transition:transform .3s ease;pointer-events:none}.pkt-combobox__wrapper .pkt-combobox__arrow-icon svg{width:1.5rem;height:1.5rem;transition:transform .1s ease-in-out}.pkt-combobox__wrapper .pkt-combobox__arrow-icon--open{transform:rotate(180deg);transition:transform .3s ease}.pkt-combobox__wrapper .pkt-combobox__tags-outside{display:flex;flex-wrap:wrap;gap:.375rem}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list{display:flex;flex-wrap:wrap;gap:.375rem;list-style:none;margin:0;padding:0}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list li{display:contents}.pkt-combobox__wrapper .pkt-combobox__placeholder{color:var(--pkt-color-text-placeholder);opacity:1;padding-left:.5rem}.pkt-combobox__wrapper .pkt-listbox__open{margin-top:.5rem}.pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within{outline:4px solid var(--pkt-color-border-states-focus)}.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search),.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search){padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__empty,.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__banner,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner{padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__search input,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input{padding:.5rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search){padding:.375rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner{padding:.375rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner-icon,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search-icon .pkt-icon{width:1.125rem;height:1.125rem}.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input{padding:.375rem .5rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}
+pkt-combobox,.pkt-combobox-component{display:block;max-width:31rem;width:100%}pkt-combobox[fullwidth],pkt-combobox--fullwidth,.pkt-combobox-component[fullwidth],.pkt-combobox-component--fullwidth{max-width:100%}.pkt-combobox__wrapper{position:relative;width:100%}.pkt-combobox__wrapper .pkt-combobox{position:relative;display:flex;flex-direction:column;width:100%}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn{position:absolute;right:.25rem;height:100%;min-width:1.125rem;min-height:1.125rem;padding:.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn svg{width:1.5rem;height:1.5rem}.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]){background-color:inherit;border-color:rgba(0,0,0,0)}.pkt-combobox__wrapper .pkt-combobox__value{padding-inline-start:.5rem}.pkt-combobox__wrapper .pkt-combobox__input{display:flex;align-items:center;position:relative;margin:0;padding:.5rem 2rem .5rem .5rem;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);color:var(--pkt-color-input-text-normal);min-height:3rem;gap:.375rem;flex-wrap:wrap;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem;line-height:1.25}.pkt-combobox__wrapper .pkt-combobox__input-div{display:contents}.pkt-combobox__wrapper .pkt-combobox__input--fullwidth{width:100%}.pkt-combobox__wrapper .pkt-combobox__input--small{min-height:2.625rem;padding:.375rem 2.5rem .375rem .375rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-combobox__wrapper .pkt-combobox__input--small .pkt-combobox__arrow-icon svg{width:1.25rem;height:1.25rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall{min-height:2.25rem;padding:.25rem 2.25rem .25rem .25rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon{padding:.25rem .5rem}.pkt-combobox__wrapper .pkt-combobox__input--xsmall .pkt-combobox__arrow-icon svg{width:1.125rem;height:1.125rem}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error){border-color:var(--pkt-color-input-border-hover)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error)>.pkt-combobox__value{color:var(--pkt-color-input-text-hover)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon{--fg-color: var(--pkt-color-brand-warm-blue-1000)}.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon:not(.pkt-combobox__arrow-icon--open) svg{transform:translateY(0.25rem)}.pkt-combobox__wrapper .pkt-combobox__input--error,.pkt-combobox__wrapper .pkt-combobox__input--error:hover,.pkt-combobox__wrapper .pkt-combobox__input--error:focus,.pkt-combobox__wrapper .pkt-combobox__input--error:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-combobox__wrapper .pkt-combobox__input:focus,.pkt-combobox__wrapper .pkt-combobox__input:focus-within,.pkt-combobox__wrapper .pkt-combobox__input:focus-visible,.pkt-combobox__wrapper .pkt-combobox__input--open{border-color:var(--pkt-color-input-border-active);outline:2px solid var(--pkt-color-input-border-active)}.pkt-combobox__wrapper .pkt-combobox__input--disabled,.pkt-combobox__wrapper .pkt-combobox__input--disabled:hover,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus,.pkt-combobox__wrapper .pkt-combobox__input--disabled:focus-within{background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-border-states-disabled);color:var(--pkt-color-text-action-disabled);cursor:inherit}.pkt-combobox__wrapper .pkt-combobox__input input{border:none;font-size:inherit;font-family:inherit;font-weight:inherit;color:inherit;background:rgba(0,0,0,0);letter-spacing:inherit;line-height:1.4rem;padding:0 0 0 .5rem;margin:0;flex:1;min-width:3rem}.pkt-combobox__wrapper .pkt-combobox__input input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-combobox__wrapper .pkt-combobox__input input:focus,.pkt-combobox__wrapper .pkt-combobox__input input:active{outline:none}.pkt-combobox__wrapper .pkt-combobox__input .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__tag-list{display:contents;list-style:none;margin:0;padding:0}.pkt-combobox__wrapper .pkt-combobox__tag-list li{display:contents}.pkt-combobox__wrapper .pkt-combobox__arrow-icon{position:absolute;right:.25rem;min-width:1.125rem;min-height:1.125rem;padding:.5rem;transform:rotate(0deg);transition:transform .3s ease;pointer-events:none}.pkt-combobox__wrapper .pkt-combobox__arrow-icon svg{width:1.5rem;height:1.5rem;transition:transform .1s ease-in-out}.pkt-combobox__wrapper .pkt-combobox__arrow-icon--open{transform:rotate(180deg);transition:transform .3s ease}.pkt-combobox__wrapper .pkt-combobox__tags-outside{display:flex;flex-wrap:wrap;gap:.375rem}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-tag{margin:0}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list{display:flex;flex-wrap:wrap;gap:.375rem;list-style:none;margin:0;padding:0}.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list li{display:contents}.pkt-combobox__wrapper .pkt-combobox__placeholder{color:var(--pkt-color-text-placeholder);opacity:1;padding-inline-start:.5rem}.pkt-combobox__wrapper .pkt-listbox__open{margin-block-start:.5rem}.pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within{outline:4px solid var(--pkt-color-border-states-focus)}.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search),.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search){padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__empty,.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__banner,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner{padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-inputwrapper--small .pkt-listbox .pkt-listbox__search input,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input{padding:.5rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__option:not(.pkt-listbox__search){padding:.375rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__empty,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner{padding:.375rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__banner-icon,.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search-icon .pkt-icon{width:1.125rem;height:1.125rem}.pkt-inputwrapper--xsmall .pkt-listbox .pkt-listbox__search input{padding:.375rem .5rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}

package/dist/css/components/datepicker.css

@@ -65,8 +65,7 @@ pkt-datepicker-multiple {
   outline: none;
 }
 .pkt-datepicker__inputs button.pkt-input-icon {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+  padding-inline: 0.75rem;
 }
 .pkt-datepicker__inputs button.pkt-input-icon:hover {
   background-color: inherit !important;
@@ -74,19 +73,19 @@ pkt-datepicker-multiple {
   --fg-color: var(--pkt-color-button-text-hover);
 }
 .pkt-datepicker__inputs .pkt-datepicker__input {
-  padding-right: 0;
+  padding-inline-end: 0;
   background-image: none;
   width: 8.3rem;
 }
 .pkt-datepicker__inputs .pkt-input-separator ~ .pkt-datepicker--range {
-  padding-left: 0.25rem;
+  padding-inline-start: 0.25rem;
 }
 
 .pkt-calendar-popup {
   top: 100%;
   left: 0;
   z-index: 2;
-  margin-top: 0.5rem;
+  margin-block-start: 0.5rem;
   padding: 0.5rem;
   position: absolute;
   width: max-content;
@@ -130,8 +129,7 @@ pkt-datepicker-multiple {
   line-height: 1.5rem;
 }
 .pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-inline: 0.5rem;
 }
 .pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon pkt-icon,
 .pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon .pkt-icon,
@@ -165,8 +163,7 @@ pkt-datepicker-multiple {
   line-height: 1rem;
 }
 .pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-inline: 0.5rem;
 }
 .pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon pkt-icon,
 .pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon .pkt-icon,
@@ -185,7 +182,7 @@ pkt-datepicker-multiple {
 
 @supports (-moz-appearance: none) {
   .pkt-datepicker__inputs .pkt-datepicker__input {
-    padding-right: 0.5rem;
+    padding-inline-end: 0.5rem;
   }
   .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
     width: auto;

package/dist/css/components/datepicker.min.css

@@ -1 +1 @@
-.pkt-datepicker,pkt-datepicker{display:block;position:relative}.pkt-datepicker__tags button.pkt-tag{margin:0 .25rem .5rem 0}.pkt-datepicker-single,.pkt-datepicker-range,.pkt-datepicker-multiple,pkt-datepicker-single,pkt-datepicker-range,pkt-datepicker-multiple{display:block}.pkt-datepicker__inputs{width:100%;position:relative}.pkt-datepicker__inputs .pkt-input__container:not(:has(.pkt-input--fullwidth)){width:fit-content}.pkt-datepicker__inputs .pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);background-color:var(--pkt-color-input-background-normal)}.pkt-datepicker__inputs .pkt-input__container .pkt-input,.pkt-datepicker__inputs .pkt-input__container .pkt-input-prefix,.pkt-datepicker__inputs .pkt-input__container .pkt-input-suffix,.pkt-datepicker__inputs .pkt-input__container .pkt-input-icon,.pkt-datepicker__inputs .pkt-input__container .pkt-input-separator{border:0;height:100%;min-height:2.75rem}.pkt-datepicker__inputs .pkt-input__container:hover{border-color:var(--pkt-color-input-border-active)}.pkt-datepicker__inputs .pkt-input__container:focus-within{border-color:var(--pkt-color-input-border-active)}.pkt-datepicker__inputs .pkt-input__container:has(input:disabled),.pkt-datepicker__inputs .pkt-input__container:has(input[readonly]:not(.ios-readonly-hack)){border-color:var(--pkt-color-input-border-disabled);--fg-color: var(--pkt-color-input-text-disabled)}.pkt-datepicker__inputs .pkt-input__container:has(.pkt-input--counter-error){border-color:var(--pkt-color-input-border-error)}.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container{border-color:var(--pkt-color-brand-red-1000)}.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container:hover,.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container{border-color:var(--pkt-color-border-states-disabled)}.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container:hover,.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container:focus-within{border-color:var(--pkt-color-border-states-disabled);box-shadow:none;outline:none}.pkt-datepicker__inputs button.pkt-input-icon{padding-left:.75rem;padding-right:.75rem}.pkt-datepicker__inputs button.pkt-input-icon:hover{background-color:inherit !important;border-color:inherit !important;--fg-color: var(--pkt-color-button-text-hover)}.pkt-datepicker__inputs .pkt-datepicker__input{padding-right:0;background-image:none;width:8.3rem}.pkt-datepicker__inputs .pkt-input-separator~.pkt-datepicker--range{padding-left:.25rem}.pkt-calendar-popup{top:100%;left:0;z-index:2;margin-top:.5rem;padding:.5rem;position:absolute;width:max-content;background:var(--pkt-color-background-default);border:2px solid var(--pkt-color-border-gray)}.pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){width:8.3rem;max-width:calc(100% - 3rem)}.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple){flex:1}.pkt-datepicker__input::-webkit-inner-spin-button,.pkt-datepicker__input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--multiple{flex:1;min-width:0}.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-prefix,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-suffix,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-icon,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-separator{min-height:2.375rem}.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-prefix,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon{padding-left:.5rem;padding-right:.5rem}.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon pkt-icon,.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon .pkt-icon,.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon svg{width:1.25rem;height:1.25rem}@supports not (-moz-appearance: none){.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth){width:7.3rem}.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){max-width:calc(100% - 2.5rem)}}.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-prefix,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-suffix,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-icon,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-separator{min-height:2rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-prefix,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem;line-height:1rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon{padding-left:.5rem;padding-right:.5rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon pkt-icon,.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon .pkt-icon,.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon svg{width:1.125rem;height:1.125rem}@supports not (-moz-appearance: none){.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth){width:6.5rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){max-width:calc(100% - 2rem)}}@supports(-moz-appearance: none){.pkt-datepicker__inputs .pkt-datepicker__input{padding-right:.5rem}.pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple){width:auto;max-width:100%}.pkt-datepicker__inputs .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple){width:auto;flex:1}.pkt-datepicker__inputs .pkt-input__container:has(.pkt-datepicker__input[type=date]) button.pkt-input-icon{display:none}.pkt-datepicker__inputs input.pkt-datepicker__input:has(~button):not(:has(~.pkt-input-separator)):not(:has(~.pkt-input-prefix)){border-right-width:2px !important}@media screen and (max-width: 30rem){.pkt-datepicker__inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range{justify-self:start}}}
+.pkt-datepicker,pkt-datepicker{display:block;position:relative}.pkt-datepicker__tags button.pkt-tag{margin:0 .25rem .5rem 0}.pkt-datepicker-single,.pkt-datepicker-range,.pkt-datepicker-multiple,pkt-datepicker-single,pkt-datepicker-range,pkt-datepicker-multiple{display:block}.pkt-datepicker__inputs{width:100%;position:relative}.pkt-datepicker__inputs .pkt-input__container:not(:has(.pkt-input--fullwidth)){width:fit-content}.pkt-datepicker__inputs .pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);background-color:var(--pkt-color-input-background-normal)}.pkt-datepicker__inputs .pkt-input__container .pkt-input,.pkt-datepicker__inputs .pkt-input__container .pkt-input-prefix,.pkt-datepicker__inputs .pkt-input__container .pkt-input-suffix,.pkt-datepicker__inputs .pkt-input__container .pkt-input-icon,.pkt-datepicker__inputs .pkt-input__container .pkt-input-separator{border:0;height:100%;min-height:2.75rem}.pkt-datepicker__inputs .pkt-input__container:hover{border-color:var(--pkt-color-input-border-active)}.pkt-datepicker__inputs .pkt-input__container:focus-within{border-color:var(--pkt-color-input-border-active)}.pkt-datepicker__inputs .pkt-input__container:has(input:disabled),.pkt-datepicker__inputs .pkt-input__container:has(input[readonly]:not(.ios-readonly-hack)){border-color:var(--pkt-color-input-border-disabled);--fg-color: var(--pkt-color-input-text-disabled)}.pkt-datepicker__inputs .pkt-input__container:has(.pkt-input--counter-error){border-color:var(--pkt-color-input-border-error)}.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container{border-color:var(--pkt-color-brand-red-1000)}.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container:hover,.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container{border-color:var(--pkt-color-border-states-disabled)}.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container:hover,.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container:focus-within{border-color:var(--pkt-color-border-states-disabled);box-shadow:none;outline:none}.pkt-datepicker__inputs button.pkt-input-icon{padding-inline:.75rem}.pkt-datepicker__inputs button.pkt-input-icon:hover{background-color:inherit !important;border-color:inherit !important;--fg-color: var(--pkt-color-button-text-hover)}.pkt-datepicker__inputs .pkt-datepicker__input{padding-inline-end:0;background-image:none;width:8.3rem}.pkt-datepicker__inputs .pkt-input-separator~.pkt-datepicker--range{padding-inline-start:.25rem}.pkt-calendar-popup{top:100%;left:0;z-index:2;margin-block-start:.5rem;padding:.5rem;position:absolute;width:max-content;background:var(--pkt-color-background-default);border:2px solid var(--pkt-color-border-gray)}.pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){width:8.3rem;max-width:calc(100% - 3rem)}.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple){flex:1}.pkt-datepicker__input::-webkit-inner-spin-button,.pkt-datepicker__input::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.pkt-datepicker__input.pkt-input--fullwidth.pkt-datepicker--multiple{flex:1;min-width:0}.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-prefix,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-suffix,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-icon,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-separator{min-height:2.375rem}.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-prefix,.pkt-datepicker--small .pkt-datepicker__inputs .pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon{padding-inline:.5rem}.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon pkt-icon,.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon .pkt-icon,.pkt-datepicker--small .pkt-datepicker__inputs button.pkt-input-icon svg{width:1.25rem;height:1.25rem}@supports not (-moz-appearance: none){.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth){width:7.3rem}.pkt-datepicker--small .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){max-width:calc(100% - 2.5rem)}}.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-prefix,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-suffix,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-icon,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-separator{min-height:2rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-prefix,.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem;line-height:1rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon{padding-inline:.5rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon pkt-icon,.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon .pkt-icon,.pkt-datepicker--xsmall .pkt-datepicker__inputs button.pkt-input-icon svg{width:1.125rem;height:1.125rem}@supports not (-moz-appearance: none){.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-input--fullwidth){width:6.5rem}.pkt-datepicker--xsmall .pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range){max-width:calc(100% - 2rem)}}@supports(-moz-appearance: none){.pkt-datepicker__inputs .pkt-datepicker__input{padding-inline-end:.5rem}.pkt-datepicker__inputs .pkt-datepicker__input:not(.pkt-datepicker--multiple){width:auto;max-width:100%}.pkt-datepicker__inputs .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple){width:auto;flex:1}.pkt-datepicker__inputs .pkt-input__container:has(.pkt-datepicker__input[type=date]) button.pkt-input-icon{display:none}.pkt-datepicker__inputs input.pkt-datepicker__input:has(~button):not(:has(~.pkt-input-separator)):not(:has(~.pkt-input-prefix)){border-right-width:2px !important}@media screen and (max-width: 30rem){.pkt-datepicker__inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range{justify-self:start}}}

package/dist/css/components/fileupload.css

@@ -40,7 +40,7 @@ pkt-fileupload--error .pkt-fileupload__drop-zone,
 }
 pkt-fileupload--error .pkt-alert--error.pkt-fileupload__error-alert,
 .pkt-fileupload--error .pkt-alert--error.pkt-fileupload__error-alert {
-  margin-bottom: 1rem;
+  margin-block-end: 1rem;
   width: 100%;
 }
 pkt-fileupload--disabled,
@@ -81,7 +81,7 @@ pkt-fileupload__drop-zone,
   cursor: pointer;
   padding: 2rem;
   text-align: center;
-  margin-bottom: 1rem;
+  margin-block-end: 1rem;
   font-size: 14px;
 }
 pkt-fileupload__drop-zone:hover,
@@ -203,8 +203,8 @@ pkt-fileupload__queue-display,
   display: flex;
   flex-direction: column;
   padding: 0;
-  margin-top: 0;
-  margin-bottom: 1rem;
+  margin-block-start: 0;
+  margin-block-end: 1rem;
   row-gap: 0.5rem;
   container-type: inline-size;
   container-name: queue-item;
@@ -263,7 +263,7 @@ pkt-fileupload__queue-display:is(:has(.pkt-fileupload__queue-display__item__thum
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding-left: 0;
+  padding-inline-start: 0;
   align-items: flex-start;
   gap: 0.5rem;
 }
@@ -320,7 +320,7 @@ pkt-fileupload__queue-display__item__filesize,
   color: var(--pkt-color-text-placeholder);
   flex: 0 0 auto;
   white-space: nowrap;
-  padding-left: 0.5rem;
+  padding-inline-start: 0.5rem;
 }
 pkt-fileupload__queue-display__item__cancel-button,
 .pkt-fileupload__queue-display__item__cancel-button {
@@ -401,7 +401,7 @@ pkt-fileupload__queue-display__item__operation-content,
   grid-column: 1/-1;
   padding: 0.75rem 1rem;
   background: var(--pkt-color-surface-default-gray);
-  margin-top: 0.5rem;
+  margin-block-start: 0.5rem;
 }
 pkt-fileupload__queue-display__item__operation-content:empty,
 .pkt-fileupload__queue-display__item__operation-content:empty {
@@ -475,7 +475,7 @@ pkt-fileupload__queue-display__item__comment__time,
   font-size: 0.75rem;
   line-height: 1.25rem;
   display: block;
-  margin-top: 0.25rem;
+  margin-block-start: 0.25rem;
   color: var(--pkt-color-text-subtle);
 }
 pkt-fileupload__queue-display__item__comment__actions,
@@ -570,8 +570,8 @@ pkt-fileupload__queue-display__item__thumbnail__title,
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.375rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0.25rem;
+  margin-block-start: 0.5rem;
+  margin-block-end: 0.25rem;
   min-width: 0;
   max-width: 100%;
   overflow: hidden;
@@ -628,7 +628,7 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
 .pkt-fileupload__queue-display__item--error .pkt-fileupload__queue-display__item__cancel-button {
   grid-column: 3;
   grid-row: 1;
-  margin-left: 1rem;
+  margin-inline-start: 1rem;
 }
 pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display__item__cancel-button:hover, pkt-fileupload__queue-display__item--error .pkt-fileupload__queue-display__item__cancel-button:hover,
 .pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display__item__cancel-button:hover,
@@ -775,10 +775,10 @@ pkt-fileupload__queue-display__item--in-progress .pkt-fileupload__queue-display_
   align-items: stretch;
 }
 .pkt-fileupload-wrapper .pkt-inputwrapper__fieldset {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .pkt-fileupload-wrapper .pkt-inputwrapper__helptext {
-  margin-bottom: 0.5rem;
+  margin-block-end: 0.5rem;
 }
 
 .pkt-fileupload__image-preview-modal .pkt-contents {
@@ -821,7 +821,7 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__headingText
 }
 .pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal__container,
 pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal .pkt-modal__container {
-  padding-top: 0;
+  padding-block-start: 0;
   background-color: transparent;
 }
 .pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal__content,
@@ -894,12 +894,12 @@ pkt-modal.pkt-fileupload__image-preview-modal .pkt-modal::backdrop {
 .pkt-fileupload__image-preview__nav--prev {
   grid-column: 1;
   grid-row: 1;
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
 }
 .pkt-fileupload__image-preview__nav--next {
   grid-column: 3;
   grid-row: 1;
-  margin-right: 0.5rem;
+  margin-inline-end: 0.5rem;
 }
 .pkt-fileupload__image-preview__nav.pkt-btn {
   cursor: pointer;