@digdir/designsystemet-css 1.0.0-next.32 → 1.0.0-next.33

package/dist/tag.css

@@ -1 +1 @@
-.ds-tag{--dsc-tag-background:var(--ds-color-neutral-background-subtle);--dsc-tag-color:var(--ds-color-neutral-text-default);align-items:center;background-color:var(--dsc-tag-background);border-radius:min(1rem,var(--ds-border-radius-sm));box-sizing:border-box;color:var(--dsc-tag-color);display:flex;min-height:var(--ds-sizing-8);width:-webkit-max-content;width:-moz-max-content;width:max-content;word-break:break-word}.ds-tag,.ds-tag--sm{padding:0 var(--ds-spacing-2)}.ds-tag--sm{min-height:var(--ds-sizing-7)}.ds-tag--md{min-height:var(--ds-sizing-8);padding:0 var(--ds-spacing-2)}.ds-tag--lg{min-height:var(--ds-sizing-9);padding:0 var(--ds-spacing-3)}.ds-tag--neutral{--dsc-tag-background:var(--ds-color-neutral-surface-default);--dsc-tag-color:var(--ds-color-neutral-text-default)}.ds-tag--info{--dsc-tag-background:var(--ds-color-info-surface-default);--dsc-tag-color:var(--ds-color-info-text-default)}.ds-tag--success{--dsc-tag-background:var(--ds-color-success-surface-default);--dsc-tag-color:var(--ds-color-success-text-default)}.ds-tag--warning{--dsc-tag-background:var(--ds-color-warning-surface-default);--dsc-tag-color:var(--ds-color-warning-text-default)}.ds-tag--danger{--dsc-tag-background:var(--ds-color-danger-surface-default);--dsc-tag-color:var(--ds-color-danger-text-default)}.ds-tag--brand1{--dsc-tag-background:var(--ds-color-brand1-surface-default);--dsc-tag-color:var(--ds-color-brand1-text-default)}.ds-tag--brand2{--dsc-tag-background:var(--ds-color-brand2-surface-default);--dsc-tag-color:var(--ds-color-brand2-text-default)}.ds-tag--brand3{--dsc-tag-background:var(--ds-color-brand3-surface-default);--dsc-tag-color:var(--ds-color-brand3-text-default)}
+.ds-tag{--dsc-tag-background:var(--ds-color-neutral-surface-default);--dsc-tag-color:var(--ds-color-neutral-text-default);--dsc-tag-min-height:var(--ds-sizing-8);align-items:center;background:var(--dsc-tag-background);border-radius:min(1rem,var(--ds-border-radius-sm));box-sizing:border-box;color:var(--dsc-tag-color);display:flex;min-height:var(--dsc-tag-min-height);padding:var(--dsc-tag-padding);width:-webkit-max-content;width:-moz-max-content;width:max-content;word-break:break-word}.ds-tag,.ds-tag[data-size=sm]{--dsc-tag-padding:0 var(--ds-spacing-2)}.ds-tag[data-size=sm]{--dsc-tag-min-height:var(--ds-sizing-7)}.ds-tag[data-size=lg]{--dsc-tag-padding:0 var(--ds-spacing-3);--dsc-tag-min-height:var(--ds-sizing-9)}.ds-tag[data-color=info]{--dsc-tag-background:var(--ds-color-info-surface-default);--dsc-tag-color:var(--ds-color-info-text-default)}.ds-tag[data-color=success]{--dsc-tag-background:var(--ds-color-success-surface-default);--dsc-tag-color:var(--ds-color-success-text-default)}.ds-tag[data-color=warning]{--dsc-tag-background:var(--ds-color-warning-surface-default);--dsc-tag-color:var(--ds-color-warning-text-default)}.ds-tag[data-color=danger]{--dsc-tag-background:var(--ds-color-danger-surface-default);--dsc-tag-color:var(--ds-color-danger-text-default)}.ds-tag[data-color=brand1]{--dsc-tag-background:var(--ds-color-brand1-surface-default);--dsc-tag-color:var(--ds-color-brand1-text-default)}.ds-tag[data-color=brand2]{--dsc-tag-background:var(--ds-color-brand2-surface-default);--dsc-tag-color:var(--ds-color-brand2-text-default)}.ds-tag[data-color=brand3]{--dsc-tag-background:var(--ds-color-brand3-surface-default);--dsc-tag-color:var(--ds-color-brand3-text-default)}

