@oslokommune/punkt-css 12.15.0 → 12.17.1

package/dist/css/elements/select.css

@@ -0,0 +1,302 @@
+/* 
+ * Select component
+ *
+ * Denne blir stilsatt av .pkt-input
+ * Ikke bruk klassen .pkt-select 
+ */
+/* Common styles for all inputs */
+.pkt-input, .pkt-select select,
+.pkt-select:is(select),
+.pkt-input-prefix,
+.pkt-input-suffix,
+.pkt-input-icon,
+.pkt-input__container {
+  --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);
+  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);
+  --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white);
+}
+
+[data-mode=dark] .pkt-input, [data-mode=dark] .pkt-select select, .pkt-select [data-mode=dark] select,
+[data-mode=dark] .pkt-select:is(select),
+[data-mode=dark] .pkt-input-prefix,
+[data-mode=dark] .pkt-input-suffix,
+[data-mode=dark] .pkt-input-icon,
+[data-mode=dark] .pkt-input__container {
+  --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
+  --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
+  --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
+  --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
+  --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
+  --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
+  --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
+  --pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000);
+}
+
+.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;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+.pkt-input:not(.pkt-input-compact), .pkt-select select:not(.pkt-input-compact),
+.pkt-select:not(.pkt-input-compact):is(select) {
+  min-height: 3rem;
+}
+.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(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-select select:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),
+.pkt-select:not(textarea[cols]):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))) {
+  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, .pkt-input--fullwidth + .pkt-input__counter {
+  width: 100%;
+}
+.pkt-input:is(textarea), .pkt-select select:is(textarea),
+.pkt-select:is(textarea):is(select) {
+  min-height: 8rem;
+}
+.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/12.17/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) 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-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) {
+  box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
+  border-color: var(--pkt-color-input-border-active);
+}
+.pkt-input:focus, .pkt-select select:focus,
+.pkt-select:focus:is(select) {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
+  border-color: var(--pkt-color-input-border-active);
+}
+.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], .pkt-select select[readonly],
+[readonly].pkt-select:is(select) {
+  opacity: 1;
+  background-color: var(--pkt-color-surface-default-gray);
+  border-color: var(--pkt-color-input-border-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--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, .pkt-input__container:hover .pkt-select select, .pkt-select .pkt-input__container:hover select,
+.pkt-input__container:hover .pkt-select:is(select), .pkt-input__container:hover .pkt-input-prefix, .pkt-input__container:hover .pkt-input-suffix, .pkt-input__container:hover .pkt-input-icon {
+  border-color: var(--pkt-color-input-border-active);
+}
+.pkt-input__container:hover .pkt-input:disabled, .pkt-input__container:hover .pkt-select select:disabled, .pkt-select .pkt-input__container:hover select:disabled,
+.pkt-input__container:hover .pkt-select:disabled:is(select), .pkt-input__container:hover .pkt-input-prefix:disabled, .pkt-input__container:hover .pkt-input-suffix:disabled, .pkt-input__container:hover .pkt-input-icon:disabled {
+  border-color: var(--pkt-color-input-border-disabled);
+}
+.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);
+}
+.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);
+}
+.pkt-input__range-inputs {
+  min-width: 17rem;
+  container: range/inline-size;
+}
+
+@container range (width < 30rem) {
+  .pkt-input__container {
+    border: 2px solid var(--pkt-color-input-border-normal);
+    display: grid;
+    grid-template-rows: auto auto;
+    grid-template-columns: min-content auto 4rem;
+    gap: 0;
+  }
+  .pkt-input__container > :nth-child(2) {
+    grid-column-start: span 2;
+  }
+  .pkt-input__container .pkt-input-prefix,
+  .pkt-input__container .pkt-input-suffix,
+  .pkt-input__container .pkt-input-icon,
+  .pkt-input__container .pkt-input,
+  .pkt-input__container .pkt-select select,
+  .pkt-select .pkt-input__container select,
+  .pkt-input__container .pkt-select:is(select) {
+    border: 0;
+  }
+}

package/dist/css/elements/select.min.css

