@oslokommune/punkt-css 17.0.6 → 17.0.8

package/dist/css/elements/select.css

@@ -1,419 +0,0 @@
-/* 
- * Select component
- *
- * Denne blir stilsatt av .pkt-input
- * Ikke bruk klassen .pkt-select 
- */
-/* Common styles for all inputs */
-pkt-textinput,
-pkt-textarea,
-pkt-select {
-  display: block;
-}
-
-.pkt-input, .pkt-select select,
-.pkt-select:is(select) {
-  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: 0.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: 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-select select input.pkt-input,
-.pkt-select:is(select) input.pkt-input,
-.pkt-input select.pkt-input,
-.pkt-input .pkt-select select,
-.pkt-select .pkt-input select,
-.pkt-select select select,
-.pkt-select:is(select) select,
-.pkt-input select.pkt-select:is(select) {
-  display: block;
-}
-.pkt-input-compact.pkt-input, .pkt-select select.pkt-input-compact,
-.pkt-input-compact.pkt-select:is(select) {
-  border: 0;
-  border-bottom: 1px solid var(--pkt-color-input-border-normal);
-  padding: 0 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-select select.pkt-input-compact:is(select):not([multiple]),
-.pkt-input-compact.pkt-select: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-select select:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),
-.pkt-select:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)):is(select), .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-select select:is(textarea:not([rows])),
-.pkt-select:is(textarea:not([rows])):is(select) {
-  min-height: 9.25rem;
-}
-.pkt-input:is(select), .pkt-select select:is(select),
-.pkt-select:is(select) {
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  padding-right: 3rem;
-}
-.pkt-input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
-.pkt-select: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 0.7rem top 50%;
-  background-size: 1.5rem auto, 100%;
-}
-.pkt-input:is(select):not([multiple]).pkt-input--small, .pkt-select select:is(select):not([multiple]).pkt-input--small,
-.pkt-select: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-select select:is(select):not([multiple]).pkt-input--xsmall,
-.pkt-select: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-select select:is(select) option,
-.pkt-select: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-select select::placeholder,
-.pkt-select:is(select)::placeholder {
-  color: var(--pkt-color-text-placeholder);
-  opacity: 1;
-}
-.pkt-input:hover, .pkt-select select:hover,
-.pkt-select:hover:is(select), .pkt-input.pkt-input--hover, .pkt-select select.pkt-input--hover,
-.pkt-input--hover.pkt-select:is(select) {
-  border-color: var(--pkt-color-input-border-hover);
-}
-.pkt-input:focus, .pkt-select select:focus,
-.pkt-select:focus:is(select) {
-  outline: none;
-  border-color: var(--pkt-color-input-border-active);
-}
-.pkt-input:focus-visible, .pkt-select select:focus-visible,
-.pkt-select:focus-visible:is(select), .pkt-input.pkt-input__textinput--focus, .pkt-select select.pkt-input__textinput--focus,
-.pkt-input__textinput--focus.pkt-select:is(select) {
-  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-select select:focus-visible, .pkt-select :is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) select:focus-visible,
-:is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-select:focus-visible:is(select) {
-  outline: 4px solid var(--pkt-color-border-states-focus);
-  outline-offset: 0;
-}
-.pkt-input:disabled, .pkt-select select:disabled,
-.pkt-select:disabled:is(select), .pkt-input:disabled::placeholder, .pkt-select select:disabled::placeholder,
-.pkt-select:disabled:is(select)::placeholder, .pkt-input[readonly]:not(.ios-readonly-hack), .pkt-select select[readonly]:not(.ios-readonly-hack),
-[readonly].pkt-select:not(.ios-readonly-hack):is(select) {
-  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-select select:disabled:active,
-.pkt-select:disabled:active:is(select) {
-  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: 0.5rem 0rem 0.5rem 1rem;
-}
-.pkt-input-prefix::after {
-  content: "";
-  width: 1px;
-  margin-left: 0.5rem;
-  height: 100%;
-  background-color: var(--pkt-color-brand-dark-blue-1000);
-}
-.pkt-input-suffix {
-  padding: 0.5rem 1rem 0.5rem 0rem;
-}
-.pkt-input-suffix svg {
-  width: 1.5rem;
-  height: 1.5rem;
-  margin-left: 0.5rem;
-}
-.pkt-input-suffix::before {
-  content: "";
-  width: 1px;
-  margin-right: 0.5rem;
-  height: 1.5rem;
-  background-color: var(--pkt-color-brand-dark-blue-1000);
-}
-.pkt-input-icon {
-  padding: 0.5rem 1rem;
-  align-self: stretch;
-}
-.pkt-input-icon svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.pkt-input-icon:not(button) svg {
-  margin-left: 0.5rem;
-}
-.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 select.pkt-input,
-.pkt-input__container--small .pkt-select select,
-.pkt-select .pkt-input__container--small select,
-.pkt-input__container--small select.pkt-select:is(select) {
-  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 select.pkt-input,
-.pkt-input__container--xsmall .pkt-select select,
-.pkt-select .pkt-input__container--xsmall select,
-.pkt-input__container--xsmall select.pkt-select:is(select) {
-  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);
-}
-.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-select select:not(:disabled), .pkt-select .pkt-input__container:hover select:not(:disabled),
-.pkt-input__container:hover .pkt-select:not(:disabled):is(select), .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-select select, .pkt-select .pkt-input__container:focus-within select,
-.pkt-input__container:focus-within .pkt-select:is(select),
-.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-select select:focus-visible, .pkt-select :is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within select:focus-visible,
-:is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-select:focus-visible:is(select) {
-  outline: none;
-}
-.pkt-input__counter {
-  letter-spacing: -0.2px;
-  font-weight: 300;
-  font-size: 0.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: 0.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-select select,
-  .pkt-select .pkt-input__range-inputs .pkt-input__container select,
-  .pkt-input__range-inputs .pkt-input__container .pkt-select:is(select) {
-    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-select select.pkt-datepicker__input.pkt-datepicker--range, .pkt-select .pkt-input__range-inputs .pkt-input__container select.pkt-datepicker__input.pkt-datepicker--range,
-  .pkt-input__range-inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-select:is(select) {
-    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/elements/select.min.css

@@ -1 +0,0 @@
-pkt-textinput,pkt-textarea,pkt-select{display:block}.pkt-input,.pkt-select select,.pkt-select:is(select){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-select select input.pkt-input,.pkt-select:is(select) input.pkt-input,.pkt-input select.pkt-input,.pkt-input .pkt-select select,.pkt-select .pkt-input select,.pkt-select select select,.pkt-select:is(select) select,.pkt-input select.pkt-select:is(select){display:block}.pkt-input-compact.pkt-input,.pkt-select select.pkt-input-compact,.pkt-input-compact.pkt-select:is(select){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-select select.pkt-input-compact:is(select):not([multiple]),.pkt-input-compact.pkt-select: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-select select:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-select:not(:is(textarea)):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)):is(select),.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-select select:is(textarea:not([rows])),.pkt-select:is(textarea:not([rows])):is(select){min-height:9.25rem}.pkt-input:is(select),.pkt-select select:is(select),.pkt-select:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]),.pkt-select select:is(select):not([multiple]),.pkt-select: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-select select:is(select):not([multiple]).pkt-input--small,.pkt-select: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-select select:is(select):not([multiple]).pkt-input--xsmall,.pkt-select: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-select select:is(select) option,.pkt-select: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-select select::placeholder,.pkt-select:is(select)::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-select select:hover,.pkt-select:hover:is(select),.pkt-input.pkt-input--hover,.pkt-select select.pkt-input--hover,.pkt-input--hover.pkt-select:is(select){border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus,.pkt-select select:focus,.pkt-select:focus:is(select){outline:none;border-color:var(--pkt-color-input-border-active)}.pkt-input:focus-visible,.pkt-select select:focus-visible,.pkt-select:focus-visible:is(select),.pkt-input.pkt-input__textinput--focus,.pkt-select select.pkt-input__textinput--focus,.pkt-input__textinput--focus.pkt-select:is(select){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-select select:focus-visible,.pkt-select :is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) select:focus-visible,:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-select:focus-visible:is(select){outline:4px solid var(--pkt-color-border-states-focus);outline-offset:0}.pkt-input:disabled,.pkt-select select:disabled,.pkt-select:disabled:is(select),.pkt-input:disabled::placeholder,.pkt-select select:disabled::placeholder,.pkt-select:disabled:is(select)::placeholder,.pkt-input[readonly]:not(.ios-readonly-hack),.pkt-select select[readonly]:not(.ios-readonly-hack),[readonly].pkt-select:not(.ios-readonly-hack):is(select){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-select select:disabled:active,.pkt-select:disabled:active:is(select){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 select.pkt-input,.pkt-input__container--small .pkt-select select,.pkt-select .pkt-input__container--small select,.pkt-input__container--small select.pkt-select:is(select){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 select.pkt-input,.pkt-input__container--xsmall .pkt-select select,.pkt-select .pkt-input__container--xsmall select,.pkt-input__container--xsmall select.pkt-select:is(select){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-select select:not(:disabled),.pkt-select .pkt-input__container:hover select:not(:disabled),.pkt-input__container:hover .pkt-select:not(:disabled):is(select),.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-select select,.pkt-select .pkt-input__container:focus-within select,.pkt-input__container:focus-within .pkt-select:is(select),.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-select select:focus-visible,.pkt-select :is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within select:focus-visible,:is(.pkt-inputwrapper,.pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-select:focus-visible:is(select){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-select select,.pkt-select .pkt-input__range-inputs .pkt-input__container select,.pkt-input__range-inputs .pkt-input__container .pkt-select:is(select){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-select select.pkt-datepicker__input.pkt-datepicker--range,.pkt-select .pkt-input__range-inputs .pkt-input__container select.pkt-datepicker__input.pkt-datepicker--range,.pkt-input__range-inputs .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-select:is(select){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/scss/components/_preview.scss

@@ -1,191 +0,0 @@
-@use 'sass:map';
-@use '../abstracts/variables';
-@use '../abstracts/functions';
-@use '../abstracts/mixins/typography';
-@use '../abstracts/mixins/breakpoints' as *;
-
-.pkt-preview {
-  position: relative;
-  .pkt-tabs {
-    --pkt-tabs-bg: var(--pkt-color-surface-default-gray);
-  }
-  &__component {
-    position: relative;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    min-height: 10rem;
-    padding: 3rem 1rem;
-    margin: 0;
-    background-color: var(--pkt-color-background-default);
-    transition: background-color 0.2s linear;
-    &--fullwidth > div {
-      width: 100%;
-    }
-    &--fullwidth > div > .pkt-fileupload,
-    &--fullwidth > div > .pkt-fileupload-wrapper {
-      width: 100%;
-    }
-    &-container {
-      position: relative;
-      border: 2px solid var(--pkt-color-border-gray);
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-      @include bp('tablet-big-up') {
-        flex-direction: row;
-        .pkt-preview__component {
-          flex: 1 1 0;
-          min-width: 0;
-        }
-        .pkt-preview__panel {
-          flex: 0 0 auto;
-          min-width: 20rem;
-          max-width: 25rem;
-          width: 100%;
-        }
-      }
-    }
-    &__inner-container {
-      display: flex;
-      justify-content: center;
-      width: 100%;
-    }
-  }
-  &__panel {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 2rem 1.5rem;
-    justify-content: space-between;
-    align-items: stretch;
-    background-color: var(--pkt-color-surface-default-gray);
-    &__options {
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-      margin-block-end: 1rem;
-    }
-  }
-  &__options {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-  &__opts {
-    padding: 1rem;
-    background-color: var(--pkt-color-surface-default-gray);
-    > .pkt-cell {
-      position: relative;
-      > .pkt-tag {
-        display: block;
-        position: absolute;
-        top: 0;
-        right: 0;
-        padding: 0 0.25rem 0;
-      }
-    }
-  }
-  .hide-code-button {
-    position: absolute;
-    top: 100%;
-    margin-block-start: -1.5rem;
-    left: 0;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    padding-block-end: 1rem;
-    z-index: 2;
-  }
-  &__code {
-    color: var(--pkt-color-text-body-default);
-    position: relative;
-    &-container {
-      position: relative;
-      padding: 2rem 2rem 0;
-      background-color: var(--pkt-color-grays-gray-800);
-      transition: max-height 0.5s ease;
-      max-height: 50rem;
-      .pkt-tabs {
-        --pkt-tabs-bg: var(--pkt-color-grays-gray-800);
-      }
-      &.hide-code {
-        overflow: hidden;
-        max-height: 11.7rem;
-        &:after {
-          content: '';
-          display: block;
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          background: linear-gradient(180deg, transparent 0%, transparent 93%, var(--pkt-color-grays-gray-800) 100%);
-        }
-      }
-    }
-    pre {
-      max-height: 30rem;
-      overflow: auto;
-      margin-block-start: 0 !important;
-      background-color: transparent !important;
-      font-size: 1rem;
-      padding: 2rem 0;
-    }
-  }
-  &__copy {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    z-index: 3;
-  }
-  &__fullscreen-btn {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    z-index: 1;
-  }
-  &__prop-group,
-  &__array-item,
-  &__object-editor {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  // Spec descriptions with <code> (same as docs content / SpecList)
-  .pkt-inputwrapper__helptext code {
-    background: var(--pkt-color-background-subtle);
-    border: 1px solid var(--pkt-color-border-gray);
-    border-radius: 3px;
-    padding: 0.11em 0.33em;
-    font-size: 0.8em;
-  }
-  &__add-object {
-    text-align: right;
-    margin-block-start: 0.5rem;
-  }
-  &__remove-object {
-    position: absolute;
-    top: -1.75rem;
-    right: -0.25rem;
-  }
-  &__specs {
-    pre {
-      margin-block-start: 0 !important;
-    }
-  }
-}
-
-.astro-code.github-light {
-  background-color: var(--pkt-color-surface-default-gray) !important;
-}
-
-.preview-content {
-  display: contents;
-}

package/dist/scss/components/_textinput.scss

@@ -1,13 +0,0 @@
-/* 
- * Textinput component 
- *
- * Denne blir stilsatt av .pkt-input
- * Ikke bruk klassen .pkt-textinput 
-*/
-@use '../elements/input';
-
-.pkt-textinput {
-  &__input {
-    @extend .pkt-input;
-  }
-}

package/dist/scss/elements/_select.scss

@@ -1,13 +0,0 @@
-/* 
- * Select component
- *
- * Denne blir stilsatt av .pkt-input
- * Ikke bruk klassen .pkt-select 
- */
-
-@use './input';
-
-.pkt-select select,
-.pkt-select:is(select) {
-  @extend .pkt-input;
-}