package/dist/tooltip.css

@@ -1 +1 @@
-.ds-tooltip{--dsc-tooltip-background:var(--ds-color-neutral-text-default);--dsc-tooltip-color:var(--ds-color-neutral-background-default);--dsc-tooltip-padding:var(--ds-spacing-1) var(--ds-spacing-2);--dsc-tooltip-border-radius:var(--ds-border-radius-md);background:var(--dsc-tooltip-background);border-radius:var(--dsc-tooltip-border-radius);color:var(--dsc-tooltip-color);padding:var(--dsc-tooltip-padding)}.ds-tooltip__arrow{fill:var(--dsc-tooltip-background)}
+.ds-tooltip{--dsc-tooltip-background:var(--ds-color-neutral-text-default);background:var(--dsc-tooltip-background);border-radius:var(--ds-border-radius-md);color:var(--ds-color-neutral-background-default);padding:var(--ds-spacing-1) var(--ds-spacing-2)}.ds-tooltip__arrow{fill:var(--dsc-tooltip-background)}

package/dist/utilities.css

@@ -1 +1 @@
-.ds-sr-only{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.ds-focus:focus-visible{--dsc-focus-border-width:3px;box-shadow:0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);outline:var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);outline-offset:var(--dsc-focus-border-width)}.ds-animate-height--closed,.ds-animate-height--openingOrClosing{overflow:hidden}.ds-animate-height--open .ds-animate-height__content{height:auto}.ds-animate-height--closed .ds-animate-height__content{display:none;height:0}
+.ds-sr-only{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:root{--dsc-focus-border-width:3px;--dsc-focus-boxShadow:0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner),0 0 0 calc(var(--dsc-focus-border-width)*2) var(--ds-color-focus-outer)}.ds-focus:focus-visible{box-shadow:var(--dsc-focus-boxShadow);outline:none}.ds-animate-height--closed,.ds-animate-height--openingOrClosing{overflow:hidden}.ds-animate-height--open .ds-animate-height__content{height:auto}.ds-animate-height--closed .ds-animate-height__content{display:none;height:0}

package/divider.css

@@ -1,17 +1,8 @@
 .ds-divider {
-  border: none;
-  border-top: 1px solid;
-  width: 100%;
-}
-
-.ds-divider--default {
-  border-color: var(--ds-color-neutral-border-subtle);
-}
+  --dsc-divider-color: var(--ds-color-neutral-border-subtle);
 
-.ds-divider--strong {
-  border-color: var(--ds-color-neutral-border-default);
-}
-
-.ds-divider--subtle {
-  border-color: var(--ds-color-neutral-border-subtle);
+  border-top: 1px solid var(--dsc-divider-color);
+  border-width: 1px 0 0;
+  margin-block: .5em;
+  width: 100%;
 }

package/dropdownmenu.css

