@oslokommune/punkt-css 12.32.0 → 12.32.8

package/dist/scss/elements/_button.scss

@@ -194,7 +194,7 @@ $-skins: (
 
     // button variants (base)
     &--label-only {
-      .#{$-module-name}__icon:not(.#{$-module-name}__spinner) {
+      .pkt-btn__icon:not(.pkt-btn__spinner) {
         display: none;
       }
     }
@@ -214,7 +214,7 @@ $-skins: (
     &--icon-only {
       padding: map.get($o, 'padding-icon-only');
 
-      .#{$-module-name}__text {
+      .pkt-btn__text {
         @extend %sr-only;
       }
     }
@@ -234,7 +234,7 @@ $-skins: (
       width: map.get($o, 'icon-size');
     }
 
-    &--#{$name}.#{$-module-name}--icon-only {
+    &--#{$name}.pkt-btn--icon-only {
       padding: map.get($o, 'padding-icon-only');
     }
   }
@@ -247,11 +247,11 @@ $-skins: (
     $css-skin: --#{$name};
   }
 
-  .#{$-module-name}#{$css-skin} {
+  .pkt-btn#{$css-skin} {
     @include -print-skin-as-css-vars($name, map.get($-skins, $name, 'light'), 'light');
   }
 
-  @at-root [data-mode='dark'] .#{$-module-name}#{$css-skin} {
+  @at-root [data-mode='dark'] .pkt-btn#{$css-skin} {
     @include -print-skin-as-css-vars($name, map.get($-skins, $name, 'dark'), 'dark');
 
     // Dark mode
@@ -335,7 +335,7 @@ $-skins: (
 }
 
 // Selve knappe-klassen
-.#{$-module-name} {
+.pkt-btn {
   border-radius: 0;
   cursor: pointer;
   display: inline-flex;
@@ -355,16 +355,8 @@ $-skins: (
   text-align: left;
   align-items: center;
   column-gap: 0.5rem;
-
-  // gjenbruker noe styling fra baseklassen over for å style div som holder innholdet i custom element
-  // diven har fått et eget klassenavn for å kunne style den separat slik at det ikke blir konflikter med de som bruker klassene våre direkte
-  .pkt-btn__element-content {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-  }
+  -webkit-appearance: none;
+  appearance: none;
 
   // button sizes & variants
   @each $key, $value in $-sizes {
@@ -386,10 +378,15 @@ $-skins: (
     color: var(--pkt-color-button-text-normal);
   }
 
-  @at-root a.#{$-module-name}:focus,
-    div.#{$-module-name}:not([data-disabled]):focus,
-    &:enabled:focus,
-    &.#{$-module-name}--focus {
+  &:focus {
+    outline: none;
+  }
+
+  @at-root a.pkt-btn:focus-visible,
+    div.pkt-btn:not([data-disabled]):focus-visible,
+    &:enabled:focus-visible,
+    &.pkt-btn:focus-visible,
+    &.pkt-btn--focus {
     background-color: var(--pkt-color-button-background-focus);
     color: var(--pkt-color-button-text-focus);
     border-color: var(--pkt-color-button-border-focus);
@@ -397,10 +394,11 @@ $-skins: (
     text-decoration: none;
   }
 
-  @at-root a.#{$-module-name}:hover,
-    div.#{$-module-name}:not([data-disabled]):hover,
+  @at-root a.pkt-btn:hover,
+    div.pkt-btn:not([data-disabled]):hover,
     &:enabled:hover,
-    &.#{$-module-name}--hover {
+    &:hover:not(:disabled):not([disabled]):not([data-disabled]),
+    &.pkt-btn--hover {
     background-color: var(--pkt-color-button-background-hover);
     border-color: var(--pkt-color-button-border-hover);
     color: var(--pkt-color-button-text-hover);
@@ -408,11 +406,12 @@ $-skins: (
     text-decoration: underline;
   }
 
-  @at-root a.#{$-module-name}:active,
-    div.#{$-module-name}:not([data-disabled]):active,
+  @at-root a.pkt-btn:active,
+    div.pkt-btn:not([data-disabled]):active,
     &:enabled:active,
-    &.#{$-module-name}--active,
-    &.#{$-module-name}--active:hover {
+    &:active:not(:disabled):not([disabled]):not([data-disabled]),
+    &.pkt-btn--active,
+    &.pkt-btn--active:hover {
     background-color: var(--pkt-color-button-background-active);
     border-color: var(--pkt-color-button-border-active);
     color: var(--pkt-color-button-text-active);

package/dist/scss/pkt-base.scss

@@ -1,4 +1,2 @@
 @charset "utf-8";
-
-// Base
 @forward 'base';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "12.32.0",
+  "version": "12.32.8",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -54,5 +54,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "8d17b2b21d83b498b237d837747e753c64570285"
+  "gitHead": "2be6c93ef32da3656e4c88367201849e772d0017"
 }