@dso-toolkit/core 83.1.0 → 84.0.0

package/dist/cjs/dso-list-button.cjs.entry.js

@@ -1,9 +1,304 @@
 'use strict';
 
-var index = require('./index-DvLsepiK.js');
+var index = require('./index-DDpKNH_F.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 
-const listButtonCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  border: 0;\n  overflow: hidden;\n  clip-path: inset(0);\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon {\n  margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n.dso-tertiary {\n  cursor: pointer;\n}\n\n.dso-input-number {\n  align-items: center;\n  display: flex;\n}\n.dso-input-number .dso-input-step-counter {\n  text-align: center;\n  inline-size: 1.5rem;\n  font-size: 14px;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n}\n.dso-button-group.dso-disabled > * {\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-inline-start-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  opacity: 1;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n}\n.dso-button-group .dso-list-button {\n  padding-inline-end: 15px;\n}\n\n.dso-list-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n.dso-list-button {\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding-block: 15px;\n  padding-inline: 15px 47px;\n  position: relative;\n  text-align: start;\n  white-space: normal;\n  inline-size: 100%;\n  cursor: pointer;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  opacity: 1;\n}\n.dso-list-button dso-selectable:not(:last-child) {\n  margin-block-end: 0;\n}\n.dso-list-button .dso-selectable-container label {\n  font-weight: 700;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-inline-end: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button label {\n  cursor: inherit;\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel,\n.dso-list-button .subcontent {\n  font-weight: 400;\n  inline-size: 100%;\n  padding-inline-start: 32px;\n}\n.dso-list-button dso-icon {\n  block-size: 24px;\n  color: #39870c;\n  inset-block-start: 15px;\n  inset-inline-end: 15px;\n  inline-size: 24px;\n  break-before: page;\n  position: absolute;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    inline-size: 0;\n  }\n}";
+const listButtonCss = () => `*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+}
+
+.sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  border: 0;
+  overflow: hidden;
+  clip-path: rect(0 0 0 0);
+}
+
+.dso-tertiary {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-block-end: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: start;
+  user-select: none;
+  vertical-align: middle;
+}
+.dso-tertiary:focus, .dso-tertiary:focus-visible {
+  outline-offset: 2px;
+}
+.dso-tertiary:active {
+  outline: 0;
+}
+.dso-tertiary {
+  border: 0;
+  color: #39870c;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+}
+.dso-tertiary[disabled] {
+  color: #afcf9d;
+}
+.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {
+  color: #39870c;
+}
+.dso-tertiary:not([disabled]):hover {
+  color: #275937;
+  text-decoration: underline;
+  text-underline-position: under;
+}
+.dso-tertiary:not([disabled]):active {
+  color: #173521;
+}
+.dso-tertiary.dso-align {
+  line-height: calc(1.5em - 1px);
+  padding-block: 11px;
+  padding-inline: 0;
+  position: relative;
+}
+.dso-tertiary.dso-truncate {
+  max-inline-size: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dso-tertiary.dso-spinner-left::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: middle;
+  inline-size: 24px;
+  margin-inline-end: 8px;
+}
+.dso-tertiary.dso-spinner-right::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  block-size: 24px;
+  vertical-align: middle;
+  inline-size: 24px;
+  margin-inline-start: 8px;
+}
+.dso-tertiary dso-icon + span:not(.sr-only),
+.dso-tertiary span:not(.sr-only) + dso-icon {
+  margin-inline-start: 8px;
+}
+.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
+.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
+.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
+.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
+  margin-inline-start: 0;
+}
+.dso-tertiary dso-icon,
+.dso-tertiary span {
+  vertical-align: middle;
+}
+.dso-tertiary {
+  cursor: pointer;
+}
+
+.dso-input-number {
+  align-items: center;
+  display: flex;
+}
+.dso-input-number .dso-input-step-counter {
+  text-align: center;
+  inline-size: 1.5rem;
+  font-size: 14px;
+}
+
+.dso-button-group {
+  display: flex;
+  flex-direction: row;
+}
+.dso-button-group.dso-disabled > * {
+  background-color: #fff;
+  border-color: #e5e5e5;
+  color: #666;
+}
+.dso-button-group.dso-disabled > * {
+  pointer-events: none;
+}
+.dso-button-group > * {
+  border-radius: 0;
+}
+.dso-button-group > *:first-child {
+  border-radius: 4px 0 0 4px;
+}
+.dso-button-group > *:not(:first-child) {
+  border-inline-start-style: none !important;
+}
+.dso-button-group > *:last-child {
+  border-radius: 0 4px 4px 0;
+}
+.dso-button-group > *:only-child {
+  border-radius: 4px;
+}
+.dso-button-group > .dso-input-number {
+  border-style: solid;
+  border-width: 1px;
+  flex-wrap: nowrap;
+  padding-block: 0;
+  padding-inline: 16px;
+}
+.dso-button-group > .dso-input-number {
+  background-color: #fff;
+  border-color: #ccc;
+  color: #191919;
+}
+@media screen and (max-width: 767px) {
+  .dso-button-group > .dso-input-number {
+    justify-content: center;
+  }
+}
+.dso-button-group > *:hover + .dso-input-number,
+.dso-button-group > *:focus + .dso-input-number {
+  background-color: #fff;
+  border-color: #d7e7ce;
+  color: #191919;
+}
+.dso-button-group > *.dso-selected + .dso-input-number {
+  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;
+}
+.dso-button-group > *.dso-selected + .dso-input-number {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #191919;
+}
+.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,
+.dso-button-group > *.active + .dso-input-number,
+.dso-button-group > *.active + .dso-input-number:hover {
+  background-color: #fff;
+  border-color: #d7e7ce;
+  color: #191919;
+}
+.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,
+.dso-button-group > *[disabled] + .dso-input-number,
+.dso-button-group > *[disabled] + .dso-input-number:hover {
+  opacity: 1;
+}
+.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,
+.dso-button-group > *[disabled] + .dso-input-number,
+.dso-button-group > *[disabled] + .dso-input-number:hover {
+  background-color: #fff;
+  border-color: #ccc;
+  color: #666;
+}
+.dso-button-group .dso-list-button {
+  padding-inline-end: 15px;
+}
+
+.dso-list-button {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-block-end: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: start;
+  user-select: none;
+  vertical-align: middle;
+}
+.dso-list-button:focus, .dso-list-button:focus-visible {
+  outline-offset: 2px;
+}
+.dso-list-button:active {
+  outline: 0;
+}
+.dso-list-button {
+  background-color: #fff;
+  border-color: #ccc;
+  color: #191919;
+}
+.dso-list-button {
+  border-radius: 4px;
+  border-width: 1px;
+  border-style: solid;
+  font-weight: 600;
+  padding-block: 15px;
+  padding-inline: 15px 47px;
+  position: relative;
+  text-align: start;
+  white-space: normal;
+  inline-size: 100%;
+  cursor: pointer;
+}
+.dso-list-button:hover, .dso-list-button:focus {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #191919;
+}
+.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {
+  background-color: #fff;
+  border-color: #d7e7ce;
+  color: #191919;
+}
+.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {
+  background-color: #fff;
+  border-color: #ccc;
+  color: #666;
+}
+.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {
+  opacity: 1;
+}
+.dso-list-button dso-selectable:not(:last-child) {
+  margin-block-end: 0;
+}
+.dso-list-button .dso-selectable-container label {
+  font-weight: 700;
+}
+.dso-list-button.dso-selected {
+  border-color: #39870c;
+  border-width: 1px;
+  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;
+}
+@media screen and (min-width: 768px) {
+  .dso-list-button.dso-selected.dso-single-count {
+    border-inline-end: 0;
+    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;
+  }
+}
+.dso-list-button label {
+  cursor: inherit;
+}
+.dso-list-button > span {
+  display: block;
+}
+.dso-list-button .dso-sublabel,
+.dso-list-button .subcontent {
+  font-weight: 400;
+  inline-size: 100%;
+  padding-inline-start: 32px;
+}
+.dso-list-button dso-icon {
+  block-size: 24px;
+  color: #39870c;
+  inset-block-start: 15px;
+  inset-inline-end: 15px;
+  inline-size: 24px;
+  break-before: page;
+  position: absolute;
+}
+@media screen and (max-width: 767px) {
+  .dso-list-button.dso-selected.dso-single-count::after {
+    inline-size: 0;
+  }
+}`;
 
 const ListButton = class {
     constructor(hostRef) {
@@ -79,9 +374,7 @@ const ListButton = class {
     }
     get host() { return index.getElement(this); }
 };
-ListButton.style = listButtonCss;
+ListButton.style = listButtonCss();
 
 exports.dso_list_button = ListButton;
 //# sourceMappingURL=dso-list-button.entry.cjs.js.map
-
-//# sourceMappingURL=dso-list-button.cjs.entry.js.map

package/dist/cjs/dso-logo.cjs.entry.js

@@ -1,9 +1,147 @@
 'use strict';
 
-var index = require('./index-DvLsepiK.js');
+var index = require('./index-DDpKNH_F.js');
 var isModifiedEvent = require('./is-modified-event-Dh9YsHw8.js');
 
-const logoCss = ":host {\n  block-size: var(--_dso-logo-block-size, 3rem);\n  display: grid;\n  grid-template-areas: \"target wordmark label\";\n  grid-template-columns: repeat(3, max-content);\n  grid-template-rows: 100%;\n  gap: 16px;\n  font-size: 1.5rem;\n  font-weight: 500;\n  align-items: center;\n  container-type: size;\n  container-name: logo;\n}\n:host .logo-url,\n:host .logo-label-url {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  text-decoration: none;\n}\n:host .logo-url:hover, :host .logo-url:focus-visible, :host .logo-url:active,\n:host .logo-label-url:hover,\n:host .logo-label-url:focus-visible,\n:host .logo-label-url:active {\n  text-decoration: underline;\n}\n:host .logo-url, :host .logo-url:hover, :host .logo-url:focus, :host .logo-url:visited,\n:host .logo-label-url,\n:host .logo-label-url:hover,\n:host .logo-label-url:focus,\n:host .logo-label-url:visited {\n  color: #275937;\n}\n\n:host([logo-url]:not([logo-url=\"\"])[ribbon]:not([ribbon=\"\"])) {\n  grid-template-areas: \"targetwordmark label\";\n}\n:host([logo-url]:not([logo-url=\"\"])[ribbon]:not([ribbon=\"\"])) .logo-url,\n:host([logo-url]:not([logo-url=\"\"])[ribbon]:not([ribbon=\"\"])) .logo-ribbon {\n  grid-area: targetwordmark;\n}\n\n.logo-label-url {\n  grid-area: label;\n}\n\n.logo-target {\n  grid-area: target;\n  max-block-size: 48px;\n  max-inline-size: 48px;\n  inline-size: 100%;\n  display: block;\n  aspect-ratio: 1/1;\n}\n\n.logo-wordmark {\n  grid-area: wordmark;\n}\n\n@container logo (max-height: 47px) {\n  .logo-wordmark,\n  .logo-label {\n    font-size: 50cqb;\n    line-height: 1;\n  }\n}\n.logo-wordmark-omgevings {\n  color: #39870c;\n}\n\n.logo-wordmark-loket {\n  color: #275937;\n}\n\n.logo-label {\n  grid-area: label;\n  color: #275937;\n  margin-inline-start: 1rem;\n}\n\n.logo-ribbon {\n  grid-area: wordmark;\n  place-self: start end;\n  display: flex;\n  place-items: center;\n  background-color: #8b4a6a;\n  border-radius: 3px;\n  transform: rotate(3deg);\n  padding-block: 0;\n  padding-inline: 8px;\n  font-size: 0.75rem;\n  font-weight: normal;\n  text-transform: uppercase;\n  color: #fff;\n}\n@container logo (max-height: 47px) {\n  .logo-ribbon {\n    block-size: 28cqb;\n    font-size: 25cqb;\n  }\n}\n\n.inner {\n  fill: #e17000;\n}\n\n.middle {\n  fill: #275937;\n}\n\n.outer {\n  fill: #80bc00;\n}\n\n@media screen and (max-width: 767px) {\n  :host([label]) {\n    grid-template-areas: \"target label\";\n    grid-template-columns: max-content minmax(130px, max-content);\n  }\n  :host([label]) .logo-wordmark {\n    display: none;\n  }\n  :host([label]) .logo-ribbon {\n    grid-area: label;\n  }\n  :host([label]) .logo-label {\n    margin-inline-start: 0;\n    text-wrap: balance;\n    overflow-wrap: normal;\n  }\n  :host([logo-url][ribbon]) .logo-label-url + .logo-ribbon {\n    grid-area: label;\n  }\n}\n@media screen and (max-width: 480px) {\n  .logo-ribbon {\n    transform: rotate(3deg) translateY(-7px);\n  }\n}";
+const logoCss = () => `:host {
+  block-size: var(--_dso-logo-block-size, 3rem);
+  display: grid;
+  grid-template-areas: "target wordmark label";
+  grid-template-columns: repeat(3, max-content);
+  grid-template-rows: 100%;
+  gap: 16px;
+  font-size: 1.5rem;
+  font-weight: 500;
+  align-items: center;
+  container-type: size;
+  container-name: logo;
+}
+:host .logo-url,
+:host .logo-label-url {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  text-decoration: none;
+}
+:host .logo-url:hover, :host .logo-url:focus-visible, :host .logo-url:active,
+:host .logo-label-url:hover,
+:host .logo-label-url:focus-visible,
+:host .logo-label-url:active {
+  text-decoration: underline;
+}
+:host .logo-url, :host .logo-url:hover, :host .logo-url:focus, :host .logo-url:visited,
+:host .logo-label-url,
+:host .logo-label-url:hover,
+:host .logo-label-url:focus,
+:host .logo-label-url:visited {
+  color: #275937;
+}
+
+:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) {
+  grid-template-areas: "targetwordmark label";
+}
+:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) .logo-url,
+:host([logo-url]:not([logo-url=""])[ribbon]:not([ribbon=""])) .logo-ribbon {
+  grid-area: targetwordmark;
+}
+
+.logo-label-url {
+  grid-area: label;
+}
+
+.logo-target {
+  grid-area: target;
+  max-block-size: 48px;
+  max-inline-size: 48px;
+  inline-size: 100%;
+  display: block;
+  aspect-ratio: 1/1;
+}
+
+.logo-wordmark {
+  grid-area: wordmark;
+}
+
+@container logo (max-height: 47px) {
+  .logo-wordmark,
+  .logo-label {
+    font-size: 50cqb;
+    line-height: 1;
+  }
+}
+.logo-wordmark-omgevings {
+  color: #39870c;
+}
+
+.logo-wordmark-loket {
+  color: #275937;
+}
+
+.logo-label {
+  grid-area: label;
+  color: #275937;
+  margin-inline-start: 1rem;
+}
+
+.logo-ribbon {
+  grid-area: wordmark;
+  place-self: start end;
+  display: flex;
+  place-items: center;
+  background-color: #8b4a6a;
+  border-radius: 3px;
+  transform: rotate(3deg);
+  padding-block: 0;
+  padding-inline: 8px;
+  font-size: 0.75rem;
+  font-weight: normal;
+  text-transform: uppercase;
+  color: #fff;
+}
+@container logo (max-height: 47px) {
+  .logo-ribbon {
+    block-size: 28cqb;
+    font-size: 25cqb;
+  }
+}
+
+.inner {
+  fill: #e17000;
+}
+
+.middle {
+  fill: #275937;
+}
+
+.outer {
+  fill: #80bc00;
+}
+
+@media screen and (max-width: 767px) {
+  :host([label]) {
+    grid-template-areas: "target label";
+    grid-template-columns: max-content minmax(130px, max-content);
+  }
+  :host([label]) .logo-wordmark {
+    display: none;
+  }
+  :host([label]) .logo-ribbon {
+    grid-area: label;
+  }
+  :host([label]) .logo-label {
+    margin-inline-start: 0;
+    text-wrap: balance;
+    overflow-wrap: normal;
+  }
+  :host([logo-url][ribbon]) .logo-label-url + .logo-ribbon {
+    grid-area: label;
+  }
+}
+@media screen and (max-width: 480px) {
+  .logo-ribbon {
+    transform: rotate(3deg) translateY(-7px);
+  }
+}`;
 
 const DsoLogo = ({ name }) => {
     const splittedName = name.split("|");
@@ -34,9 +172,7 @@ const Logo = class {
             (!this.labelUrl ? (index.h("span", { class: "logo-label" }, this.label)) : (index.h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, index.h("span", { class: "logo-label" }, this.label)))), this.ribbon && index.h("div", { key: '25100f9a1520b25402d3606e13d50d72e4b42147', class: "logo-ribbon" }, this.ribbon)));
     }
 };
-Logo.style = logoCss;
+Logo.style = logoCss();
 
 exports.dso_logo = Logo;
 //# sourceMappingURL=dso-logo.entry.cjs.js.map
-
-//# sourceMappingURL=dso-logo.cjs.entry.js.map

package/dist/cjs/dso-map-base-layers.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DvLsepiK.js');
+var index = require('./index-DDpKNH_F.js');
 var i18n = require('./i18n-Dq0QvKWD.js');
 var v4 = require('./v4-DVHpSsrI.js');
 
@@ -17,7 +17,7 @@ const translations = {
     },
 };
 
-const mapBaseLayersCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:inset(0)}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}";
+const mapBaseLayersCss = () => `:host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}`;
 
 const MapBaseLayers = class {
     constructor(hostRef) {
@@ -50,9 +50,7 @@ const MapBaseLayers = class {
     }
     get host() { return index.getElement(this); }
 };
-MapBaseLayers.style = mapBaseLayersCss;
+MapBaseLayers.style = mapBaseLayersCss();
 
 exports.dso_map_base_layers = MapBaseLayers;
 //# sourceMappingURL=dso-map-base-layers.entry.cjs.js.map
-
-//# sourceMappingURL=dso-map-base-layers.cjs.entry.js.map