@@ -1,11 +1,6 @@
 .ds-dropdownmenu {
-  --dsc-dropdownmenu-background: var(--ds-color-neutral-background-default);
-  --dsc-dropdownmenu-padding: var(--ds-spacing-2);
-  --dsc-dropdownmenu-border-radius: min(1rem, var(--ds-border-radius-md));
-  --dsc-dropdownmenu-border: 1px solid var(--ds-color-neutral-border-subtle);
-  --dsc-dropdownmenu-min-width: 260px;
-  --dsc-dropdownmenu-shadow: var(--ds-shadow-md);
-  --dsc-dropdownmenu-hr-border-color: var(--ds-color-neutral-border-subtle);
+  --dsc-dropdownmenu-padding: var(--ds-spacing-3) var(--ds-spacing-2);
+  --dsc-dropdownmenu-min-width: 16rem;
   --dsc-dropdownmenu-item-padding: 0 var(--ds-spacing-4);
   --dsc-dropdownmenu-header-padding: var(--ds-spacing-2) var(--ds-spacing-4);
 
@@ -14,38 +9,30 @@
   z-index: 1500;
   margin: 0;
   list-style: none;
-  border-radius: var(--dsc-dropdownmenu-border-radius);
-  box-shadow: var(--dsc-dropdownmenu-shadow);
-  background-color: var(--dsc-dropdownmenu-background);
-  border: var(--dsc-dropdownmenu-border);
+  border-radius: min(1rem, var(--ds-border-radius-md));
+  box-shadow: var(--ds-shadow-md);
+  background-color: var(--ds-color-neutral-background-default);
+  border: 1px solid var(--ds-color-neutral-border-subtle);
   min-width: var(--dsc-dropdownmenu-min-width);
-}
-
-.ds-dropdownmenu--sm {
-  --dsc-dropdownmenu-padding: var(--ds-spacing-2);
-  --dsc-dropdownmenu-min-width: 240px;
-}
 
-.ds-dropdownmenu--md {
-  --dsc-dropdownmenu-padding: var(--ds-spacing-3) var(--ds-spacing-2);
-  --dsc-dropdownmenu-min-width: 260px;
-}
-
-.ds-dropdownmenu--lg {
-  --dsc-dropdownmenu-padding: var(--ds-spacing-4) var(--ds-spacing-2);
-  --dsc-dropdownmenu-min-width: 280px;
-}
+  &[data-size='sm'] {
+    --dsc-dropdownmenu-padding: var(--ds-spacing-2);
+    --dsc-dropdownmenu-min-width: 15rem;
+  }
 
-.ds-dropdownmenu > hr {
-  border-color: var(--dsc-dropdownmenu-hr-border-color) !important;
+  &[data-size='lg'] {
+    --dsc-dropdownmenu-padding: var(--ds-spacing-4) var(--ds-spacing-2);
+    --dsc-dropdownmenu-min-width: 18rem;
+  }
 }
 
 .ds-dropdownmenu__item {
   justify-content: start;
   padding: var(--dsc-dropdownmenu-item-padding);
+  width: 100%;
 }
 
