@oslokommune/punkt-css 14.5.3 → 15.0.0

package/dist/scss/abstracts/variables/_index.scss

@@ -6,7 +6,7 @@
 @forward 'spacing';
 
 // Default icon path
-$icon-path: 'https://punkt-cdn.oslo.kommune.no/14.5/icons' !default;
+$icon-path: 'https://punkt-cdn.oslo.kommune.no/15.0/icons' !default;
 
 // Borders
 $border-width: (

package/dist/scss/base/_visibility.scss

@@ -11,6 +11,9 @@
 .pkt-show {
   display: block !important;
 }
+.pkt-invisible {
+  visibility: hidden !important;
+}
 
 @each $name, $value in $breakpoints {
   .pkt-hide-#{$name}-up,

package/dist/scss/components/_calendar.scss

@@ -107,9 +107,15 @@ pkt-calendar {
     .pkt-btn:focus,
     .pkt-btn:hover {
       background-color: var(--pkt-color-surface-strong-blue);
+      color: var(--pkt-color-brand-dark-blue-1000);
     }
   }
   .pkt-cal-in-range {
+    .pkt-btn,
+    .pkt-btn:focus,
+    .pkt-btn:hover {
+      color: var(--pkt-color-brand-dark-blue-1000);
+    }
     :before,
     :after,
     &-first :after,
@@ -125,6 +131,7 @@ pkt-calendar {
     :before,
     .pkt-btn {
       background-color: var(--pkt-color-surface-default-light-blue);
+      color: var(--pkt-color-brand-dark-blue-1000);
     }
     ::after {
       background-color: transparent;
@@ -141,81 +148,3 @@ pkt-calendar {
     }
   }
 }
-
-pkt-datepicker {
-  display: block;
-  position: relative;
-  .pkt-datepicker {
-    position: relative;
-    &__tags {
-      .pkt-tag {
-        margin: 0 0.25rem 0.5rem 0;
-      }
-    }
-  }
-}
-
-pkt-datepicker-single,
-pkt-datepicker-range,
-pkt-datepicker-multiple {
-  display: block;
-}
-
-.pkt-datepicker__inputs {
-  width: 100%;
-  position: relative;
-  .pkt-input__container {
-    width: fit-content;
-  }
-  button.pkt-input-icon {
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
-    &:hover {
-      background-color: inherit !important;
-      border-color: inherit !important;
-      --fg-color: var(--pkt-color-button-text-hover);
-    }
-  }
-  .pkt-datepicker__input {
-    padding-right: 0;
-    background-image: none;
-  }
-  .pkt-input-separator ~ .pkt-datepicker--range {
-    padding-left: 0.25rem;
-  }
-}
-.pkt-calendar-popup {
-  top: 100%;
-  left: 0;
-  z-index: 2;
-  margin: 0;
-  padding: 0.5rem;
-  position: absolute;
-  width: max-content;
-  background: var(--pkt-color-background-default);
-  box-shadow:
-    0px 2px 4px -2px rgba(0, 0, 0, 0.1),
-    0px 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-.pkt-datepicker__input:not(.pkt-datepicker--multiple) {
-  width: 8.3rem;
-}
-.pkt-datepicker__input::-webkit-inner-spin-button,
-.pkt-datepicker__input::-webkit-calendar-picker-indicator {
-  display: none;
-  -webkit-appearance: none;
-}
-
-// Firefox specific styles :(
-@-moz-document url-prefix() {
-  .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
-    width: 10.5rem;
-  }
-  .pkt-datepicker__inputs button.pkt-input-icon {
-    display: none;
-  }
-  .pkt-datepicker__inputs
-    input.pkt-datepicker__input:has(~ button):not(:has(~ .pkt-input-separator)):not(:has(~ .pkt-input-prefix)) {
-    border-right-width: 2px !important;
-  }
-}

package/dist/scss/components/_datepicker.scss

@@ -0,0 +1,139 @@
+// Datepicker wrapper & input styles
+// Primary selectors use CSS classes (framework-agnostic).
+// Element selectors kept for backward compatibility with web components.
+
+.pkt-datepicker,
+pkt-datepicker {
+  display: block;
+  position: relative;
+}
+
+.pkt-datepicker__tags {
+  button.pkt-tag {
+    margin: 0 0.25rem 0.5rem 0;
+  }
+}
+
+.pkt-datepicker-single,
+.pkt-datepicker-range,
+.pkt-datepicker-multiple,
+pkt-datepicker-single,
+pkt-datepicker-range,
+pkt-datepicker-multiple {
+  display: block;
+}
+
+.pkt-datepicker__inputs {
+  width: 100%;
+  position: relative;
+  .pkt-input__container:not(:has(.pkt-input--fullwidth)) {
+    width: fit-content;
+  }
+  > .pkt-input__container {
+    border: 2px solid var(--pkt-color-input-border-normal);
+
+    .pkt-input,
+    .pkt-input-prefix,
+    .pkt-input-suffix,
+    .pkt-input-icon,
+    .pkt-input-separator {
+      border: 0;
+    }
+
+    &:hover {
+      border-color: var(--pkt-color-input-border-active);
+    }
+
+    &:focus-within {
+      border-color: var(--pkt-color-input-border-active);
+    }
+
+    &:has(input:disabled),
+    &:has(input[readonly]) {
+      border-color: var(--pkt-color-input-border-disabled);
+    }
+
+    &:has(.pkt-input--counter-error) {
+      border-color: var(--pkt-color-input-border-error);
+    }
+
+    .pkt-inputwrapper--error & {
+      border-color: var(--pkt-color-brand-red-1000);
+
+      &:hover,
+      &:focus-within {
+        border-color: var(--pkt-color-brand-red-1000);
+      }
+    }
+
+    .pkt-inputwrapper--disabled & {
+      border-color: var(--pkt-color-border-states-disabled);
+
+      &:hover,
+      &:focus-within {
+        border-color: var(--pkt-color-border-states-disabled);
+        box-shadow: none;
+        outline: none;
+      }
+    }
+  }
+  button.pkt-input-icon {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    &:hover {
+      background-color: inherit !important;
+      border-color: inherit !important;
+      --fg-color: var(--pkt-color-button-text-hover);
+    }
+  }
+  .pkt-datepicker__input {
+    padding-right: 0;
+    background-image: none;
+  }
+  .pkt-input-separator ~ .pkt-datepicker--range {
+    padding-left: 0.25rem;
+  }
+}
+.pkt-calendar-popup {
+  top: 100%;
+  left: 0;
+  z-index: 2;
+  margin: 0;
+  padding: 0.5rem;
+  position: absolute;
+  width: max-content;
+  background: var(--pkt-color-background-default);
+  box-shadow:
+    0px 2px 4px -2px rgba(0, 0, 0, 0.1),
+    0px 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+.pkt-datepicker__input:not(.pkt-datepicker--multiple) {
+  width: 8.3rem;
+}
+.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple) {
+  width: auto;
+  flex: 1;
+}
+.pkt-datepicker__input::-webkit-inner-spin-button,
+.pkt-datepicker__input::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
+// Firefox specific styles :(
+@-moz-document url-prefix() {
+  .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
+    width: 10.5rem;
+  }
+  .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple) {
+    width: auto;
+    flex: 1;
+  }
+  .pkt-datepicker__inputs button.pkt-input-icon {
+    display: none;
+  }
+  .pkt-datepicker__inputs
+    input.pkt-datepicker__input:has(~ button):not(:has(~ .pkt-input-separator)):not(:has(~ .pkt-input-prefix)) {
+    border-right-width: 2px !important;
+  }
+}

package/dist/scss/components/_index.scss

@@ -7,6 +7,7 @@
 @forward 'calendar';
 @forward 'card';
 @forward 'combobox';
+@forward 'datepicker';
 @forward 'footer';
 @forward 'header';
 @forward 'header-service';

package/dist/scss/elements/_input.scss

@@ -51,10 +51,14 @@ pkt-select {
 
   &--fullwidth {
     &,
+    *:has(&) ~ .pkt-input__counter,
     & + .pkt-input__counter {
       width: 100%;
     }
   }
+  [fullwidth] &__counter {
+    width: 100%;
+  }
 
   &:is(textarea) {
     min-height: map.get(variables.$spacing, 'size-128');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "14.5.3",
+  "version": "15.0.0",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -20,7 +20,7 @@
     "preview": "astro preview"
   },
   "devDependencies": {
-    "@oslokommune/punkt-assets": "^14.1.1",
+    "@oslokommune/punkt-assets": "^15.0.0",
     "astro": "^5.7.5",
     "edit-json-file": "^1.8.0",
     "fs-extra": "^11.2.0",
@@ -55,5 +55,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "343d038807d9a8cb3e15f2cb54ead64fd19708e4"
+  "gitHead": "b02bd677548381990d98efcf29f2c5dc14d2bf9f"
 }