@oslokommune/punkt-css 16.26.2 → 17.0.0

package/dist/css/components/textarea.css

@@ -0,0 +1,41 @@
+/*
+ * Textarea component
+ *
+ * Base field styles (border, states, min-height) live in _input.scss on .pkt-input:is(textarea).
+ * Wrapper label/helptext scale lives in _inputwrapper.scss (--small / --xsmall).
+ * Counter stays in normal flow below the field for all sizes (see textarea.astro).
+ */
+pkt-textarea:not([fullwidth]):has(textarea.pkt-input:not([cols])) {
+  width: min(31rem, 100%);
+}
+
+pkt-textarea[fullwidth] {
+  width: 100%;
+}
+
+.pkt-inputwrapper:has(textarea.pkt-input:not(.pkt-input--fullwidth):not([cols])) {
+  width: min(31rem, 100%);
+}
+
+.pkt-inputwrapper:has(textarea.pkt-input--fullwidth) {
+  width: 100%;
+}
+
+textarea.pkt-input:not(.pkt-input--fullwidth):not([cols]) {
+  width: 100%;
+}
+textarea.pkt-input--small, textarea.pkt-input--xsmall {
+  padding: 0.5rem 1rem;
+}
+textarea.pkt-input--small {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+textarea.pkt-input--xsmall {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}

package/dist/css/components/textarea.min.css

@@ -0,0 +1 @@
+pkt-textarea:not([fullwidth]):has(textarea.pkt-input:not([cols])){width:min(31rem,100%)}pkt-textarea[fullwidth]{width:100%}.pkt-inputwrapper:has(textarea.pkt-input:not(.pkt-input--fullwidth):not([cols])){width:min(31rem,100%)}.pkt-inputwrapper:has(textarea.pkt-input--fullwidth){width:100%}textarea.pkt-input:not(.pkt-input--fullwidth):not([cols]){width:100%}textarea.pkt-input--small,textarea.pkt-input--xsmall{padding:.5rem 1rem}textarea.pkt-input--small{letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}textarea.pkt-input--xsmall{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}

package/dist/css/components/textinput.css

@@ -21,13 +21,40 @@ pkt-select {
   color: var(--pkt-color-input-text-normal);
   margin: 0;
   padding: 0.5rem 1rem;
+  min-height: 3rem;
   letter-spacing: -0.2px;
   font-weight: 300;
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
-.pkt-input:not(.pkt-input-compact), .pkt-textinput__input:not(.pkt-input-compact) {
-  min-height: 3rem;
+.pkt-input--small:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
+  min-height: 2.625rem;
+  padding: 0.375rem 1rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-input--small:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)):not(select[multiple]) {
+  height: 2.625rem;
+}
+.pkt-input--xsmall:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)) {
+  min-height: 2.25rem;
+  padding: 0.25rem 0.75rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-input--xsmall:not(:is(textarea, .pkt-timepicker__input, .pkt-datepicker__input)):not(select[multiple]) {
+  height: 2.25rem;
+}
+.pkt-input input.pkt-input, .pkt-textinput__input input.pkt-input, .pkt-input input.pkt-textinput__input, .pkt-textinput__input input.pkt-textinput__input,
+.pkt-input select.pkt-input,
+.pkt-textinput__input select.pkt-input,
+.pkt-input select.pkt-textinput__input,
+.pkt-textinput__input select.pkt-textinput__input {
+  display: block;
 }
 .pkt-input-compact.pkt-input, .pkt-input-compact.pkt-textinput__input {
   border: 0;
@@ -42,7 +69,7 @@ pkt-select {
   background-position: right 0 top 50%;
   padding-right: 2rem;
 }
-.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))):not(:is(:has(.pkt-timepicker__input))) {
+.pkt-input:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-textinput__input:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))):not(:is(:has(.pkt-timepicker__input))) {
   width: min(31rem, 100%);
 }
 .pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))) {
@@ -54,8 +81,8 @@ pkt-select {
 [fullwidth] .pkt-input__counter {
   width: 100%;
 }
-.pkt-input:is(textarea), .pkt-textinput__input:is(textarea) {
-  min-height: 8rem;
+.pkt-input:is(textarea:not([rows])), .pkt-textinput__input:is(textarea:not([rows])) {
+  min-height: 9.25rem;
 }
 .pkt-input:is(select), .pkt-textinput__input:is(select) {
   appearance: none;
@@ -64,12 +91,22 @@ pkt-select {
   padding-right: 3rem;
 }
 .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
   background-size: 1.5rem auto, 100%;
 }
+.pkt-input:is(select):not([multiple]).pkt-input--small, .pkt-textinput__input:is(select):not([multiple]).pkt-input--small {
+  background-size: 1.25rem auto, 100%;
+  background-position: right 0.5rem top 50%;
+  padding: 0.375rem 2.5rem 0.375rem 1rem;
+}
+.pkt-input:is(select):not([multiple]).pkt-input--xsmall, .pkt-textinput__input:is(select):not([multiple]).pkt-input--xsmall {
+  background-size: 1.125rem auto, 100%;
+  background-position: right 0.5rem top 50%;
+  padding: 0.25rem 2.25rem 0.25rem 0.75rem;
+}
 .pkt-input:is(select) option, .pkt-textinput__input:is(select) option {
   background-color: var(--pkt-color-input-background-normal);
   color: var(--pkt-color-input-text-normal);
@@ -160,6 +197,89 @@ pkt-select {
 .pkt-input-separator {
   padding: 0.5rem 0;
 }
+.pkt-input__container--small {
+  align-items: stretch;
+}
+.pkt-input__container--small .pkt-input-prefix,
+.pkt-input__container--small .pkt-input-suffix,
+.pkt-input__container--small .pkt-input-icon {
+  height: auto;
+  min-height: 2.625rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-input__container--small .pkt-input-prefix {
+  padding: 0.375rem 0 0.375rem 1rem;
+}
+.pkt-input__container--small .pkt-input-suffix {
+  padding: 0.375rem 1rem 0.375rem 0;
+}
+.pkt-input__container--small input.pkt-input, .pkt-input__container--small input.pkt-textinput__input,
+.pkt-input__container--small select.pkt-input,
+.pkt-input__container--small select.pkt-textinput__input {
+  height: auto;
+  min-height: 2.625rem;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0.375rem 1rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-input__container--small .pkt-input-icon svg,
+.pkt-input__container--small .pkt-input-suffix svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.pkt-input__container--small .pkt-input-suffix::before {
+  height: 1.25rem;
+}
+.pkt-input__container--xsmall {
+  align-items: stretch;
+}
+.pkt-input__container--xsmall .pkt-input-prefix,
+.pkt-input__container--xsmall .pkt-input-suffix,
+.pkt-input__container--xsmall .pkt-input-icon {
+  height: auto;
+  min-height: 2.25rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-input__container--xsmall .pkt-input-prefix {
+  padding: 0.25rem 0 0.25rem 0.75rem;
+}
+.pkt-input__container--xsmall .pkt-input-suffix {
+  padding: 0.25rem 0.75rem 0.25rem 0;
+}
+.pkt-input__container--xsmall input.pkt-input, .pkt-input__container--xsmall input.pkt-textinput__input,
+.pkt-input__container--xsmall select.pkt-input,
+.pkt-input__container--xsmall select.pkt-textinput__input {
+  height: auto;
+  min-height: 2.25rem;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0.25rem 0.75rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-input__container--xsmall .pkt-input-icon {
+  padding: 0.25rem 0.5rem;
+}
+.pkt-input__container--xsmall .pkt-input-icon svg,
+.pkt-input__container--xsmall .pkt-input-suffix svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+.pkt-input__container--xsmall .pkt-input-suffix::before {
+  height: 1.125rem;
+}
 .pkt-input--counter-error, .pkt-input--counter-error:focus {
   border-color: var(--pkt-color-input-border-error);
   background-color: var(--pkt-color-surface-default-faded-red);

package/dist/css/components/textinput.min.css

@@ -1 +1 @@
-pkt-textinput,pkt-textarea,pkt-select{display:block}.pkt-input,.pkt-textinput__input{display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input:not(.pkt-input-compact),.pkt-textinput__input:not(.pkt-input-compact){min-height:3rem}.pkt-input-compact.pkt-input,.pkt-input-compact.pkt-textinput__input{border:0;border-bottom:1px solid var(--pkt-color-input-border-normal);padding:0 0 .1rem 0;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-compact.pkt-input:is(select):not([multiple]),.pkt-input-compact.pkt-textinput__input:is(select):not([multiple]){background-position:right 0 top 50%;padding-right:2rem}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))):not(:is(:has(.pkt-timepicker__input))){width:min(31rem,100%)}.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))){width:fit-content}.pkt-input--fullwidth,*:has(.pkt-input--fullwidth)~.pkt-input__counter,.pkt-input--fullwidth+.pkt-input__counter{width:100%}[fullwidth] .pkt-input__counter{width:100%}.pkt-input:is(textarea),.pkt-textinput__input:is(textarea){min-height:8rem}.pkt-input:is(select),.pkt-textinput__input:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]),.pkt-textinput__input:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/16.26/icons/chevron-thin-down.svg);background-image:var(--svg);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:1.5rem auto,100%}.pkt-input:is(select) option,.pkt-textinput__input:is(select) option{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder,.pkt-textinput__input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-textinput__input:hover,.pkt-input.pkt-input--hover,.pkt-input--hover.pkt-textinput__input{border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus,.pkt-textinput__input:focus{outline:none;border-color:var(--pkt-color-input-border-active)}.pkt-input:focus-visible,.pkt-textinput__input:focus-visible,.pkt-input.pkt-input__textinput--focus,.pkt-input__textinput--focus.pkt-textinput__input{outline:2px solid var(--pkt-color-input-border-active);outline-offset:0;border-color:var(--pkt-color-input-border-active)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input:focus-visible,:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-textinput__input:focus-visible{outline:4px solid var(--pkt-color-border-states-focus);outline-offset:0}.pkt-input:disabled,.pkt-textinput__input:disabled,.pkt-input:disabled::placeholder,.pkt-textinput__input:disabled::placeholder,.pkt-input[readonly]:not(.ios-readonly-hack),[readonly].pkt-textinput__input:not(.ios-readonly-hack){opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);color:var(--pkt-color-input-text-disabled);cursor:inherit}.pkt-input:disabled:active,.pkt-textinput__input:disabled:active{border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--pkt-color-input-border-normal);flex-shrink:0;color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-input-background-normal)}.pkt-input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-input-icon svg{width:1.5rem;height:1.5rem}.pkt-input-icon:not(button) svg{margin-left:.5rem}.pkt-input-separator{padding:.5rem 0}.pkt-input--counter-error,.pkt-input--counter-error:focus{border-color:var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input--counter-error:focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-error)}.pkt-input__container{display:flex;align-items:center;align-self:stretch}.pkt-input__container:is(:has(input[size])),.pkt-input__container:is(:has(textarea[cols])){align-self:flex-start}.pkt-input__container :first-child:not(:only-child){border-right-width:0}.pkt-input__container :last-child:not(:only-child){border-left-width:0}.pkt-input__container :not(:first-child):not(:last-child){border-left-width:0;border-right-width:0}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input:not(:disabled),.pkt-input__container:hover .pkt-textinput__input:not(:disabled),.pkt-input__container:hover .pkt-input-prefix:not(:disabled),.pkt-input__container:hover .pkt-input-suffix:not(:disabled),.pkt-input__container:hover .pkt-input-icon:not(:disabled){border-color:var(--pkt-color-input-border-active);color:var(--pkt-color-input-text-hover);--fg-color: var(--pkt-color-input-text-hover)}.pkt-input__container:focus-within{outline:2px solid var(--pkt-color-input-border-active)}.pkt-input__container:focus-within .pkt-input,.pkt-input__container:focus-within .pkt-textinput__input,.pkt-input__container:focus-within .pkt-input-prefix,.pkt-input__container:focus-within .pkt-input-suffix,.pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within{outline:4px solid var(--pkt-color-border-states-focus)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-input:focus-visible,:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-textinput__input:focus-visible{outline:none}.pkt-input__counter{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__counter{width:min(100%,31rem);text-align:right}.pkt-input__counter--error{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-input__counter--error{color:var(--pkt-color-input-text-error)}@media screen and (max-width: 30rem){.pkt-input__range-inputs{max-width:100%}.pkt-input__range-inputs .pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:auto 3rem;gap:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-prefix,.pkt-input__range-inputs .pkt-input__container .pkt-input-suffix,.pkt-input__range-inputs .pkt-input__container .pkt-input-icon,.pkt-input__range-inputs .pkt-input__container .pkt-input,.pkt-input__range-inputs .pkt-input__container .pkt-textinput__input{border:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-separator{margin:0 auto}.pkt-input__range-inputs .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range,.pkt-input__range-inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-textinput__input{padding-left:1rem}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix)>:nth-child(2){grid-column-start:span 2}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix){grid-template-columns:min-content auto 3rem}}
+pkt-textinput,pkt-textarea,pkt-select{display:block}.pkt-input,.pkt-textinput__input{display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem;min-height:3rem;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input--small:not(:is(textarea,.pkt-timepicker__input,.pkt-datepicker__input)){min-height:2.625rem;padding:.375rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input--small:not(:is(textarea,.pkt-timepicker__input,.pkt-datepicker__input)):not(select[multiple]){height:2.625rem}.pkt-input--xsmall:not(:is(textarea,.pkt-timepicker__input,.pkt-datepicker__input)){min-height:2.25rem;padding:.25rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input--xsmall:not(:is(textarea,.pkt-timepicker__input,.pkt-datepicker__input)):not(select[multiple]){height:2.25rem}.pkt-input input.pkt-input,.pkt-textinput__input input.pkt-input,.pkt-input input.pkt-textinput__input,.pkt-textinput__input input.pkt-textinput__input,.pkt-input select.pkt-input,.pkt-textinput__input select.pkt-input,.pkt-input select.pkt-textinput__input,.pkt-textinput__input select.pkt-textinput__input{display:block}.pkt-input-compact.pkt-input,.pkt-input-compact.pkt-textinput__input{border:0;border-bottom:1px solid var(--pkt-color-input-border-normal);padding:0 0 .1rem 0;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-compact.pkt-input:is(select):not([multiple]),.pkt-input-compact.pkt-textinput__input:is(select):not([multiple]){background-position:right 0 top 50%;padding-right:2rem}.pkt-input:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-textinput__input:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))):not(:is(:has(.pkt-timepicker__input))){width:min(31rem,100%)}.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))){width:fit-content}.pkt-input--fullwidth,*:has(.pkt-input--fullwidth)~.pkt-input__counter,.pkt-input--fullwidth+.pkt-input__counter{width:100%}[fullwidth] .pkt-input__counter{width:100%}.pkt-input:is(textarea:not([rows])),.pkt-textinput__input:is(textarea:not([rows])){min-height:9.25rem}.pkt-input:is(select),.pkt-textinput__input:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]),.pkt-textinput__input:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/chevron-thin-down.svg);background-image:var(--svg);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:1.5rem auto,100%}.pkt-input:is(select):not([multiple]).pkt-input--small,.pkt-textinput__input:is(select):not([multiple]).pkt-input--small{background-size:1.25rem auto,100%;background-position:right .5rem top 50%;padding:.375rem 2.5rem .375rem 1rem}.pkt-input:is(select):not([multiple]).pkt-input--xsmall,.pkt-textinput__input:is(select):not([multiple]).pkt-input--xsmall{background-size:1.125rem auto,100%;background-position:right .5rem top 50%;padding:.25rem 2.25rem .25rem .75rem}.pkt-input:is(select) option,.pkt-textinput__input:is(select) option{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder,.pkt-textinput__input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-textinput__input:hover,.pkt-input.pkt-input--hover,.pkt-input--hover.pkt-textinput__input{border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus,.pkt-textinput__input:focus{outline:none;border-color:var(--pkt-color-input-border-active)}.pkt-input:focus-visible,.pkt-textinput__input:focus-visible,.pkt-input.pkt-input__textinput--focus,.pkt-input__textinput--focus.pkt-textinput__input{outline:2px solid var(--pkt-color-input-border-active);outline-offset:0;border-color:var(--pkt-color-input-border-active)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input:focus-visible,:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-textinput__input:focus-visible{outline:4px solid var(--pkt-color-border-states-focus);outline-offset:0}.pkt-input:disabled,.pkt-textinput__input:disabled,.pkt-input:disabled::placeholder,.pkt-textinput__input:disabled::placeholder,.pkt-input[readonly]:not(.ios-readonly-hack),[readonly].pkt-textinput__input:not(.ios-readonly-hack){opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);color:var(--pkt-color-input-text-disabled);cursor:inherit}.pkt-input:disabled:active,.pkt-textinput__input:disabled:active{border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--pkt-color-input-border-normal);flex-shrink:0;color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-input-background-normal)}.pkt-input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-input-icon svg{width:1.5rem;height:1.5rem}.pkt-input-icon:not(button) svg{margin-left:.5rem}.pkt-input-separator{padding:.5rem 0}.pkt-input__container--small{align-items:stretch}.pkt-input__container--small .pkt-input-prefix,.pkt-input__container--small .pkt-input-suffix,.pkt-input__container--small .pkt-input-icon{height:auto;min-height:2.625rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input__container--small .pkt-input-prefix{padding:.375rem 0 .375rem 1rem}.pkt-input__container--small .pkt-input-suffix{padding:.375rem 1rem .375rem 0}.pkt-input__container--small input.pkt-input,.pkt-input__container--small input.pkt-textinput__input,.pkt-input__container--small select.pkt-input,.pkt-input__container--small select.pkt-textinput__input{height:auto;min-height:2.625rem;flex:1 1 auto;min-width:0;padding:.375rem 1rem;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input__container--small .pkt-input-icon svg,.pkt-input__container--small .pkt-input-suffix svg{width:1.25rem;height:1.25rem}.pkt-input__container--small .pkt-input-suffix::before{height:1.25rem}.pkt-input__container--xsmall{align-items:stretch}.pkt-input__container--xsmall .pkt-input-prefix,.pkt-input__container--xsmall .pkt-input-suffix,.pkt-input__container--xsmall .pkt-input-icon{height:auto;min-height:2.25rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__container--xsmall .pkt-input-prefix{padding:.25rem 0 .25rem .75rem}.pkt-input__container--xsmall .pkt-input-suffix{padding:.25rem .75rem .25rem 0}.pkt-input__container--xsmall input.pkt-input,.pkt-input__container--xsmall input.pkt-textinput__input,.pkt-input__container--xsmall select.pkt-input,.pkt-input__container--xsmall select.pkt-textinput__input{height:auto;min-height:2.25rem;flex:1 1 auto;min-width:0;padding:.25rem .75rem;letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__container--xsmall .pkt-input-icon{padding:.25rem .5rem}.pkt-input__container--xsmall .pkt-input-icon svg,.pkt-input__container--xsmall .pkt-input-suffix svg{width:1.125rem;height:1.125rem}.pkt-input__container--xsmall .pkt-input-suffix::before{height:1.125rem}.pkt-input--counter-error,.pkt-input--counter-error:focus{border-color:var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input--counter-error:focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-error)}.pkt-input__container{display:flex;align-items:center;align-self:stretch}.pkt-input__container:is(:has(input[size])),.pkt-input__container:is(:has(textarea[cols])){align-self:flex-start}.pkt-input__container :first-child:not(:only-child){border-right-width:0}.pkt-input__container :last-child:not(:only-child){border-left-width:0}.pkt-input__container :not(:first-child):not(:last-child){border-left-width:0;border-right-width:0}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input:not(:disabled),.pkt-input__container:hover .pkt-textinput__input:not(:disabled),.pkt-input__container:hover .pkt-input-prefix:not(:disabled),.pkt-input__container:hover .pkt-input-suffix:not(:disabled),.pkt-input__container:hover .pkt-input-icon:not(:disabled){border-color:var(--pkt-color-input-border-active);color:var(--pkt-color-input-text-hover);--fg-color: var(--pkt-color-input-text-hover)}.pkt-input__container:focus-within{outline:2px solid var(--pkt-color-input-border-active)}.pkt-input__container:focus-within .pkt-input,.pkt-input__container:focus-within .pkt-textinput__input,.pkt-input__container:focus-within .pkt-input-prefix,.pkt-input__container:focus-within .pkt-input-suffix,.pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within{outline:4px solid var(--pkt-color-border-states-focus)}:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-input:focus-visible,:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-textinput__input:focus-visible{outline:none}.pkt-input__counter{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__counter{width:min(100%,31rem);text-align:right}.pkt-input__counter--error{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-input__counter--error{color:var(--pkt-color-input-text-error)}@media screen and (max-width: 30rem){.pkt-input__range-inputs{max-width:100%}.pkt-input__range-inputs .pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:auto 3rem;gap:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-prefix,.pkt-input__range-inputs .pkt-input__container .pkt-input-suffix,.pkt-input__range-inputs .pkt-input__container .pkt-input-icon,.pkt-input__range-inputs .pkt-input__container .pkt-input,.pkt-input__range-inputs .pkt-input__container .pkt-textinput__input{border:0}.pkt-input__range-inputs .pkt-input__container .pkt-input-separator{margin:0 auto}.pkt-input__range-inputs .pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range,.pkt-input__range-inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-textinput__input{padding-left:1rem}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix)>:nth-child(2){grid-column-start:span 2}.pkt-input__range-inputs .pkt-input__container:has(>:first-child.pkt-input-prefix){grid-template-columns:min-content auto 3rem}}

package/dist/css/components/timepicker.css

@@ -9,11 +9,28 @@ pkt-timepicker__anchor {
 }
 .pkt-timepicker .pkt-input__container,
 pkt-timepicker .pkt-input__container {
+  min-height: 3rem;
+  align-items: center;
   border: 2px solid var(--pkt-color-input-border-normal);
   background-color: var(--pkt-color-input-background-normal);
   width: fit-content;
   padding: 0 0 0 1rem;
 }
+.pkt-timepicker .pkt-input__container .pkt-timepicker__input,
+.pkt-timepicker .pkt-input__container .pkt-timepicker__separator,
+.pkt-timepicker .pkt-input__container .pkt-input-icon,
+.pkt-timepicker .pkt-input__container .pkt-timepicker__button,
+pkt-timepicker .pkt-input__container .pkt-timepicker__input,
+pkt-timepicker .pkt-input__container .pkt-timepicker__separator,
+pkt-timepicker .pkt-input__container .pkt-input-icon,
+pkt-timepicker .pkt-input__container .pkt-timepicker__button {
+  border: 0;
+  height: auto;
+  min-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  flex: 0 0 auto;
+}
 .pkt-timepicker .pkt-input__container .pkt-input,
 .pkt-timepicker .pkt-input__container .pkt-input-icon,
 .pkt-timepicker .pkt-input__container .pkt-input-separator,
@@ -21,27 +38,23 @@ pkt-timepicker .pkt-input__container .pkt-input,
 pkt-timepicker .pkt-input__container .pkt-input-icon,
 pkt-timepicker .pkt-input__container .pkt-input-separator {
   border: 0;
-  min-height: auto;
 }
-.pkt-timepicker .pkt-input__container:hover,
-pkt-timepicker .pkt-input__container:hover {
-  border-color: var(--pkt-color-input-border-active);
+.pkt-timepicker .pkt-input__container .pkt-timepicker__input,
+.pkt-timepicker .pkt-input__container .pkt-timepicker__separator,
+pkt-timepicker .pkt-input__container .pkt-timepicker__input,
+pkt-timepicker .pkt-input__container .pkt-timepicker__separator {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
 }
-.pkt-timepicker .pkt-input__container:focus-within,
-pkt-timepicker .pkt-input__container:focus-within {
-  border-color: var(--pkt-color-input-border-active);
-  outline: 2px solid var(--pkt-color-input-border-active);
+.pkt-timepicker .pkt-input__container .pkt-timepicker__input,
+pkt-timepicker .pkt-input__container .pkt-timepicker__input {
+  padding-inline: 0;
 }
-.pkt-timepicker .pkt-input__container:has(input:disabled),
-pkt-timepicker .pkt-input__container:has(input:disabled) {
-  border-color: var(--pkt-color-input-border-disabled);
-  background-color: var(--pkt-color-surface-default-gray);
-}
-.pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__icon,
-.pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__button,
-pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__icon,
-pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__button {
-  --fg-color: var(--pkt-color-input-text-disabled);
+.pkt-timepicker .pkt-input__container .pkt-timepicker__separator,
+pkt-timepicker .pkt-input__container .pkt-timepicker__separator {
+  padding: 0;
 }
 .pkt-timepicker .pkt-input__container button.pkt-timepicker__button,
 pkt-timepicker .pkt-input__container button.pkt-timepicker__button {
@@ -50,8 +63,10 @@ pkt-timepicker .pkt-input__container button.pkt-timepicker__button {
 }
 .pkt-timepicker .pkt-input__container button.pkt-timepicker__button pkt-icon,
 .pkt-timepicker .pkt-input__container button.pkt-timepicker__button .pkt-icon,
+.pkt-timepicker .pkt-input__container button.pkt-timepicker__button svg,
 pkt-timepicker .pkt-input__container button.pkt-timepicker__button pkt-icon,
-pkt-timepicker .pkt-input__container button.pkt-timepicker__button .pkt-icon {
+pkt-timepicker .pkt-input__container button.pkt-timepicker__button .pkt-icon,
+pkt-timepicker .pkt-input__container button.pkt-timepicker__button svg {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -72,6 +87,105 @@ pkt-timepicker .pkt-input__container button.pkt-timepicker__button.pkt-timepicke
 pkt-timepicker .pkt-input__container button.pkt-timepicker__button.pkt-timepicker__button--next {
   margin-left: 0.25rem;
 }
+.pkt-timepicker .pkt-input__container .pkt-timepicker__icon,
+pkt-timepicker .pkt-input__container .pkt-timepicker__icon {
+  align-self: center;
+  pointer-events: none;
+  padding: 0 0.75rem 0 0;
+  height: 1.5rem;
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+}
+.pkt-timepicker .pkt-input__container .pkt-timepicker__icon > svg,
+.pkt-timepicker .pkt-input__container .pkt-timepicker__icon svg,
+pkt-timepicker .pkt-input__container .pkt-timepicker__icon > svg,
+pkt-timepicker .pkt-input__container .pkt-timepicker__icon svg {
+  width: 100%;
+  height: 100%;
+}
+.pkt-timepicker .pkt-input__container:hover,
+pkt-timepicker .pkt-input__container:hover {
+  border-color: var(--pkt-color-input-border-active);
+}
+.pkt-timepicker .pkt-input__container:focus-within,
+pkt-timepicker .pkt-input__container:focus-within {
+  border-color: var(--pkt-color-input-border-active);
+  outline: 2px solid var(--pkt-color-input-border-active);
+}
+.pkt-timepicker .pkt-input__container:has(input:disabled),
+pkt-timepicker .pkt-input__container:has(input:disabled) {
+  border-color: var(--pkt-color-input-border-disabled);
+  background-color: var(--pkt-color-surface-default-gray);
+}
+.pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__icon,
+.pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__button,
+pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__icon,
+pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__button {
+  --fg-color: var(--pkt-color-input-text-disabled);
+}
+.pkt-timepicker--small .pkt-input__container,
+pkt-timepicker--small .pkt-input__container {
+  min-height: 2.625rem;
+}
+.pkt-timepicker--small .pkt-input__container .pkt-timepicker__input,
+.pkt-timepicker--small .pkt-input__container .pkt-timepicker__separator,
+pkt-timepicker--small .pkt-input__container .pkt-timepicker__input,
+pkt-timepicker--small .pkt-input__container .pkt-timepicker__separator {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button,
+pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button {
+  padding: 0 0.5rem;
+}
+.pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button pkt-icon,
+.pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button .pkt-icon,
+.pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button svg,
+pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button pkt-icon,
+pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button .pkt-icon,
+pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.pkt-timepicker--small .pkt-input__container .pkt-timepicker__icon,
+pkt-timepicker--small .pkt-input__container .pkt-timepicker__icon {
+  padding: 0 0.5rem 0 0;
+  height: 1.25rem;
+}
+.pkt-timepicker--xsmall .pkt-input__container,
+pkt-timepicker--xsmall .pkt-input__container {
+  min-height: 2.25rem;
+}
+.pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__input,
+.pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__separator,
+pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__input,
+pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__separator {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button,
+pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button {
+  padding: 0 0.5rem;
+}
+.pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button pkt-icon,
+.pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button .pkt-icon,
+.pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button svg,
+pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button pkt-icon,
+pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button .pkt-icon,
+pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+.pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__icon,
+pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__icon {
+  padding: 0 0.5rem 0 0;
+  height: 1.125rem;
+}
 .pkt-timepicker--stepper .pkt-input__container,
 pkt-timepicker--stepper .pkt-input__container {
   padding-left: 0;
@@ -137,7 +251,6 @@ pkt-timepicker .pkt-input__container.pkt-timepicker--disabled .pkt-timepicker__i
 pkt-timepicker__input {
   width: 1.5rem;
   text-align: center;
-  padding: 0.5rem 0;
 }
 .pkt-timepicker__input::-webkit-inner-spin-button, .pkt-timepicker__input::-webkit-outer-spin-button,
 pkt-timepicker__input::-webkit-inner-spin-button,
@@ -152,26 +265,8 @@ pkt-timepicker__input {
 }
 .pkt-timepicker__separator,
 pkt-timepicker__separator {
-  letter-spacing: -0.2px;
-  font-weight: 400;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  padding: 0.25rem 0 0.5rem;
   user-select: none;
 }
-.pkt-timepicker__icon,
-pkt-timepicker__icon {
-  height: auto;
-  padding: 0 0.75rem 0 0;
-  pointer-events: none;
-}
-.pkt-timepicker__icon pkt-icon,
-.pkt-timepicker__icon .pkt-icon,
-pkt-timepicker__icon pkt-icon,
-pkt-timepicker__icon .pkt-icon {
-  width: 1.5rem;
-  height: 1.5rem;
-}
 .pkt-timepicker-popup,
 pkt-timepicker-popup {
   position: absolute;

package/dist/css/components/timepicker.min.css

@@ -1 +1 @@
-pkt-timepicker{display:block}.pkt-timepicker__anchor,pkt-timepicker__anchor{position:relative}.pkt-timepicker .pkt-input__container,pkt-timepicker .pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);background-color:var(--pkt-color-input-background-normal);width:fit-content;padding:0 0 0 1rem}.pkt-timepicker .pkt-input__container .pkt-input,.pkt-timepicker .pkt-input__container .pkt-input-icon,.pkt-timepicker .pkt-input__container .pkt-input-separator,pkt-timepicker .pkt-input__container .pkt-input,pkt-timepicker .pkt-input__container .pkt-input-icon,pkt-timepicker .pkt-input__container .pkt-input-separator{border:0;min-height:auto}.pkt-timepicker .pkt-input__container:hover,pkt-timepicker .pkt-input__container:hover{border-color:var(--pkt-color-input-border-active)}.pkt-timepicker .pkt-input__container:focus-within,pkt-timepicker .pkt-input__container:focus-within{border-color:var(--pkt-color-input-border-active);outline:2px solid var(--pkt-color-input-border-active)}.pkt-timepicker .pkt-input__container:has(input:disabled),pkt-timepicker .pkt-input__container:has(input:disabled){border-color:var(--pkt-color-input-border-disabled);background-color:var(--pkt-color-surface-default-gray)}.pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__icon,.pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__button,pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__icon,pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__button{--fg-color: var(--pkt-color-input-text-disabled)}.pkt-timepicker .pkt-input__container button.pkt-timepicker__button,pkt-timepicker .pkt-input__container button.pkt-timepicker__button{height:auto;padding:0 .75rem}.pkt-timepicker .pkt-input__container button.pkt-timepicker__button pkt-icon,.pkt-timepicker .pkt-input__container button.pkt-timepicker__button .pkt-icon,pkt-timepicker .pkt-input__container button.pkt-timepicker__button pkt-icon,pkt-timepicker .pkt-input__container button.pkt-timepicker__button .pkt-icon{width:1.5rem;height:1.5rem}.pkt-timepicker .pkt-input__container button.pkt-timepicker__button:hover,pkt-timepicker .pkt-input__container button.pkt-timepicker__button:hover{background-color:inherit !important;border-color:inherit !important}.pkt-timepicker .pkt-input__container button.pkt-timepicker__button:hover svg,pkt-timepicker .pkt-input__container button.pkt-timepicker__button:hover svg{--fg-color: inherit}.pkt-timepicker .pkt-input__container button.pkt-timepicker__button.pkt-timepicker__button--prev,pkt-timepicker .pkt-input__container button.pkt-timepicker__button.pkt-timepicker__button--prev{margin-right:.25rem}.pkt-timepicker .pkt-input__container button.pkt-timepicker__button.pkt-timepicker__button--next,pkt-timepicker .pkt-input__container button.pkt-timepicker__button.pkt-timepicker__button--next{margin-left:.25rem}.pkt-timepicker--stepper .pkt-input__container,pkt-timepicker--stepper .pkt-input__container{padding-left:0}.pkt-timepicker--fullwidth .pkt-timepicker__anchor,.pkt-timepicker--fullwidth .pkt-input__container,pkt-timepicker--fullwidth .pkt-timepicker__anchor,pkt-timepicker--fullwidth .pkt-input__container{width:100%}.pkt-timepicker--fullwidth:not(.pkt-timepicker--stepper) .pkt-input__container .pkt-input-icon,pkt-timepicker--fullwidth:not(.pkt-timepicker--stepper) .pkt-input__container .pkt-input-icon{margin-left:auto}.pkt-timepicker--fullwidth.pkt-timepicker--stepper .pkt-input__container .pkt-timepicker__button--prev+.pkt-timepicker__input,pkt-timepicker--fullwidth.pkt-timepicker--stepper .pkt-input__container .pkt-timepicker__button--prev+.pkt-timepicker__input{margin-left:auto}.pkt-timepicker--fullwidth.pkt-timepicker--stepper .pkt-input__container .pkt-timepicker__separator+.pkt-timepicker__input,pkt-timepicker--fullwidth.pkt-timepicker--stepper .pkt-input__container .pkt-timepicker__separator+.pkt-timepicker__input{margin-right:auto}.pkt-timepicker .pkt-inputwrapper--error .pkt-input__container,.pkt-timepicker .pkt-input__container.pkt-timepicker--error,pkt-timepicker .pkt-inputwrapper--error .pkt-input__container,pkt-timepicker .pkt-input__container.pkt-timepicker--error{border-color:var(--pkt-color-brand-red-1000)}.pkt-timepicker .pkt-inputwrapper--error .pkt-input__container:hover,.pkt-timepicker .pkt-inputwrapper--error .pkt-input__container:focus-within,.pkt-timepicker .pkt-input__container.pkt-timepicker--error:hover,.pkt-timepicker .pkt-input__container.pkt-timepicker--error:focus-within,pkt-timepicker .pkt-inputwrapper--error .pkt-input__container:hover,pkt-timepicker .pkt-inputwrapper--error .pkt-input__container:focus-within,pkt-timepicker .pkt-input__container.pkt-timepicker--error:hover,pkt-timepicker .pkt-input__container.pkt-timepicker--error:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-timepicker .pkt-inputwrapper--disabled .pkt-input__container,.pkt-timepicker .pkt-input__container.pkt-timepicker--disabled,pkt-timepicker .pkt-inputwrapper--disabled .pkt-input__container,pkt-timepicker .pkt-input__container.pkt-timepicker--disabled{border-color:var(--pkt-color-border-states-disabled);background-color:var(--pkt-color-surface-default-gray)}.pkt-timepicker .pkt-inputwrapper--disabled .pkt-input__container:hover,.pkt-timepicker .pkt-inputwrapper--disabled .pkt-input__container:focus-within,.pkt-timepicker .pkt-input__container.pkt-timepicker--disabled:hover,.pkt-timepicker .pkt-input__container.pkt-timepicker--disabled:focus-within,pkt-timepicker .pkt-inputwrapper--disabled .pkt-input__container:hover,pkt-timepicker .pkt-inputwrapper--disabled .pkt-input__container:focus-within,pkt-timepicker .pkt-input__container.pkt-timepicker--disabled:hover,pkt-timepicker .pkt-input__container.pkt-timepicker--disabled:focus-within{border-color:var(--pkt-color-border-states-disabled);box-shadow:none;outline:none}.pkt-timepicker .pkt-inputwrapper--disabled .pkt-input__container .pkt-timepicker__icon,.pkt-timepicker .pkt-input__container.pkt-timepicker--disabled .pkt-timepicker__icon,pkt-timepicker .pkt-inputwrapper--disabled .pkt-input__container .pkt-timepicker__icon,pkt-timepicker .pkt-input__container.pkt-timepicker--disabled .pkt-timepicker__icon{--fg-color: var(--pkt-color-input-text-disabled)}.pkt-timepicker__input,pkt-timepicker__input{width:1.5rem;text-align:center;padding:.5rem 0}.pkt-timepicker__input::-webkit-inner-spin-button,.pkt-timepicker__input::-webkit-outer-spin-button,pkt-timepicker__input::-webkit-inner-spin-button,pkt-timepicker__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pkt-timepicker__input,pkt-timepicker__input{-moz-appearance:textfield;appearance:textfield}.pkt-timepicker__separator,pkt-timepicker__separator{letter-spacing:-0.2px;font-weight:400;font-size:1.125rem;line-height:1.75rem;padding:.25rem 0 .5rem;user-select:none}.pkt-timepicker__icon,pkt-timepicker__icon{height:auto;padding:0 .75rem 0 0;pointer-events:none}.pkt-timepicker__icon pkt-icon,.pkt-timepicker__icon .pkt-icon,pkt-timepicker__icon pkt-icon,pkt-timepicker__icon .pkt-icon{width:1.5rem;height:1.5rem}.pkt-timepicker-popup,pkt-timepicker-popup{position:absolute;top:100%;left:0;z-index:2;margin-top:.5rem;display:flex;padding:0;background:var(--pkt-color-background-default);border:2px solid var(--pkt-color-border-gray);justify-content:center}.pkt-timepicker-popup[hidden],pkt-timepicker-popup[hidden]{display:none}.pkt-timepicker-popup__col,pkt-timepicker-popup__col{display:flex;flex-direction:column;align-items:center;overflow-y:auto;max-height:23rem;padding:.5rem .6rem}.pkt-timepicker-popup__option,pkt-timepicker-popup__option{flex-shrink:0;width:2.5rem;height:2.5rem;margin:0;padding:0;border:0;font:inherit;aspect-ratio:1/1;border-radius:50%}.pkt-timepicker-popup__option,.pkt-timepicker-popup__option:hover,pkt-timepicker-popup__option,pkt-timepicker-popup__option:hover{background-color:rgba(0,0,0,0);color:inherit;border-color:rgba(0,0,0,0)}.pkt-timepicker-popup__option:hover,pkt-timepicker-popup__option:hover{background-color:var(--pkt-color-surface-default-light-blue);color:var(--pkt-color-brand-dark-blue-1000)}.pkt-timepicker-popup__option:focus-visible,pkt-timepicker-popup__option:focus-visible{outline:2px solid var(--pkt-color-input-border-active);outline-offset:-2px}.pkt-timepicker-popup__option--selected,.pkt-timepicker-popup__option--selected:hover,.pkt-timepicker-popup__option--selected:focus,pkt-timepicker-popup__option--selected,pkt-timepicker-popup__option--selected:hover,pkt-timepicker-popup__option--selected:focus{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-brand-dark-blue-1000)}
+pkt-timepicker{display:block}.pkt-timepicker__anchor,pkt-timepicker__anchor{position:relative}.pkt-timepicker .pkt-input__container,pkt-timepicker .pkt-input__container{min-height:3rem;align-items:center;border:2px solid var(--pkt-color-input-border-normal);background-color:var(--pkt-color-input-background-normal);width:fit-content;padding:0 0 0 1rem}.pkt-timepicker .pkt-input__container .pkt-timepicker__input,.pkt-timepicker .pkt-input__container .pkt-timepicker__separator,.pkt-timepicker .pkt-input__container .pkt-input-icon,.pkt-timepicker .pkt-input__container .pkt-timepicker__button,pkt-timepicker .pkt-input__container .pkt-timepicker__input,pkt-timepicker .pkt-input__container .pkt-timepicker__separator,pkt-timepicker .pkt-input__container .pkt-input-icon,pkt-timepicker .pkt-input__container .pkt-timepicker__button{border:0;height:auto;min-height:0;padding-top:0;padding-bottom:0;flex:0 0 auto}.pkt-timepicker .pkt-input__container .pkt-input,.pkt-timepicker .pkt-input__container .pkt-input-icon,.pkt-timepicker .pkt-input__container .pkt-input-separator,pkt-timepicker .pkt-input__container .pkt-input,pkt-timepicker .pkt-input__container .pkt-input-icon,pkt-timepicker .pkt-input__container .pkt-input-separator{border:0}.pkt-timepicker .pkt-input__container .pkt-timepicker__input,.pkt-timepicker .pkt-input__container .pkt-timepicker__separator,pkt-timepicker .pkt-input__container .pkt-timepicker__input,pkt-timepicker .pkt-input__container .pkt-timepicker__separator{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-timepicker .pkt-input__container .pkt-timepicker__input,pkt-timepicker .pkt-input__container .pkt-timepicker__input{padding-inline:0}.pkt-timepicker .pkt-input__container .pkt-timepicker__separator,pkt-timepicker .pkt-input__container .pkt-timepicker__separator{padding:0}.pkt-timepicker .pkt-input__container button.pkt-timepicker__button,pkt-timepicker .pkt-input__container button.pkt-timepicker__button{height:auto;padding:0 .75rem}.pkt-timepicker .pkt-input__container button.pkt-timepicker__button pkt-icon,.pkt-timepicker .pkt-input__container button.pkt-timepicker__button .pkt-icon,.pkt-timepicker .pkt-input__container button.pkt-timepicker__button svg,pkt-timepicker .pkt-input__container button.pkt-timepicker__button pkt-icon,pkt-timepicker .pkt-input__container button.pkt-timepicker__button .pkt-icon,pkt-timepicker .pkt-input__container button.pkt-timepicker__button svg{width:1.5rem;height:1.5rem}.pkt-timepicker .pkt-input__container button.pkt-timepicker__button:hover,pkt-timepicker .pkt-input__container button.pkt-timepicker__button:hover{background-color:inherit !important;border-color:inherit !important}.pkt-timepicker .pkt-input__container button.pkt-timepicker__button:hover svg,pkt-timepicker .pkt-input__container button.pkt-timepicker__button:hover svg{--fg-color: inherit}.pkt-timepicker .pkt-input__container button.pkt-timepicker__button.pkt-timepicker__button--prev,pkt-timepicker .pkt-input__container button.pkt-timepicker__button.pkt-timepicker__button--prev{margin-right:.25rem}.pkt-timepicker .pkt-input__container button.pkt-timepicker__button.pkt-timepicker__button--next,pkt-timepicker .pkt-input__container button.pkt-timepicker__button.pkt-timepicker__button--next{margin-left:.25rem}.pkt-timepicker .pkt-input__container .pkt-timepicker__icon,pkt-timepicker .pkt-input__container .pkt-timepicker__icon{align-self:center;pointer-events:none;padding:0 .75rem 0 0;height:1.5rem;width:-webkit-min-content;width:-moz-min-content;width:min-content}.pkt-timepicker .pkt-input__container .pkt-timepicker__icon>svg,.pkt-timepicker .pkt-input__container .pkt-timepicker__icon svg,pkt-timepicker .pkt-input__container .pkt-timepicker__icon>svg,pkt-timepicker .pkt-input__container .pkt-timepicker__icon svg{width:100%;height:100%}.pkt-timepicker .pkt-input__container:hover,pkt-timepicker .pkt-input__container:hover{border-color:var(--pkt-color-input-border-active)}.pkt-timepicker .pkt-input__container:focus-within,pkt-timepicker .pkt-input__container:focus-within{border-color:var(--pkt-color-input-border-active);outline:2px solid var(--pkt-color-input-border-active)}.pkt-timepicker .pkt-input__container:has(input:disabled),pkt-timepicker .pkt-input__container:has(input:disabled){border-color:var(--pkt-color-input-border-disabled);background-color:var(--pkt-color-surface-default-gray)}.pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__icon,.pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__button,pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__icon,pkt-timepicker .pkt-input__container:has(input:disabled) .pkt-timepicker__button{--fg-color: var(--pkt-color-input-text-disabled)}.pkt-timepicker--small .pkt-input__container,pkt-timepicker--small .pkt-input__container{min-height:2.625rem}.pkt-timepicker--small .pkt-input__container .pkt-timepicker__input,.pkt-timepicker--small .pkt-input__container .pkt-timepicker__separator,pkt-timepicker--small .pkt-input__container .pkt-timepicker__input,pkt-timepicker--small .pkt-input__container .pkt-timepicker__separator{letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button,pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button{padding:0 .5rem}.pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button pkt-icon,.pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button .pkt-icon,.pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button svg,pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button pkt-icon,pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button .pkt-icon,pkt-timepicker--small .pkt-input__container button.pkt-timepicker__button svg{width:1.25rem;height:1.25rem}.pkt-timepicker--small .pkt-input__container .pkt-timepicker__icon,pkt-timepicker--small .pkt-input__container .pkt-timepicker__icon{padding:0 .5rem 0 0;height:1.25rem}.pkt-timepicker--xsmall .pkt-input__container,pkt-timepicker--xsmall .pkt-input__container{min-height:2.25rem}.pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__input,.pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__separator,pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__input,pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__separator{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button,pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button{padding:0 .5rem}.pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button pkt-icon,.pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button .pkt-icon,.pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button svg,pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button pkt-icon,pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button .pkt-icon,pkt-timepicker--xsmall .pkt-input__container button.pkt-timepicker__button svg{width:1.125rem;height:1.125rem}.pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__icon,pkt-timepicker--xsmall .pkt-input__container .pkt-timepicker__icon{padding:0 .5rem 0 0;height:1.125rem}.pkt-timepicker--stepper .pkt-input__container,pkt-timepicker--stepper .pkt-input__container{padding-left:0}.pkt-timepicker--fullwidth .pkt-timepicker__anchor,.pkt-timepicker--fullwidth .pkt-input__container,pkt-timepicker--fullwidth .pkt-timepicker__anchor,pkt-timepicker--fullwidth .pkt-input__container{width:100%}.pkt-timepicker--fullwidth:not(.pkt-timepicker--stepper) .pkt-input__container .pkt-input-icon,pkt-timepicker--fullwidth:not(.pkt-timepicker--stepper) .pkt-input__container .pkt-input-icon{margin-left:auto}.pkt-timepicker--fullwidth.pkt-timepicker--stepper .pkt-input__container .pkt-timepicker__button--prev+.pkt-timepicker__input,pkt-timepicker--fullwidth.pkt-timepicker--stepper .pkt-input__container .pkt-timepicker__button--prev+.pkt-timepicker__input{margin-left:auto}.pkt-timepicker--fullwidth.pkt-timepicker--stepper .pkt-input__container .pkt-timepicker__separator+.pkt-timepicker__input,pkt-timepicker--fullwidth.pkt-timepicker--stepper .pkt-input__container .pkt-timepicker__separator+.pkt-timepicker__input{margin-right:auto}.pkt-timepicker .pkt-inputwrapper--error .pkt-input__container,.pkt-timepicker .pkt-input__container.pkt-timepicker--error,pkt-timepicker .pkt-inputwrapper--error .pkt-input__container,pkt-timepicker .pkt-input__container.pkt-timepicker--error{border-color:var(--pkt-color-brand-red-1000)}.pkt-timepicker .pkt-inputwrapper--error .pkt-input__container:hover,.pkt-timepicker .pkt-inputwrapper--error .pkt-input__container:focus-within,.pkt-timepicker .pkt-input__container.pkt-timepicker--error:hover,.pkt-timepicker .pkt-input__container.pkt-timepicker--error:focus-within,pkt-timepicker .pkt-inputwrapper--error .pkt-input__container:hover,pkt-timepicker .pkt-inputwrapper--error .pkt-input__container:focus-within,pkt-timepicker .pkt-input__container.pkt-timepicker--error:hover,pkt-timepicker .pkt-input__container.pkt-timepicker--error:focus-within{border-color:var(--pkt-color-brand-red-1000)}.pkt-timepicker .pkt-inputwrapper--disabled .pkt-input__container,.pkt-timepicker .pkt-input__container.pkt-timepicker--disabled,pkt-timepicker .pkt-inputwrapper--disabled .pkt-input__container,pkt-timepicker .pkt-input__container.pkt-timepicker--disabled{border-color:var(--pkt-color-border-states-disabled);background-color:var(--pkt-color-surface-default-gray)}.pkt-timepicker .pkt-inputwrapper--disabled .pkt-input__container:hover,.pkt-timepicker .pkt-inputwrapper--disabled .pkt-input__container:focus-within,.pkt-timepicker .pkt-input__container.pkt-timepicker--disabled:hover,.pkt-timepicker .pkt-input__container.pkt-timepicker--disabled:focus-within,pkt-timepicker .pkt-inputwrapper--disabled .pkt-input__container:hover,pkt-timepicker .pkt-inputwrapper--disabled .pkt-input__container:focus-within,pkt-timepicker .pkt-input__container.pkt-timepicker--disabled:hover,pkt-timepicker .pkt-input__container.pkt-timepicker--disabled:focus-within{border-color:var(--pkt-color-border-states-disabled);box-shadow:none;outline:none}.pkt-timepicker .pkt-inputwrapper--disabled .pkt-input__container .pkt-timepicker__icon,.pkt-timepicker .pkt-input__container.pkt-timepicker--disabled .pkt-timepicker__icon,pkt-timepicker .pkt-inputwrapper--disabled .pkt-input__container .pkt-timepicker__icon,pkt-timepicker .pkt-input__container.pkt-timepicker--disabled .pkt-timepicker__icon{--fg-color: var(--pkt-color-input-text-disabled)}.pkt-timepicker__input,pkt-timepicker__input{width:1.5rem;text-align:center}.pkt-timepicker__input::-webkit-inner-spin-button,.pkt-timepicker__input::-webkit-outer-spin-button,pkt-timepicker__input::-webkit-inner-spin-button,pkt-timepicker__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pkt-timepicker__input,pkt-timepicker__input{-moz-appearance:textfield;appearance:textfield}.pkt-timepicker__separator,pkt-timepicker__separator{user-select:none}.pkt-timepicker-popup,pkt-timepicker-popup{position:absolute;top:100%;left:0;z-index:2;margin-top:.5rem;display:flex;padding:0;background:var(--pkt-color-background-default);border:2px solid var(--pkt-color-border-gray);justify-content:center}.pkt-timepicker-popup[hidden],pkt-timepicker-popup[hidden]{display:none}.pkt-timepicker-popup__col,pkt-timepicker-popup__col{display:flex;flex-direction:column;align-items:center;overflow-y:auto;max-height:23rem;padding:.5rem .6rem}.pkt-timepicker-popup__option,pkt-timepicker-popup__option{flex-shrink:0;width:2.5rem;height:2.5rem;margin:0;padding:0;border:0;font:inherit;aspect-ratio:1/1;border-radius:50%}.pkt-timepicker-popup__option,.pkt-timepicker-popup__option:hover,pkt-timepicker-popup__option,pkt-timepicker-popup__option:hover{background-color:rgba(0,0,0,0);color:inherit;border-color:rgba(0,0,0,0)}.pkt-timepicker-popup__option:hover,pkt-timepicker-popup__option:hover{background-color:var(--pkt-color-surface-default-light-blue);color:var(--pkt-color-brand-dark-blue-1000)}.pkt-timepicker-popup__option:focus-visible,pkt-timepicker-popup__option:focus-visible{outline:2px solid var(--pkt-color-input-border-active);outline-offset:-2px}.pkt-timepicker-popup__option--selected,.pkt-timepicker-popup__option--selected:hover,.pkt-timepicker-popup__option--selected:focus,pkt-timepicker-popup__option--selected,pkt-timepicker-popup__option--selected:hover,pkt-timepicker-popup__option--selected:focus{background-color:var(--pkt-color-surface-strong-blue);color:var(--pkt-color-brand-dark-blue-1000)}

package/dist/css/elements/button.css

@@ -1,6 +1,6 @@
 /* Button element!
  *
- * Size: small, medium, large
+ * Size: xsmall, small, medium, large
  * Skin: primary, secondary, tertiary
  * State: normal, focus, hover, active, disabled
  * Variant: label-only, icon-left, icon-right, icon-only
@@ -377,15 +377,31 @@ pkt-button[isLoading] {
 .pkt-btn--icon-only {
   padding: 0 0.625rem;
 }
-.pkt-btn--small {
-  height: 2.625rem;
-  padding: 0 0.5rem;
+.pkt-btn--xsmall {
+  height: 2.25rem;
+  padding: 0 0.75rem;
   line-height: 1.1;
   letter-spacing: -0.2px;
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.375rem;
 }
+.pkt-btn--xsmall .pkt-btn__icon, .pkt-btn--xsmall .pkt-btn__icon .pkt-icon {
+  height: 1.125rem;
+  width: 1.125rem;
+}
+.pkt-btn--xsmall.pkt-btn--icon-only {
+  padding: 0 0.4375rem;
+}
+.pkt-btn--small {
+  height: 2.625rem;
+  padding: 0 1rem;
+  line-height: 1.1;
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
 .pkt-btn--small .pkt-btn__icon, .pkt-btn--small .pkt-btn__icon .pkt-icon {
   height: 1.25rem;
   width: 1.25rem;