-.ds-dropdownmenu__section {
+.ds-dropdownmenu__group {
   margin: 0;
   padding: 0;
   list-style: none;

package/index.css

@@ -10,7 +10,6 @@
 @import url('./baseline/typography/ingress.css') layer(ds.base.typography);
 @import url('./baseline/typography/error-message.css') layer(ds.base.typography);
 @import url('./utilities.css') layer(ds.utilities);
-@import url('./box.css') layer(ds.components);
 @import url('./button.css') layer(ds.components);
 @import url('./alert.css') layer(ds.components);
 @import url('./skiplink.css') layer(ds.components);
@@ -19,7 +18,7 @@
 @import url('./checkbox.css') layer(ds.components);
 @import url('./radio.css') layer(ds.components);
 @import url('./search.css') layer(ds.components);
-@import url('./native-select.css') layer(ds.components);
+@import url('./select.css') layer(ds.components);
 @import url('./textfield.css') layer(ds.components);
 @import url('./textarea.css') layer(ds.components);
 @import url('./helptext.css') layer(ds.components);
@@ -44,3 +43,4 @@
 @import url('./combobox.css') layer(ds.components);
 @import url('./breadcrumbs.css') layer(ds.components);
 @import url('./badge.css') layer(ds.components);
+@import url('./avatar.css') layer(ds.components);

package/link.css

@@ -1,58 +1,56 @@
 .ds-link {
+  --dsc-link-background--active: var(--ds-color-accent-surface-default);
+  --dsc-link-background--focus: var(--ds-color-focus-outer);
+  --dsc-link-color--active: var(--ds-color-accent-text-default);
+  --dsc-link-color--focus: var(--ds-color-focus-inner);
+  --dsc-link-color--hover: var(--ds-color-accent-text-default);
+  --dsc-link-color--visited: var(--ds-global-purple-12);
   --dsc-link-color: var(--ds-color-accent-text-subtle);
-  --dsc-link-color-hover: var(--ds-color-accent-text-default);
-  --dsc-link-color-active: var(--ds-color-accent-text-default);
-  --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
-  --dsc-link-color-visited: var(--ds-global-purple-12);
-  --dsc-link-color-focus: var(--ds-color-focus-inner);
-  --dsc-link-color-focus-background: var(--ds-color-focus-outer);
+  --dsc-link-text-decoration-thickness--hover: max(2px, 0.125rem, 0.12em);
+  --dsc-link-text-decoration-thickness: max(1px, 0.0625rem);
 
-  position: relative;
   color: var(--dsc-link-color);
-  cursor: pointer;
-  text-decoration: underline;
-  text-decoration-thickness: max(1px, 0.0625rem);
+  outline: none;
+  text-decoration-style: solid;
+  text-decoration-thickness: var(--dsc-link-text-decoration-thickness);
   text-underline-offset: max(5px, 0.25rem);
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ds-spacing-1);
-}
 
-.ds-link--accent {
-  --dsc-link-color: var(--ds-color-accent-text-subtle);
-  --dsc-link-color-hover: var(--ds-color-accent-text-default);
-  --dsc-link-color-active: var(--ds-color-accent-text-default);
-  --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
-  --dsc-link-color-visited: var(--ds-global-purple-12);
-}
+  & svg {
+    vertical-align: middle; /* If adding SVG icon - align it to the text */
+  }
 
-.ds-link--neutral {
-  --dsc-link-color: var(--ds-color-neutral-text-default);
-  --dsc-link-color-hover: var(--ds-color-neutral-text-subtle);
-  --dsc-link-color-active: var(--ds-color-neutral-text-subtle);
-  --dsc-link-color-active-background: var(--ds-color-neutral-surface-default);
-  --dsc-link-color-visited: var(--ds-global-purple-12);
-}
+  /**
+    * Colors
+    */
+  &[data-color="neutral"] {
+    --dsc-link-background--active: var(--ds-color-neutral-surface-default);
+    --dsc-link-color--active: var(--ds-color-neutral-text-subtle);
+    --dsc-link-color--hover: var(--ds-color-neutral-text-subtle);
+    --dsc-link-color--visited: var(--ds-global-purple-12);
+    --dsc-link-color: var(--ds-color-neutral-text-default);
+  }
 
-.ds-link:visited {
-  color: var(--dsc-link-color-visited);
-  text-decoration: none;
-}
+  /**
+    * States
+    */
+  &:visited {
+    color: var(--dsc-link-color--visited);
+  }
 
-.ds-link:hover {
-  color: var(--dsc-link-color-hover);
-  text-decoration-thickness: max(2px, 0.125rem, 0.12em);
-}
+  @media (hover: hover) and (pointer: fine) { /* Only use hover for non-touch devices to prevent sticky-hovering */
+    &:hover {
+      color: var(--dsc-link-color--hover);
+      text-decoration-thickness: var(--dsc-link-text-decoration-thickness--hover);
+    }
+  }
 
-.ds-link:focus-visible {
-  color: var(--dsc-link-color-focus);
-  background: var(--dsc-link-color-focus-background);
-  outline: none;
-}
+  &:focus-visible {
+    background: var(--dsc-link-background--focus);
+    color: var(--dsc-link-color--focus);
+  }
 
-.ds-link:active {
-  color: var(--dsc-link-color-active);
-  background: var(--dsc-link-color-active-background);
-  border-radius: min(0.25rem, var(--ds-border-radius-md));
-  outline: none;
+  &:active {
+    background: var(--dsc-link-background--active);
+    color: var(--dsc-link-color--active);
+  }
 }

package/list.css

@@ -1,22 +1,32 @@
 .ds-list {
+  --dsc-list-font-size: var(--ds-font-size-5);
   --dsc-list-padding-left: var(--ds-spacing-6);
+  --dsc-list-spacing: var(--ds-spacing-3);
+  --dsc-list-spacing-nested: var(--ds-spacing-2);
 
+  font-size: var(--dsc-list-font-size); /* Replace with composes paragraph-md */
+  line-height: var(--ds-line-height-md); /* Replace with composes paragraph-md */
+  margin: 0;
   padding-left: var(--dsc-list-padding-left);
-}
 
-.ds-list--sm {
-  --dsc-list-padding-left: var(--ds-spacing-4);
-}
+  & > li + li { margin-top: var(--dsc-list-spacing) }
+  & > li > :is(ol, ul) { --dsc-list-spacing: var(--dsc-list-spacing-nested) } /* Shrink spacing a bit when nested */
 
-.ds-list--md,
-.ds-list--lg {
-  --dsc-list-padding-left: var(--ds-spacing-6);
-}
+  /* Add zero-width space to fix VoiceOver: https://gerardkcohen.me/writing/2017/voiceover-list-style-type.html
+   * This can also be acheived by using role="list" + role="listitem", but is nice to solve with CSS avoiding cluttered HTML
+   */
+  & > li::before {
+    content: "\200B";
+    position: absolute;
+  }
 
-.ds-list__item {
-  margin-bottom: var(--ds-spacing-2);
-}
+  &[data-size="sm"] {
+    --dsc-list-padding-left: var(--ds-spacing-4);
+    --dsc-list-font-size: var(--ds-font-size-4); /* Replace with composes paragraph-sm */
+  }
 
-.ds-list__item > .ds-list {
-  margin-top: var(--ds-spacing-2);
+  &[data-size="lg"] {
+    --dsc-list-font-size: var(--ds-font-size-6); /* Replace with composes paragraph-sm */
+    --dsc-list-spacing: var(--ds-spacing-4);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-css",
-  "version": "1.0.0-next.32",
+  "version": "1.0.0-next.33",
   "description": "CSS for Designsystemet",
   "author": "Designsystemet team",
   "repository": {
@@ -8,7 +8,10 @@
     "url": "git+https://github.com/digdir/designsystemet.git"
   },
   "license": "MIT",
-  "main": "./dist/index.css",
+  "exports": {
+    ".": "./dist/index.css",
+    "./*": "./dist/*"
+  },
   "files": [
     "dist",
     "*.css"

package/pagination.css

@@ -1,67 +1,48 @@
 .ds-pagination {
-  --dsc-pagination-listitem-margin: var(--ds-spacing-4);
+  --dsc-pagination-gap: var(--ds-spacing-4);
   --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
-  --dsc-pagination-chevron-margin: var(--ds-spacing-2);
+  --dsc-pagination-chevron-size: var(--ds-sizing-6);
 
-  list-style-type: none;
   display: flex;
-  padding: 0;
+  flex-wrap: wrap;
+  gap: var(--dsc-pagination-gap);
+  list-style: none;
   margin: 0;
-  position: relative;
-  width: fit-content;
-}
-
-.ds-pagination--hidden {
-  visibility: hidden;
-}
-
-.ds-pagination--sm {
-  --dsc-pagination-chevron-margin: var(--ds-spacing-2);
-}
-
-.ds-pagination--md {
-  --dsc-pagination-chevron-margin: var(--ds-spacing-2);
-}
-
-.ds-pagination--lg {
-  --dsc-pagination-chevron-margin: var(--ds-spacing-2);
-}
-
-.ds-pagination li:first-child {
-  margin-right: var(--dsc-pagination-chevron-margin);
-}
-
-.ds-pagination li:last-child {
-  margin-left: var(--dsc-pagination-chevron-margin);
-}
-
-.ds-pagination__item {
-  flex: 1;
-  margin-right: var(--dsc-pagination-listitem-margin);
-}
-
-.ds-pagination--sm .ds-pagination__item {
-  --dsc-pagination-listitem-margin: var(--ds-spacing-2);
-  --dsc-pagination-ellipsis-width: var(--ds-sizing-10);
-}
-
-.ds-pagination--md .ds-pagination__item {
-  --dsc-pagination-listitem-margin: var(--ds-spacing-4);
-  --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
-}
-
-.ds-pagination--lg .ds-pagination__item {
-  --dsc-pagination-listitem-margin: var(--ds-spacing-6);
-  --dsc-pagination-ellipsis-width: var(--ds-sizing-14);
-}
-
-.ds-pagination__item.ds-pagination--compact {
-  --dsc-pagination-listitem-margin: var(--ds-spacing-0);
-  --dsc-pagination-chevron-margin: var(--ds-spacing-1);
-}
+  padding: 0;
 
-.ds-pagination__ellipsis {
-  margin-top: 0.5em;
-  text-align: center;
-  width: var(--dsc-pagination-ellipsis-width);
+  /* Style ellipsis When not containing interactive element */
+  & > li:not(:has(a, button)) {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    min-width: var(--dsc-pagination-ellipsis-width);
+  }
+
+  & > li:first-child > ::before,
+  & > li:last-child > ::after {
+    background: currentcolor;
+    content: '';
+    height: var(--dsc-pagination-chevron-size);
+    mask: center/contain no-repeat
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
+    width: var(--dsc-pagination-chevron-size);
+  }
+
+  & > li:first-child > ::before {
+    rotate: 180deg;
+  }
+
+  &[data-size='sm'] {
+    --dsc-pagination-gap: var(--ds-spacing-2);
+    --dsc-pagination-ellipsis-width: var(--ds-sizing-10);
+  }
+
+  &[data-size='lg'] {
+    --dsc-pagination-gap: var(--ds-spacing-6);
+    --dsc-pagination-ellipsis-width: var(--ds-sizing-14);
+  }
+
+  &[data-compact] {
+    --dsc-pagination-gap: var(--ds-spacing-0);
+  }
 }

package/popover.css

@@ -1,84 +1,76 @@
 .ds-popover {
-  --dsc-popover-border: 1px solid;
+  --dsc-popover-arrow-size: var(--ds-spacing-2);
   --dsc-popover-background: var(--ds-color-neutral-background-default);
+  --dsc-popover-border-radius: min(1rem, var(--ds-border-radius-md));
+  --dsc-popover-border: 1px solid var(--ds-color-neutral-border-default);
   --dsc-popover-color: var(--ds-color-neutral-text-default);
-  --dsc-popover-border-color: var(--ds-color-neutral-border-default);
-  --dsc-popover-padding: var(--ds-spacing-3);
   --dsc-popover-max-width: 300px;
-  --dsc-popover-border-radius: min(1rem, var(--ds-border-radius-md));
+  --dsc-popover-padding: var(--ds-spacing-3) var(--ds-spacing-4);
 
-  z-index: 1500;
   background: var(--dsc-popover-background);
-  color: var(--dsc-popover-color);
-  padding: var(--dsc-popover-padding);
-  border: var(--dsc-popover-border);
   border-radius: var(--dsc-popover-border-radius);
-  border-color: var(--dsc-popover-border-color);
+  border: var(--dsc-popover-border);
+  box-sizing: border-box;
+  color: var(--dsc-popover-color);
+  inset: 0 auto auto 0;
   max-width: var(--dsc-popover-max-width);
-}
-
-.ds-popover--sm {
-  --dsc-popover-padding: var(--ds-spacing-2) var(--ds-spacing-3);
-}
-
-.ds-popover--md {
-  --dsc-popover-padding: var(--ds-spacing-3) var(--ds-spacing-4);
-}
+  overflow: visible;
+  padding: var(--dsc-popover-padding);
+  position: fixed;
 
-.ds-popover--lg {
-  --dsc-popover-padding: var(--ds-spacing-3) var(--ds-spacing-5);
-}
+  &::before {
+    background: var(--dsc-popover-background);
+    border: inherit;
+    border-left-color: transparent;
+    border-top-color: transparent;
+    box-sizing: border-box;
+    content: '';
+    height: var(--dsc-popover-arrow-size);
+    left: var(--ds-popover-arrow-x);
+    position: absolute;
+    top: var(--ds-popover-arrow-y);
+    translate: -50% -50%;
+    width: var(--dsc-popover-arrow-size);
+  }
 
-.ds-popover--default {
-  --dsc-popover-background: var(--ds-color-neutral-background-default);
-  --dsc-popover-border-color: var(--ds-color-neutral-border-default);
-  --dsc-popover-color: var(--ds-color-neutral-text-default);
-}
-
-.ds-popover--info {
-  --dsc-popover-background: var(--ds-color-info-surface-default);
-  --dsc-popover-border-color: var(--ds-color-info-border-default);
-  --dsc-popover-color: var(--ds-color-info-text-default);
-}
+  &[data-size="sm"] { --dsc-popover-padding: var(--ds-spacing-2) var(--ds-spacing-3) }
+  &[data-size="lg"] { --dsc-popover-padding: var(--ds-spacing-3) var(--ds-spacing-5) }
 
-.ds-popover--warning {
-  --dsc-popover-background: var(--ds-color-warning-surface-default);
-  --dsc-popover-border-color: var(--ds-color-warning-border-default);
-  --dsc-popover-color: var(--ds-color-warning-text-default);
-}
+  &[data-placement="top"]::before {
+    top: 100%;
+    rotate: 45deg;
+  }
 
-.ds-popover--danger {
-  --dsc-popover-background: var(--ds-color-danger-surface-default);
-  --dsc-popover-border-color: var(--ds-color-danger-border-default);
-  --dsc-popover-color: var(--ds-color-danger-text-default);
-}
+  &[data-placement="left"]::before {
+    left: 100%;
+    rotate: -45deg;
+  }
 
-.ds-popover__arrow {
-  position: absolute;
-  background: var(--dsc-popover-background);
-  transform: rotate(45deg);
-}
+  &[data-placement="right"]::before {
+    left: 0;
+    rotate: 135deg;
+  }
 
-.ds-popover__arrow.ds-popover__arrow--top {
-  border-top: var(--dsc-popover-border);
-  border-left: var(--dsc-popover-border);
-  border-color: inherit;
-}
+  &[data-placement="bottom"]::before {
+    top: 0;
+    rotate: -135deg;
+  }
 
-.ds-popover__arrow.ds-popover__arrow--bottom {
-  border-bottom: var(--dsc-popover-border);
-  border-right: var(--dsc-popover-border);
-  border-color: inherit;
-}
+  &[data-variant="info"] {
+    --dsc-popover-background: var(--ds-color-info-surface-default);
+    --dsc-popover-border: 1px solid var(--ds-color-info-border-default);
+    --dsc-popover-color: var(--ds-color-info-text-default);
+  }
 
-.ds-popover__arrow.ds-popover__arrow--right {
-  border-top: var(--dsc-popover-border);
-  border-right: var(--dsc-popover-border);
-  border-color: inherit;
-}
+  &[data-variant="warning"] {
+    --dsc-popover-background: var(--ds-color-warning-surface-default);
+    --dsc-popover-border: 1px solid var(--ds-color-warning-border-default);
+    --dsc-popover-color: var(--ds-color-warning-text-default);
+  }
 
-.ds-popover__arrow.ds-popover__arrow--left {
-  border-bottom: var(--dsc-popover-border);
-  border-left: var(--dsc-popover-border);
-  border-color: inherit;
+  &[data-variant="danger"] {
+    --dsc-popover-background: var(--ds-color-danger-surface-default);
+    --dsc-popover-border: 1px solid var(--ds-color-danger-border-default);
+    --dsc-popover-color: var(--ds-color-danger-text-default);
+  }
 }