@oslokommune/punkt-css 17.0.7 → 17.0.8

package/dist/scss/components/_index.scss

@@ -24,7 +24,6 @@
 @forward 'loader';
 @forward 'modal';
 @forward 'messagebox';
-@forward 'preview';
 @forward 'progressbar';
 @forward 'searchinput';
 @forward 'skiplink';
@@ -33,6 +32,5 @@
 @forward 'tag';
 @forward 'tag';
 @forward 'teaserlist';
-@forward 'textinput';
 @forward 'textarea';
 @forward 'timepicker';

package/dist/scss/components/_tag.scss

@@ -29,8 +29,22 @@ pkt-tag > .pkt-tag {
   display: flex;
 }
 
+button.pkt-tag {
+  appearance: none;
+  border-radius: 0;
+  cursor: pointer;
+  font-family: inherit;
+  justify-content: center;
+  text-align: left;
+  text-decoration: none;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.3em;
+  user-select: none;
+}
+
 .pkt-tag {
   width: fit-content;
+  vertical-align: middle;
   background: var(--pkt-color-surface-default-light-blue);
   padding: 0 map.get(variables.$spacing, 'size-8');
   display: inline-flex;
@@ -51,6 +65,7 @@ pkt-tag > .pkt-tag {
   }
 
   &.pkt-btn:hover,
+  &:is(button):hover,
   &.pkt-tag--hover {
     background-color: var(--pkt-color-surface-strong-blue);
     color: var(--pkt-color-tag-text-hover);
@@ -63,6 +78,7 @@ pkt-tag > .pkt-tag {
   }
 
   &.pkt-btn:focus,
+  &:is(button):focus,
   &.pkt-tag--focus {
     background-color: var(--pkt-color-surface-strong-blue);
     border-color: var(--pkt-color-text-action-active);
@@ -75,6 +91,7 @@ pkt-tag > .pkt-tag {
   }
 
   &.pkt-btn:active,
+  &:is(button):active,
   &.pkt-tag--active,
   &.pkt-tag--active:hover {
     background-color: var(--pkt-color-surface-strong-blue);
@@ -103,6 +120,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-strong-light-green);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-green);
       color: var(--pkt-color-tag-text-hover);
@@ -113,6 +131,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-green);
       color: var(--pkt-color-tag-text-focus);
@@ -123,6 +142,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-green);
       color: var(--pkt-color-tag-text-active);
@@ -137,6 +157,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-default-yellow);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-yellow);
       color: var(--pkt-color-tag-text-hover);
@@ -147,6 +168,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-yellow);
       color: var(--pkt-color-tag-text-focus);
@@ -157,6 +179,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-yellow);
       color: var(--pkt-color-tag-text-active);
@@ -171,6 +194,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-default-red);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-red);
       color: var(--pkt-color-tag-text-hover);
@@ -181,6 +205,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-red);
       color: var(--pkt-color-tag-text-focus);
@@ -191,6 +216,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-red);
       color: var(--pkt-color-tag-text-active);
@@ -205,6 +231,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-default-light-beige);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-beige);
       color: var(--pkt-color-tag-text-hover);
@@ -215,6 +242,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-beige);
       color: var(--pkt-color-tag-text-focus);
@@ -225,6 +253,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-beige);
       color: var(--pkt-color-tag-text-active);
@@ -240,6 +269,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-default-gray);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-gray);
       color: var(--pkt-color-tag-text-hover);
@@ -250,6 +280,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-gray);
       color: var(--pkt-color-tag-text-active);
@@ -260,6 +291,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-gray);
       color: var(--pkt-color-tag-text-active);
@@ -274,6 +306,7 @@ pkt-tag > .pkt-tag {
     background: var(--pkt-color-surface-subtle-light-blue);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-surface-strong-blue);
       color: var(--pkt-color-tag-text-hover);