@@ -0,0 +1 @@
+.pkt-input,.pkt-select select,.pkt-select:is(select),.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-input,[data-mode=dark] .pkt-select select,.pkt-select [data-mode=dark] select,[data-mode=dark] .pkt-select:is(select),[data-mode=dark] .pkt-input-prefix,[data-mode=dark] .pkt-input-suffix,[data-mode=dark] .pkt-input-icon,[data-mode=dark] .pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-blue-500);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);--pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000)}.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;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input:not(.pkt-input-compact),.pkt-select select:not(.pkt-input-compact),.pkt-select:not(.pkt-input-compact):is(select){min-height:3rem}.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(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-select select:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-select:not(textarea[cols]):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))){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,.pkt-input--fullwidth+.pkt-input__counter{width:100%}.pkt-input:is(textarea),.pkt-select select:is(textarea),.pkt-select:is(textarea):is(select){min-height:8rem}.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/12.17/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-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-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){box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:focus,.pkt-select select:focus,.pkt-select:focus:is(select){outline:none;box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.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],.pkt-select select[readonly],[readonly].pkt-select:is(select){opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-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--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,.pkt-input__container:hover .pkt-select select,.pkt-select .pkt-input__container:hover select,.pkt-input__container:hover .pkt-select:is(select),.pkt-input__container:hover .pkt-input-prefix,.pkt-input__container:hover .pkt-input-suffix,.pkt-input__container:hover .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__container:hover .pkt-input:disabled,.pkt-input__container:hover .pkt-select select:disabled,.pkt-select .pkt-input__container:hover select:disabled,.pkt-input__container:hover .pkt-select:disabled:is(select),.pkt-input__container:hover .pkt-input-prefix:disabled,.pkt-input__container:hover .pkt-input-suffix:disabled,.pkt-input__container:hover .pkt-input-icon:disabled{border-color:var(--pkt-color-input-border-disabled)}.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)}.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)}.pkt-input__range-inputs{min-width:17rem;container:range/inline-size}@container range (width < 30rem){.pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:min-content auto 4rem;gap:0}.pkt-input__container>:nth-child(2){grid-column-start:span 2}.pkt-input__container .pkt-input-prefix,.pkt-input__container .pkt-input-suffix,.pkt-input__container .pkt-input-icon,.pkt-input__container .pkt-input,.pkt-input__container .pkt-select select,.pkt-select .pkt-input__container select,.pkt-input__container .pkt-select:is(select){border:0}}

package/dist/css/elements/table.css

@@ -0,0 +1,110 @@
+/*
+ * Table elements
+ */
+.pkt-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.pkt-table__header,
+.pkt-table thead {
+  text-align: left;
+  vertical-align: top;
+  font-size: 1.125rem;
+  font-weight: 500;
+}
+.pkt-table__body,
+.pkt-table tbody {
+  text-align: left;
+  vertical-align: top;
+  font-size: 1rem;
+  font-weight: 300;
+}
+.pkt-table__body .pkt-table__row:hover > .pkt-table__data-cell,
+.pkt-table tbody .pkt-table__row:hover > .pkt-table__data-cell {
+  background: rgba(42, 40, 89, 0.01);
+}
+.pkt-table__header-cell,
+.pkt-table th {
+  padding: 1rem;
+  border-bottom: none;
+}
+.pkt-table__data-cell,
+.pkt-table td {
+  padding: 1rem;
+  border-bottom: none;
+}
+
+.pkt-table__cell-wrapper {
+  text-align: left;
+  vertical-align: top;
+  display: inline-flex;
+  gap: 0.5rem;
+}
+
+/**
+ * Compact table
+ */
+.pkt-table.pkt-table--compact .pkt-table__header-cell,
+.pkt-table.pkt-table--compact th {
+  padding: 0.5rem 1rem;
+}
+
+/**
+ * Skin: basic
+ */
+.pkt-table.pkt-table--basic .pkt-table__row,
+.pkt-table.pkt-table--basic tr {
+  border-bottom: 2px solid var(--pkt-color-surface-strong-gray);
+}
+
+/**
+ * Skin: zebra blue
+ */
+.pkt-table.pkt-table--zebra-blue .pkt-table__body .pkt-table__row:nth-child(odd),
+.pkt-table.pkt-table--zebra-blue .pkt-table__body tr:nth-child(odd),
+.pkt-table.pkt-table--zebra-blue tbody .pkt-table__row:nth-child(odd),
+.pkt-table.pkt-table--zebra-blue tbody tr:nth-child(odd) {
+  background: var(--pkt-color-surface-subtle-pale-blue);
+}
+
+/**
+ * Responsive Mobile view if class is set
+ */
+@media screen and (max-width: 48rem) {
+  .pkt-table.pkt-table--responsive .pkt-table__row,
+  .pkt-table.pkt-table--responsive .pkt-table tr {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    gap: 1rem;
+    padding: 1rem 1rem;
+  }
+  .pkt-table.pkt-table--responsive .pkt-table__row .pkt-table__header-cell,
+  .pkt-table.pkt-table--responsive .pkt-table__row th,
+  .pkt-table.pkt-table--responsive .pkt-table tr .pkt-table__header-cell,
+  .pkt-table.pkt-table--responsive .pkt-table tr th {
+    display: none;
+  }
+  .pkt-table.pkt-table--responsive .pkt-table__cell-wrapper {
+    grid-column: 2/3;
+  }
+  .pkt-table.pkt-table--responsive .pkt-table__data-cell,
+  .pkt-table.pkt-table--responsive .pkt-table td {
+    padding: 0.5rem 1rem;
+    display: contents;
+  }
+  .pkt-table.pkt-table--responsive .pkt-table__data-cell::before,
+  .pkt-table.pkt-table--responsive .pkt-table td::before {
+    grid-column: 1/2;
+    content: attr(data-label);
+    font-weight: 500;
+  }
+  .pkt-table.pkt-table--responsive .pkt-table__compact .pkt-table__row,
+  .pkt-table.pkt-table--responsive .pkt-table__compact tr {
+    padding: 0.5rem 0.5rem;
+    gap: 0.5rem;
+  }
+  .pkt-table.pkt-table--responsive .pkt-table__zebra-blue .pkt-table__row:nth-child(odd),
+  .pkt-table.pkt-table--responsive .pkt-table__zebra-blue tr:nth-child(odd) {
+    background: var(--pkt-color-surface-subtle-pale-blue);
+  }
+}

