@oslokommune/punkt-css 16.5.1 → 16.7.1

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

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

package/dist/scss/components/_datepicker.scss

@@ -101,14 +101,12 @@ pkt-datepicker-multiple {
   top: 100%;
   left: 0;
   z-index: 2;
-  margin: 0;
+  margin-top: 0.5rem;
   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);
+  border: 2px solid var(--pkt-color-border-gray);
 }
 .pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
   width: 8.3rem;

package/dist/scss/components/_index.scss

@@ -31,3 +31,4 @@
 @forward 'tag';
 @forward 'teaserlist';
 @forward 'textinput';
+@forward 'timepicker';

package/dist/scss/components/_timepicker.scss

@@ -0,0 +1,230 @@
+/* Component: pkt-timepicker */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/typography';
+
+pkt-timepicker {
+  display: block;
+}
+
+.pkt-timepicker,
+pkt-timepicker {
+  &__anchor {
+    position: relative;
+  }
+
+  .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-input,
+    .pkt-input-icon,
+    .pkt-input-separator {
+      border: 0;
+      min-height: auto;
+    }
+
+    &:hover {
+      border-color: var(--pkt-color-input-border-active);
+    }
+
+    &:focus-within {
+      border-color: var(--pkt-color-input-border-active);
+      outline: 2px solid var(--pkt-color-input-border-active);
+    }
+
+    &:has(input:disabled) {
+      border-color: var(--pkt-color-input-border-disabled);
+      background-color: var(--pkt-color-surface-default-gray);
+
+      .pkt-timepicker__icon,
+      .pkt-timepicker__button {
+        --fg-color: var(--pkt-color-input-text-disabled);
+      }
+    }
+
+    button.pkt-timepicker__button {
+      height: auto;
+      padding: 0 0.75rem;
+
+      pkt-icon {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      &:hover {
+        background-color: inherit !important;
+        border-color: inherit !important;
+        svg {
+          --fg-color: inherit;
+        }
+      }
+      &.pkt-timepicker__button--prev {
+        margin-right: 0.25rem;
+      }
+      &.pkt-timepicker__button--next {
+        margin-left: 0.25rem;
+      }
+    }
+  }
+
+  // Stepper variant: no left padding — the prev button takes that space
+  &--stepper .pkt-input__container {
+    padding-left: 0;
+  }
+
+  // Fullwidth modifier
+  &--fullwidth {
+    .pkt-timepicker__anchor,
+    .pkt-input__container {
+      width: 100%;
+    }
+  }
+
+  // Default / hide-picker fullwidth: button or decorative icon pushed to right
+  &--fullwidth:not(.pkt-timepicker--stepper) {
+    .pkt-input__container {
+      .pkt-input-icon {
+        margin-left: auto;
+      }
+    }
+  }
+
+  // Stepper fullwidth: center HH:MM between prev and next buttons
+  &--fullwidth.pkt-timepicker--stepper {
+    .pkt-input__container {
+      .pkt-timepicker__button--prev + .pkt-timepicker__input {
+        margin-left: auto;
+      }
+
+      .pkt-timepicker__separator + .pkt-timepicker__input {
+        margin-right: auto;
+      }
+    }
+  }
+
+  .pkt-inputwrapper--error .pkt-input__container,
+  .pkt-input__container.pkt-timepicker--error {
+    border-color: var(--pkt-color-brand-red-1000);
+
+    &:hover,
+    &:focus-within {
+      border-color: var(--pkt-color-brand-red-1000);
+    }
+  }
+
+  .pkt-inputwrapper--disabled .pkt-input__container,
+  .pkt-input__container.pkt-timepicker--disabled {
+    border-color: var(--pkt-color-border-states-disabled);
+    background-color: var(--pkt-color-surface-default-gray);
+
+    &:hover,
+    &:focus-within {
+      border-color: var(--pkt-color-border-states-disabled);
+      box-shadow: none;
+      outline: none;
+    }
+
+    .pkt-timepicker__icon {
+      --fg-color: var(--pkt-color-input-text-disabled);
+    }
+  }
+
+  &__input {
+    width: 1.5rem;
+    text-align: center;
+    padding: 0.5rem 0;
+
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
+  &__separator {
+    @include typography.get-text('pkt-txt-18');
+
+    padding: 0.25rem 0 0.5rem;
+    user-select: none;
+  }
+
+  &__icon {
+    height: auto;
+    padding: 0 0.75rem 0 0;
+    pointer-events: none;
+
+    pkt-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+
+  &-popup {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 2;
+    margin-top: 0.5rem;
+    display: flex;
+    padding: 0;
+    background: var(--pkt-color-background-default);
+    border: 2px solid var(--pkt-color-border-gray);
+    justify-content: center;
+
+    &[hidden] {
+      display: none;
+    }
+
+    &__col {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow-y: auto;
+      max-height: 23rem;
+      padding: 0.5rem 0.6rem;
+    }
+
+    &__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%;
+
+      &,
+      &:hover {
+        background-color: transparent;
+        color: inherit;
+        border-color: transparent;
+      }
+
+      &:hover {
+        background-color: var(--pkt-color-surface-default-light-blue);
+        color: var(--pkt-color-brand-dark-blue-1000);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--pkt-color-input-border-active);
+        outline-offset: -2px;
+      }
+
+      &--selected,
+      &--selected:hover,
+      &--selected:focus {
+        background-color: var(--pkt-color-surface-strong-blue);
+        color: var(--pkt-color-brand-dark-blue-1000);
+      }
+    }
+  }
+}

package/dist/scss/elements/_input.scss

@@ -41,7 +41,7 @@ pkt-select {
   &:not(textarea[cols]):not(input[size]):not(&--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),
   &__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(
       :is(:has(input[size]))
-    ):not(:is(:has(&--fullwidth))) {
+    ):not(:is(:has(&--fullwidth))):not(:is(:has(.pkt-timepicker__input))) {
     width: min(31rem, 100%);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "16.5.1",
+  "version": "16.7.1",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -19,6 +19,11 @@
     "dev": "astro dev",
     "preview": "astro preview"
   },
+  "nx": {
+    "implicitDependencies": [
+      "@oslokommune/punkt-elements"
+    ]
+  },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^16.0.0",
     "astro": "^5.7.5",
@@ -55,5 +60,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "a54204cf22e40c2db4a5e8d4f30be50d57be8250"
+  "gitHead": "f03ecd48c2bc6097584f3a3f1d45848578bf524d"
 }