@@ -284,6 +317,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--focus {
       background-color: var(--pkt-color-surface-strong-blue);
       color: var(--pkt-color-tag-text-focus);
@@ -294,6 +328,7 @@ pkt-tag > .pkt-tag {
     }
 
     &.pkt-btn:active,
+    &:is(button):active,
     &.pkt-tag--active {
       background-color: var(--pkt-color-surface-strong-blue);
       color: var(--pkt-color-tag-text-active);
@@ -310,7 +345,9 @@ pkt-tag > .pkt-tag {
     --fg-color: var(--pkt-color-brand-neutrals-200);
 
     &.pkt-btn:hover,
+    &:is(button):hover,
     &.pkt-btn:focus,
+    &:is(button):focus,
     &.pkt-tag--hover {
       background-color: var(--pkt-color-brand-warm-blue-1000) !important;
       color: var(--pkt-color-brand-neutrals-200) !important;

package/dist/scss/elements/_index.scss

@@ -6,5 +6,4 @@
 @forward 'input';
 @forward 'list';
 @forward 'section';
-@forward 'select';
 @forward 'table';

package/dist/scss/pkt.layer.scss

@@ -0,0 +1,8 @@
+@charset "utf-8";
+
+@use 'sass:meta';
+
+// meta.load-css, ikke @use, fordi @use ikke kan stå inne i @layer.
+@layer punkt {
+  @include meta.load-css('pkt');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-css",
-  "version": "17.0.7",
+  "version": "17.0.8",
   "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -62,5 +62,5 @@
   "dependencies": {
     "astro": "^7.2.0"
   },
-  "gitHead": "d13f13397fd20b7d41aee384f6ae985b32d8b507"
+  "gitHead": "e755eac6123dd25b4f93b1de4cc8febe170eee2d"
 }

package/dist/css/components/preview.css

@@ -1,180 +0,0 @@
-.pkt-preview {
-  position: relative;
-}
-.pkt-preview .pkt-tabs {
-  --pkt-tabs-bg: var(--pkt-color-surface-default-gray);
-}
-.pkt-preview__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;
-}
-.pkt-preview__component--fullwidth > div {
-  width: 100%;
-}
-.pkt-preview__component--fullwidth > div > .pkt-fileupload, .pkt-preview__component--fullwidth > div > .pkt-fileupload-wrapper {
-  width: 100%;
-}
-.pkt-preview__component-container {
-  position: relative;
-  border: 2px solid var(--pkt-color-border-gray);
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-@media screen and (min-width: 64rem) {
-  .pkt-preview__component-container {
-    flex-direction: row;
-  }
-  .pkt-preview__component-container .pkt-preview__component {
-    flex: 1 1 0;
-    min-width: 0;
-  }
-  .pkt-preview__component-container .pkt-preview__panel {
-    flex: 0 0 auto;
-    min-width: 20rem;
-    max-width: 25rem;
-    width: 100%;
-  }
-}
-.pkt-preview__component__inner-container {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-.pkt-preview__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);
-}
-.pkt-preview__panel__options {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin-block-end: 1rem;
-}
-.pkt-preview__options {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-.pkt-preview__opts {
-  padding: 1rem;
-  background-color: var(--pkt-color-surface-default-gray);
-}
-.pkt-preview__opts > .pkt-cell {
-  position: relative;
-}
-.pkt-preview__opts > .pkt-cell > .pkt-tag {
-  display: block;
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 0 0.25rem 0;
-}
-.pkt-preview .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;
-}
-.pkt-preview__code {
-  color: var(--pkt-color-text-body-default);
-  position: relative;
-}
-.pkt-preview__code-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-preview__code-container .pkt-tabs {
-  --pkt-tabs-bg: var(--pkt-color-grays-gray-800);
-}
-.pkt-preview__code-container.hide-code {
-  overflow: hidden;
-  max-height: 11.7rem;
-}
-.pkt-preview__code-container.hide-code: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%);
-}
-.pkt-preview__code pre {
-  max-height: 30rem;
-  overflow: auto;
-  margin-block-start: 0 !important;
-  background-color: transparent !important;
-  font-size: 1rem;
-  padding: 2rem 0;
-}
-.pkt-preview__copy {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  z-index: 3;
-}
-.pkt-preview__fullscreen-btn {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  z-index: 1;
-}
-.pkt-preview__prop-group, .pkt-preview__array-item, .pkt-preview__object-editor {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-.pkt-preview .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;
-}
-.pkt-preview__add-object {
-  text-align: right;
-  margin-block-start: 0.5rem;
-}
-.pkt-preview__remove-object {
-  position: absolute;
-  top: -1.75rem;
-  right: -0.25rem;
-}
-.pkt-preview__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/css/components/preview.min.css

@@ -1 +0,0 @@
-.pkt-preview{position:relative}.pkt-preview .pkt-tabs{--pkt-tabs-bg: var(--pkt-color-surface-default-gray)}.pkt-preview__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 .2s linear}.pkt-preview__component--fullwidth>div{width:100%}.pkt-preview__component--fullwidth>div>.pkt-fileupload,.pkt-preview__component--fullwidth>div>.pkt-fileupload-wrapper{width:100%}.pkt-preview__component-container{position:relative;border:2px solid var(--pkt-color-border-gray);display:flex;flex-direction:column;gap:0}@media screen and (min-width: 64rem){.pkt-preview__component-container{flex-direction:row}.pkt-preview__component-container .pkt-preview__component{flex:1 1 0;min-width:0}.pkt-preview__component-container .pkt-preview__panel{flex:0 0 auto;min-width:20rem;max-width:25rem;width:100%}}.pkt-preview__component__inner-container{display:flex;justify-content:center;width:100%}.pkt-preview__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)}.pkt-preview__panel__options{display:flex;flex-direction:column;gap:1rem;margin-block-end:1rem}.pkt-preview__options{display:flex;flex-direction:column;gap:1rem}.pkt-preview__opts{padding:1rem;background-color:var(--pkt-color-surface-default-gray)}.pkt-preview__opts>.pkt-cell{position:relative}.pkt-preview__opts>.pkt-cell>.pkt-tag{display:block;position:absolute;top:0;right:0;padding:0 .25rem 0}.pkt-preview .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}.pkt-preview__code{color:var(--pkt-color-text-body-default);position:relative}.pkt-preview__code-container{position:relative;padding:2rem 2rem 0;background-color:var(--pkt-color-grays-gray-800);transition:max-height .5s ease;max-height:50rem}.pkt-preview__code-container .pkt-tabs{--pkt-tabs-bg: var(--pkt-color-grays-gray-800)}.pkt-preview__code-container.hide-code{overflow:hidden;max-height:11.7rem}.pkt-preview__code-container.hide-code: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%)}.pkt-preview__code pre{max-height:30rem;overflow:auto;margin-block-start:0 !important;background-color:rgba(0,0,0,0) !important;font-size:1rem;padding:2rem 0}.pkt-preview__copy{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.5rem;align-items:center;z-index:3}.pkt-preview__fullscreen-btn{position:absolute;top:.5rem;right:.5rem;z-index:1}.pkt-preview__prop-group,.pkt-preview__array-item,.pkt-preview__object-editor{position:relative;display:flex;flex-direction:column;gap:1rem}.pkt-preview .pkt-inputwrapper__helptext code{background:var(--pkt-color-background-subtle);border:1px solid var(--pkt-color-border-gray);border-radius:3px;padding:.11em .33em;font-size:.8em}.pkt-preview__add-object{text-align:right;margin-block-start:.5rem}.pkt-preview__remove-object{position:absolute;top:-1.75rem;right:-0.25rem}.pkt-preview__specs pre{margin-block-start:0 !important}.astro-code.github-light{background-color:var(--pkt-color-surface-default-gray) !important}.preview-content{display:contents}