package/dist/css/elements/table.min.css

@@ -0,0 +1 @@
+.pkt-table{width:100%;border-collapse:collapse}.pkt-table__header,.pkt-table thead{text-align:left;vertical-align:top;font-size:1.125rem;font-weight:500}.pkt-table__body,.pkt-table tbody{text-align:left;vertical-align:top;font-size:1rem;font-weight:300}.pkt-table__body .pkt-table__row:hover>.pkt-table__data-cell,.pkt-table tbody .pkt-table__row:hover>.pkt-table__data-cell{background:rgba(42,40,89,.01)}.pkt-table__header-cell,.pkt-table th{padding:1rem;border-bottom:none}.pkt-table__data-cell,.pkt-table td{padding:1rem;border-bottom:none}.pkt-table__cell-wrapper{text-align:left;vertical-align:top;display:inline-flex;gap:.5rem}.pkt-table.pkt-table--compact .pkt-table__header-cell,.pkt-table.pkt-table--compact th{padding:.5rem 1rem}.pkt-table.pkt-table--basic .pkt-table__row,.pkt-table.pkt-table--basic tr{border-bottom:2px solid var(--pkt-color-surface-strong-gray)}.pkt-table.pkt-table--zebra-blue .pkt-table__body .pkt-table__row:nth-child(odd),.pkt-table.pkt-table--zebra-blue .pkt-table__body tr:nth-child(odd),.pkt-table.pkt-table--zebra-blue tbody .pkt-table__row:nth-child(odd),.pkt-table.pkt-table--zebra-blue tbody tr:nth-child(odd){background:var(--pkt-color-surface-subtle-pale-blue)}@media screen and (max-width: 48rem){.pkt-table.pkt-table--responsive .pkt-table__row,.pkt-table.pkt-table--responsive .pkt-table tr{display:grid;grid-template-columns:max-content 1fr;gap:1rem;padding:1rem 1rem}.pkt-table.pkt-table--responsive .pkt-table__row .pkt-table__header-cell,.pkt-table.pkt-table--responsive .pkt-table__row th,.pkt-table.pkt-table--responsive .pkt-table tr .pkt-table__header-cell,.pkt-table.pkt-table--responsive .pkt-table tr th{display:none}.pkt-table.pkt-table--responsive .pkt-table__cell-wrapper{grid-column:2/3}.pkt-table.pkt-table--responsive .pkt-table__data-cell,.pkt-table.pkt-table--responsive .pkt-table td{padding:.5rem 1rem;display:contents}.pkt-table.pkt-table--responsive .pkt-table__data-cell::before,.pkt-table.pkt-table--responsive .pkt-table td::before{grid-column:1/2;content:attr(data-label);font-weight:500}.pkt-table.pkt-table--responsive .pkt-table__compact .pkt-table__row,.pkt-table.pkt-table--responsive .pkt-table__compact tr{padding:.5rem .5rem;gap:.5rem}.pkt-table.pkt-table--responsive .pkt-table__zebra-blue .pkt-table__row:nth-child(odd),.pkt-table.pkt-table--responsive .pkt-table__zebra-blue tr:nth-child(odd){background:var(--pkt-color-surface-subtle-pale-blue)}}

package/dist/css/pkt-base.css

@@ -13973,7 +13973,7 @@ a:active, a.pkt-link--active,
 .pkt-link--external::after {
   display: inline-block;
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/12.15/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/12.17/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;