@dnb/eufemia 9.23.0-beta.3 → 9.23.0-beta.4

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to @dnb/eufemia will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.23.0-beta.4](https://github.com/dnbexperience/eufemia/compare/v9.23.0-beta.3...v9.23.0-beta.4) (2022-02-21)
+
+
+### Bug Fixes
+
+* **Dropdown:** disabled tertiary dropdown ([c1b4c4b](https://github.com/dnbexperience/eufemia/commit/c1b4c4b58511a7055e95ac32e0ed849e1838f075))
+* **Styles:** ensure independent styling packages have declared their dependencies ([8b3c230](https://github.com/dnbexperience/eufemia/commit/8b3c230b4e0c91d96695791731b61a6b8641c9db))
+
+
+### Features
+
+* **esm:** remove esm directory in package build ([f189b62](https://github.com/dnbexperience/eufemia/commit/f189b62dfcb620f0d0f7f8673c781c3e08060d32))
+* **Icon:** add examples for color property ([#1275](https://github.com/dnbexperience/eufemia/issues/1275)) ([67f8121](https://github.com/dnbexperience/eufemia/commit/67f8121485bbb419c6cc5f104023ccb619aeac73))
+* **Tabs:** Enhance parent width handling and remove auto edge detection ([d002f2c](https://github.com/dnbexperience/eufemia/commit/d002f2cada9a31d1923e6507d2015a06b751be71))
+* **TypeScript:** remove original ts/tsx files and only leave type definition files ([#1292](https://github.com/dnbexperience/eufemia/issues/1292)) ([79bdfb4](https://github.com/dnbexperience/eufemia/commit/79bdfb404dd9ebd484fff4770e849e16b6bbff2e))
+
 # [9.23.0-beta.3](https://github.com/dnbexperience/eufemia/compare/v9.23.0-beta.2...v9.23.0-beta.3) (2022-02-17)
 
 

package/cjs/components/accordion/style/dnb-accordion.css

@@ -18,6 +18,98 @@
  * Document Reset
  *
  */
+/*
+* DNB icon
+*
+*/
+/**
+ * This file is only used to make components independent
+ * so that they can get imported individually, without the core styles
+ *
+ */
+/*
+ * Utilities
+ */
+/*
+ * Scopes
+ *
+ */
+/*
+ * Document Reset
+ *
+ */
+/*
+* Icon component
+*
+*/
+.dnb-icon {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 1rem;
+  line-height: 1rem;
+  color: inherit;
+  width: 1em;
+  height: 1em; }
+  .dnb-icon img,
+  .dnb-icon svg {
+    width: inherit;
+    height: inherit;
+    shape-rendering: geometricPrecision;
+    vertical-align: top; }
+  .dnb-icon svg[width='100%'] {
+    width: inherit; }
+  .dnb-icon svg[height='100%'] {
+    height: inherit; }
+  .dnb-icon--inherit-color svg:not([fill]),
+  .dnb-icon--inherit-color svg [fill] {
+    fill: currentColor; }
+  .dnb-icon--inherit-color svg [stroke] {
+    stroke: currentColor; }
+  .dnb-icon--small {
+    font-size: 0.75rem; }
+  .dnb-icon--default {
+    font-size: 1rem; }
+  .dnb-icon--medium {
+    font-size: 1.5rem; }
+  .dnb-icon--large {
+    font-size: 2rem; }
+  .dnb-icon--x-large {
+    font-size: 2.5rem; }
+  .dnb-icon--xx-large {
+    font-size: 3rem; }
+  .dnb-icon--custom-size {
+    width: auto;
+    height: auto; }
+  .dnb-icon--auto {
+    font-size: 1em; }
+  .dnb-icon--auto > .dnb-icon--wrapper {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center; }
+  h1 .dnb-icon,
+  h2 .dnb-icon,
+  h3 .dnb-icon,
+  h4 .dnb-icon,
+  h5 .dnb-icon,
+  h6 .dnb-icon {
+    vertical-align: middle; }
+  .dnb-icon.dnb-skeleton {
+    color: #ebebeb !important;
+    color: var(--skeleton-color) !important; }
+    .dnb-icon.dnb-skeleton::before, .dnb-icon.dnb-skeleton::after {
+      content: none !important; }
+  @media screen and (-ms-high-contrast: none) {
+    .dnb-icon {
+      -webkit-box-flex: 0;
+          -ms-flex: none;
+              flex: none; } }
+
 .dnb-accordion {
   font-family: 'DNB', sans-serif;
   font-family: var(--font-family-default);

package/cjs/components/accordion/style/dnb-accordion.min.css

@@ -1 +1 @@
-.dnb-accordion{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-accordion *,.dnb-accordion :after,.dnb-accordion :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-accordion :after,.dnb-accordion :before{text-decoration:inherit;vertical-align:inherit}:root{--accordion-border-width:0.0625rem;--accordion-border-radius:0.25rem;--accordion-easing:cubic-bezier(0.42,0,0,1)}.dnb-accordion{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-size:1rem;font-size:var(--font-size-small);line-height:1.5rem;line-height:var(--line-height-basis);position:relative}.dnb-accordion,.dnb-accordion__header{display:-webkit-box;display:-ms-flexbox;display:flex}.dnb-accordion__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:.0625rem solid transparent;border:var(--accordion-border-width) solid transparent;border-radius:.25rem;border-radius:var(--accordion-border-radius);cursor:pointer;outline:none}.dnb-accordion__header:focus{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dnb-accordion__header *{pointer-events:none}.dnb-accordion__header--prevent-click{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dnb-accordion__header__wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:1.5rem 0 1.5rem 2rem;width:100%}.dnb-accordion__header--description .dnb-accordion__header__wrapper{margin:1rem 0 1rem 2rem}.dnb-accordion__header__icon+.dnb-accordion__header__wrapper{margin-left:0;margin-right:2rem}.dnb-accordion__header__container{margin:0 1rem}.dnb-accordion__header__icon{-ms-flex-item-align:start;align-self:flex-start;font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);margin:1.5rem 1rem;-webkit-transition:-webkit-transform .4s cubic-bezier(.42,0,0,1);transition:-webkit-transform .4s cubic-bezier(.42,0,0,1);transition:transform .4s cubic-bezier(.42,0,0,1);transition:transform .4s cubic-bezier(.42,0,0,1),-webkit-transform .4s cubic-bezier(.42,0,0,1);-webkit-transition:-webkit-transform .4s var(--accordion-easing);transition:-webkit-transform .4s var(--accordion-easing);transition:transform .4s var(--accordion-easing);transition:transform .4s var(--accordion-easing),-webkit-transform .4s var(--accordion-easing)}.dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:1rem}.dnb-accordion__header__icon--right{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.dnb-accordion__header__icon--right .dnb-accordion__header__icon{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.dnb-accordion__header__icon--right .dnb-accordion__header__container{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper{-webkit-box-ordinal-group:3;-ms-flex-order:2;margin-left:1rem;margin-right:1rem;order:2}.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.dnb-accordion__header__icon--right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}.dnb-accordion__header__title{font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis)}.dnb-accordion__header__description{font-size:1rem;font-size:var(--font-size-small);font-weight:400;font-weight:var(--font-weight-basis);line-height:1.25rem;line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--expanded .dnb-accordion__header__icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.dnb-accordion--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion__header__icon{-webkit-transition-duration:1ms!important;transition-duration:1ms!important}.dnb-accordion__content{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;-webkit-transition:height .4s cubic-bezier(.42,0,0,1),opacity .6s cubic-bezier(.42,0,0,1);transition:height .4s cubic-bezier(.42,0,0,1),opacity .6s cubic-bezier(.42,0,0,1);-webkit-transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);visibility:visible;will-change:height}.dnb-accordion__content--hidden{height:0;opacity:0;visibility:hidden}.dnb-accordion__content--is-animating{overflow:hidden}.dnb-accordion__content__inner{margin-top:1rem}.dnb-accordion__content__inner--remove-content{display:none}.dnb-accordion-group--single-container{-webkit-transition:min-height 1s cubic-bezier(.42,0,0,1);transition:min-height 1s cubic-bezier(.42,0,0,1);-webkit-transition:min-height 1s var(--accordion-easing);transition:min-height 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__header__icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;-webkit-transition:opacity 1s cubic-bezier(.42,0,0,1);transition:opacity 1s cubic-bezier(.42,0,0,1);-webkit-transition:opacity 1s var(--accordion-easing);transition:opacity 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}}.dnb-accordion--no-animation .dnb-accordion__content,html[data-visual-test] .dnb-accordion__content{-webkit-transition-duration:1ms!important;transition-duration:1ms!important}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion-group__children{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}
+.dnb-icon{color:inherit;display:inline-block;font-size:1rem;height:1em;line-height:1rem;vertical-align:middle;width:1em}.dnb-icon img,.dnb-icon svg{shape-rendering:geometricPrecision;height:inherit;vertical-align:top;width:inherit}.dnb-icon svg[width="100%"]{width:inherit}.dnb-icon svg[height="100%"]{height:inherit}.dnb-icon--inherit-color svg:not([fill]),.dnb-icon--inherit-color svg [fill]{fill:currentColor}.dnb-icon--inherit-color svg [stroke]{stroke:currentColor}.dnb-icon--small{font-size:.75rem}.dnb-icon--default{font-size:1rem}.dnb-icon--medium{font-size:1.5rem}.dnb-icon--large{font-size:2rem}.dnb-icon--x-large{font-size:2.5rem}.dnb-icon--xx-large{font-size:3rem}.dnb-icon--custom-size{height:auto;width:auto}.dnb-icon--auto{font-size:1em}.dnb-icon--auto>.dnb-icon--wrapper{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;justify-content:center}h1 .dnb-icon,h2 .dnb-icon,h3 .dnb-icon,h4 .dnb-icon,h5 .dnb-icon,h6 .dnb-icon{vertical-align:middle}.dnb-icon.dnb-skeleton{color:#ebebeb!important;color:var(--skeleton-color)!important}.dnb-icon.dnb-skeleton:after,.dnb-icon.dnb-skeleton:before{content:none!important}@media screen and (-ms-high-contrast:none){.dnb-icon{-webkit-box-flex:0;-ms-flex:none;flex:none}}.dnb-accordion{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-accordion *,.dnb-accordion :after,.dnb-accordion :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-accordion :after,.dnb-accordion :before{text-decoration:inherit;vertical-align:inherit}:root{--accordion-border-width:0.0625rem;--accordion-border-radius:0.25rem;--accordion-easing:cubic-bezier(0.42,0,0,1)}.dnb-accordion{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;font-size:1rem;font-size:var(--font-size-small);line-height:1.5rem;line-height:var(--line-height-basis);position:relative}.dnb-accordion,.dnb-accordion__header{display:-webkit-box;display:-ms-flexbox;display:flex}.dnb-accordion__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:.0625rem solid transparent;border:var(--accordion-border-width) solid transparent;border-radius:.25rem;border-radius:var(--accordion-border-radius);cursor:pointer;outline:none}.dnb-accordion__header:focus{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dnb-accordion__header *{pointer-events:none}.dnb-accordion__header--prevent-click{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dnb-accordion__header__wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:1.5rem 0 1.5rem 2rem;width:100%}.dnb-accordion__header--description .dnb-accordion__header__wrapper{margin:1rem 0 1rem 2rem}.dnb-accordion__header__icon+.dnb-accordion__header__wrapper{margin-left:0;margin-right:2rem}.dnb-accordion__header__container{margin:0 1rem}.dnb-accordion__header__icon{-ms-flex-item-align:start;align-self:flex-start;font-size:1rem;font-size:var(--font-size-small);line-height:1.25rem;line-height:var(--line-height-small);margin:1.5rem 1rem;-webkit-transition:-webkit-transform .4s cubic-bezier(.42,0,0,1);transition:-webkit-transform .4s cubic-bezier(.42,0,0,1);transition:transform .4s cubic-bezier(.42,0,0,1);transition:transform .4s cubic-bezier(.42,0,0,1),-webkit-transform .4s cubic-bezier(.42,0,0,1);-webkit-transition:-webkit-transform .4s var(--accordion-easing);transition:-webkit-transform .4s var(--accordion-easing);transition:transform .4s var(--accordion-easing);transition:transform .4s var(--accordion-easing),-webkit-transform .4s var(--accordion-easing)}.dnb-accordion__header--description .dnb-accordion__header__icon{margin-top:1rem}.dnb-accordion__header__icon--right{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.dnb-accordion__header__icon--right .dnb-accordion__header__icon{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.dnb-accordion__header__icon--right .dnb-accordion__header__container{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper{-webkit-box-ordinal-group:3;-ms-flex-order:2;margin-left:1rem;margin-right:1rem;order:2}.dnb-accordion__header__icon--right .dnb-accordion__header__wrapper+.dnb-accordion__header__container{margin-right:0}.dnb-accordion__header__icon--right .dnb-accordion__header__container+.dnb-accordion__header__wrapper{margin-left:0}.dnb-accordion__header__title{font-size:1.125rem;font-size:var(--font-size-basis);line-height:1.5rem;line-height:var(--line-height-basis)}.dnb-accordion__header__description{font-size:1rem;font-size:var(--font-size-small);font-weight:400;font-weight:var(--font-weight-basis);line-height:1.25rem;line-height:var(--line-height-small)}.dnb-accordion__header__description+.dnb-accordion__header__title,.dnb-accordion__header__title+.dnb-accordion__header__description{margin-top:.25rem}.dnb-accordion--expanded .dnb-accordion__header__icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.dnb-accordion--no-animation .dnb-accordion__header__icon,html[data-visual-test] .dnb-accordion__header__icon{-webkit-transition-duration:1ms!important;transition-duration:1ms!important}.dnb-accordion__content{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;-webkit-transition:height .4s cubic-bezier(.42,0,0,1),opacity .6s cubic-bezier(.42,0,0,1);transition:height .4s cubic-bezier(.42,0,0,1),opacity .6s cubic-bezier(.42,0,0,1);-webkit-transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);transition:height .4s var(--accordion-easing),opacity .6s var(--accordion-easing);visibility:visible;will-change:height}.dnb-accordion__content--hidden{height:0;opacity:0;visibility:hidden}.dnb-accordion__content--is-animating{overflow:hidden}.dnb-accordion__content__inner{margin-top:1rem}.dnb-accordion__content__inner--remove-content{display:none}.dnb-accordion-group--single-container{-webkit-transition:min-height 1s cubic-bezier(.42,0,0,1);transition:min-height 1s cubic-bezier(.42,0,0,1);-webkit-transition:min-height 1s var(--accordion-easing);transition:min-height 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion{max-width:60rem;position:static}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion__header{width:40%}.dnb-accordion-group--single-container .dnb-accordion__header__icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.dnb-accordion-group--single-container .dnb-accordion__content{margin-left:1rem;-webkit-transition:opacity 1s cubic-bezier(.42,0,0,1);transition:opacity 1s cubic-bezier(.42,0,0,1);-webkit-transition:opacity 1s var(--accordion-easing);transition:opacity 1s var(--accordion-easing)}.dnb-accordion-group--single-container .dnb-accordion__content__inner{margin-top:0}}.dnb-accordion--no-animation .dnb-accordion__content,html[data-visual-test] .dnb-accordion__content{-webkit-transition-duration:1ms!important;transition-duration:1ms!important}.dnb-accordion-group--single-container .dnb-accordion-group__children{max-width:60rem}@media screen and (min-width:40em){.dnb-accordion-group--single-container .dnb-accordion-group__children{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content{position:absolute;right:0;top:0;width:60%;z-index:10}}

package/cjs/components/accordion/style/dnb-accordion.scss

@@ -5,6 +5,9 @@
 
 @import '../../../style/components/imports.scss';
 
+// import dependencies
+@import '../../icon/style/dnb-icon.scss';
+
 .dnb-accordion {
   @include componentReset();
 }