@navikt/ds-css 2.8.11 → 2.8.12-beta.0

package/dist/version/2.8.12/button.css

@@ -0,0 +1,352 @@
+[data-theme="dark"] {
+  --ac-button-primary-text: var(--a-gray-900);
+  --ac-button-primary-bg: var(--a-blue-200);
+  --ac-button-primary-focus-border: var(--a-gray-900);
+  --ac-button-primary-hover-bg: var(--a-blue-300);
+  --ac-button-primary-active-bg: var(--a-blue-400);
+  --ac-button-secondary-text: var(--a-white);
+  --ac-button-secondary-hover-text: var(--a-white);
+  --ac-button-secondary-active-text: var(--a-white);
+  --ac-button-secondary-active-focus-border: var(--a-gray-900);
+  --ac-button-secondary-bg: var(--a-gray-900);
+  --ac-button-secondary-border: var(--a-blue-200);
+  --ac-button-secondary-hover-bg: var(--a-gray-800);
+  --ac-button-secondary-focus-border: var(--a-blue-200);
+  --ac-button-secondary-active-bg: var(--a-gray-700);
+}
+
+.navds-button {
+  --__ac-button-padding: var(--a-spacing-3) var(--a-spacing-5);
+
+  display: inline-flex;
+  cursor: pointer;
+  margin: 0;
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: var(--ac-button-border-radius, var(--a-border-radius-medium));
+  padding: var(--ac-button-padding, var(--__ac-button-padding));
+  align-items: center;
+  justify-content: center;
+  gap: var(--a-spacing-2);
+}
+
+.navds-button--small {
+  --__ac-button-padding: 0.375rem var(--a-spacing-3);
+
+  padding: var(--ac-button-padding-small, var(--__ac-button-padding));
+}
+
+.navds-button--xsmall {
+  --__ac-button-padding: var(--a-spacing-05) var(--a-spacing-2);
+
+  padding: var(--ac-button-padding-xsmall, var(--__ac-button-padding));
+  gap: var(--a-spacing-1);
+}
+
+.navds-button--icon-only {
+  --__ac-button-padding: var(--a-spacing-3);
+
+  padding: var(--ac-button-padding-icon-only, var(--__ac-button-padding));
+}
+
+.navds-button--small.navds-button--icon-only {
+  --__ac-button-padding: 0.375rem;
+
+  padding: var(--ac-button-padding-icon-only-small, var(--__ac-button-padding));
+}
+
+.navds-button--xsmall.navds-button--icon-only {
+  --__ac-button-padding: var(--a-spacing-1);
+
+  padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
+}
+
+.navds-button:focus {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+}
+
+.navds-button__icon {
+  --ac-button-icon-margin: -4px;
+
+  font-size: 1.5rem;
+  display: flex;
+}
+
+.navds-button__icon:first-child {
+  margin-left: var(--ac-button-icon-margin);
+}
+
+.navds-button__icon:last-child {
+  margin-right: var(--ac-button-icon-margin);
+}
+
+.navds-button__icon:only-child {
+  margin: 0;
+}
+
+.navds-button--small .navds-button__icon {
+  --ac-button-icon-margin: -2px;
+
+  font-size: 1.25rem;
+}
+
+.navds-button--xsmall .navds-button__icon {
+  --ac-button-icon-margin: -2px;
+
+  font-size: 1rem;
+}
+
+/*************************
+ * .navds-button--primary *
+ *************************/
+
+.navds-button--primary {
+  background-color: var(--ac-button-primary-bg, var(--a-surface-action));
+  color: var(--ac-button-primary-text, var(--a-text-on-action));
+}
+
+.navds-button--primary:hover {
+  background-color: var(--ac-button-primary-hover-bg, var(--a-surface-action-hover));
+}
+
+.navds-button--primary:active {
+  background-color: var(--ac-button-primary-active-bg, var(--a-surface-action-active));
+}
+
+.navds-button--primary:focus {
+  box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+}
+
+.navds-button--primary:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ac-button-primary-bg, var(--a-surface-action));
+}
+
+/*************************
+ * .navds-button--primary-neutral *
+ *************************/
+
+.navds-button--primary-neutral {
+  background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
+  color: var(--ac-button-primary-neutral-text, var(--a-text-on-neutral));
+}
+
+.navds-button--primary-neutral:hover {
+  background-color: var(--ac-button-primary-neutral-hover-bg, var(--a-surface-neutral-hover));
+}
+
+.navds-button--primary-neutral:active {
+  background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active));
+}
+
+.navds-button--primary-neutral:focus {
+  box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+}
+
+.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
+}
+
+/**************************
+* .navds-button--secondary *
+ **************************/
+
+.navds-button--secondary {
+  color: var(--ac-button-secondary-text, var(--a-text-action));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
+}
+
+.navds-button--secondary:hover {
+  color: var(--ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle));
+  background-color: var(--ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover));
+}
+
+.navds-button--secondary:focus {
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+}
+
+.navds-button--secondary:active {
+  color: var(--ac-button-secondary-active-text, var(--a-text-on-action));
+  background-color: var(--ac-button-secondary-active-bg, var(--a-surface-action-active));
+  box-shadow: none;
+}
+
+.navds-button--secondary:focus:active {
+  box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+}
+
+.navds-button--secondary:where(:disabled, .navds-button--disabled),
+.navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ac-button-secondary-text, var(--a-text-action));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
+}
+
+/**************************
+* .navds-button--secondary-neutral *
+ **************************/
+
+.navds-button--secondary-neutral {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
+}
+
+.navds-button--secondary-neutral:hover {
+  background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-button--secondary-neutral:focus {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+}
+
+.navds-button--secondary-neutral:active {
+  color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral));
+  background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active));
+  box-shadow: none;
+}
+
+.navds-button--secondary-neutral:focus:active {
+  box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
+    var(--a-shadow-focus);
+}
+
+.navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
+}
+
+/****************************
+ * .navds-button--tertiary *
+ ****************************/
+
+.navds-button--tertiary {
+  color: var(--ac-button-tertiary-text, var(--a-text-action));
+  background-color: var(--ac-button-tertiary-bg, var(--a-surface-transparent));
+}
+
+.navds-button--tertiary:hover {
+  color: var(--ac-button-tertiary-hover-text, var(--a-text-action-on-action-subtle));
+  background-color: var(--ac-button-tertiary-hover-bg, var(--a-surface-action-subtle-hover));
+}
+
+.navds-button--tertiary:focus {
+  box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+}
+
+.navds-button--tertiary:active {
+  color: var(--ac-button-tertiary-active-text, var(--a-text-on-action));
+  background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active));
+  box-shadow: inset 0 0 0 1px var(--a-surface-default);
+}
+
+.navds-button--tertiary:active:hover {
+  background-color: var(--ac-button-tertiary-active-hover-bg, var(--a-surface-action-active));
+}
+
+.navds-button--tertiary:active:focus {
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+}
+
+.navds-button--tertiary:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ac-button-tertiary-text, var(--a-text-action));
+  background: none;
+  box-shadow: none;
+}
+
+/****************************
+ * .navds-button--tertiary-neutral *
+ ****************************/
+
+.navds-button--tertiary-neutral {
+  color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
+}
+
+.navds-button--tertiary-neutral:hover {
+  color: var(--ac-button-tertiary-neutral-hover-text, var(--a-text-default));
+  background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-button--tertiary-neutral:focus {
+  box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+}
+
+.navds-button--tertiary-neutral:active {
+  color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
+  background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
+  box-shadow: inset 0 0 0 1px var(--a-surface-default);
+}
+
+.navds-button--tertiary-neutral:active:hover {
+  background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active));
+}
+
+.navds-button--tertiary-neutral:active:focus {
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+}
+
+.navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
+  background: none;
+  box-shadow: none;
+}
+
+/*************************
+ * .navds-button--danger *
+ *************************/
+
+.navds-button--danger {
+  background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
+  color: var(--ac-button-danger-text, var(--a-text-on-danger));
+}
+
+.navds-button--danger:hover {
+  background-color: var(--ac-button-danger-hover-bg, var(--a-surface-danger-hover));
+}
+
+.navds-button--danger:active {
+  background-color: var(--ac-button-danger-active-bg, var(--a-surface-danger-active));
+}
+
+.navds-button--danger:focus {
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+}
+
+.navds-button--danger:active:where(:disabled, .navds-button--disabled),
+.navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
+}
+
+/**************************
+ * .navds-button:disabled *
+ **************************/
+
+.navds-button:where(:disabled, .navds-button--disabled) {
+  cursor: not-allowed;
+}
+
+.navds-button:not(.navds-button--loading):where(:disabled, .navds-button--disabled) {
+  opacity: 0.3;
+}
+
+.navds-button .navds-loader .navds-loader__foreground {
+  stroke: var(--ac-button-loader-stroke, currentColor);
+}
+
+.navds-button--primary .navds-loader .navds-loader__background,
+.navds-button--danger .navds-loader .navds-loader__background {
+  stroke: var(--ac-button-primary-loader-stroke-bg, rgb(255 255 255 / 0.3));
+}

package/dist/version/2.8.12/button.min.css

@@ -0,0 +1 @@
+[data-theme=dark]{--ac-button-primary-text:var(--a-gray-900);--ac-button-primary-bg:var(--a-blue-200);--ac-button-primary-focus-border:var(--a-gray-900);--ac-button-primary-hover-bg:var(--a-blue-300);--ac-button-primary-active-bg:var(--a-blue-400);--ac-button-secondary-text:var(--a-white);--ac-button-secondary-hover-text:var(--a-white);--ac-button-secondary-active-text:var(--a-white);--ac-button-secondary-active-focus-border:var(--a-gray-900);--ac-button-secondary-bg:var(--a-gray-900);--ac-button-secondary-border:var(--a-blue-200);--ac-button-secondary-hover-bg:var(--a-gray-800);--ac-button-secondary-focus-border:var(--a-blue-200);--ac-button-secondary-active-bg:var(--a-gray-700)}.navds-button{--__ac-button-padding:var(--a-spacing-3) var(--a-spacing-5);align-items:center;background:none;border:none;border-radius:var(--ac-button-border-radius,var(--a-border-radius-medium));cursor:pointer;display:inline-flex;gap:var(--a-spacing-2);justify-content:center;margin:0;padding:var(--ac-button-padding,var(--__ac-button-padding));text-decoration:none}.navds-button--small{--__ac-button-padding:0.375rem var(--a-spacing-3);padding:var(--ac-button-padding-small,var(--__ac-button-padding))}.navds-button--xsmall{--__ac-button-padding:var(--a-spacing-05) var(--a-spacing-2);gap:var(--a-spacing-1);padding:var(--ac-button-padding-xsmall,var(--__ac-button-padding))}.navds-button--icon-only{--__ac-button-padding:var(--a-spacing-3);padding:var(--ac-button-padding-icon-only,var(--__ac-button-padding))}.navds-button--small.navds-button--icon-only{--__ac-button-padding:0.375rem;padding:var(--ac-button-padding-icon-only-small,var(--__ac-button-padding))}.navds-button--xsmall.navds-button--icon-only{--__ac-button-padding:var(--a-spacing-1);padding:var(--ac-button-padding-icon-only-xsmall,var(--__ac-button-padding))}.navds-button:focus{box-shadow:var(--a-shadow-focus);outline:none}.navds-button__icon{--ac-button-icon-margin:-4px;display:flex;font-size:1.5rem}.navds-button__icon:first-child{margin-left:var(--ac-button-icon-margin)}.navds-button__icon:last-child{margin-right:var(--ac-button-icon-margin)}.navds-button__icon:only-child{margin:0}.navds-button--small .navds-button__icon{--ac-button-icon-margin:-2px;font-size:1.25rem}.navds-button--xsmall .navds-button__icon{--ac-button-icon-margin:-2px;font-size:1rem}.navds-button--primary{background-color:var(--ac-button-primary-bg,var(--a-surface-action));color:var(--ac-button-primary-text,var(--a-text-on-action))}.navds-button--primary:hover{background-color:var(--ac-button-primary-hover-bg,var(--a-surface-action-hover))}.navds-button--primary:active{background-color:var(--ac-button-primary-active-bg,var(--a-surface-action-active))}.navds-button--primary:focus{box-shadow:inset 0 0 0 1px var(--ac-button-primary-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}.navds-button--primary:active:where(:disabled,.navds-button--disabled),.navds-button--primary:hover:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-primary-bg,var(--a-surface-action))}.navds-button--primary-neutral{background-color:var(--ac-button-primary-neutral-bg,var(--a-surface-neutral));color:var(--ac-button-primary-neutral-text,var(--a-text-on-neutral))}.navds-button--primary-neutral:hover{background-color:var(--ac-button-primary-neutral-hover-bg,var(--a-surface-neutral-hover))}.navds-button--primary-neutral:active{background-color:var(--ac-button-primary-neutral-active-bg,var(--a-surface-neutral-active))}.navds-button--primary-neutral:focus{box-shadow:inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}.navds-button--primary-neutral:active:where(:disabled,.navds-button--disabled),.navds-button--primary-neutral:hover:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-primary-neutral-bg,var(--a-surface-neutral))}.navds-button--secondary{background-color:var(--ac-button-secondary-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-border,var(--a-border-action));color:var(--ac-button-secondary-text,var(--a-text-action))}.navds-button--secondary:hover{background-color:var(--ac-button-secondary-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-button-secondary-hover-text,var(--a-text-action-on-action-subtle))}.navds-button--secondary:focus{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-focus-border,var(--a-border-action)),var(--a-shadow-focus)}.navds-button--secondary:active{background-color:var(--ac-button-secondary-active-bg,var(--a-surface-action-active));box-shadow:none;color:var(--ac-button-secondary-active-text,var(--a-text-on-action))}.navds-button--secondary:focus:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-active-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}.navds-button--secondary:hover:where(:disabled,.navds-button--disabled),.navds-button--secondary:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-secondary-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-border,var(--a-border-action));color:var(--ac-button-secondary-text,var(--a-text-action))}.navds-button--secondary-neutral{background-color:var(--ac-button-secondary-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-border,var(--a-border-strong));color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}.navds-button--secondary-neutral:hover{background-color:var(--ac-button-secondary-neutral-hover-bg,var(--a-surface-neutral-subtle-hover))}.navds-button--secondary-neutral:focus{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus);color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}.navds-button--secondary-neutral:active{background-color:var(--ac-button-secondary-neutral-active-bg,var(--a-surface-neutral-active));box-shadow:none;color:var(--ac-button-secondary-neutral-active-text,var(--a-text-on-neutral))}.navds-button--secondary-neutral:focus:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}.navds-button--secondary-neutral:hover:where(:disabled,.navds-button--disabled),.navds-button--secondary-neutral:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-secondary-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-border,var(--a-border-strong));color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}.navds-button--tertiary{background-color:var(--ac-button-tertiary-bg,var(--a-surface-transparent));color:var(--ac-button-tertiary-text,var(--a-text-action))}.navds-button--tertiary:hover{background-color:var(--ac-button-tertiary-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-button-tertiary-hover-text,var(--a-text-action-on-action-subtle))}.navds-button--tertiary:focus{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-focus-border,var(--a-border-action)),var(--a-shadow-focus)}.navds-button--tertiary:active{background-color:var(--ac-button-tertiary-active-bg,var(--a-surface-action-active));box-shadow:inset 0 0 0 1px var(--a-surface-default);color:var(--ac-button-tertiary-active-text,var(--a-text-on-action))}.navds-button--tertiary:active:hover{background-color:var(--ac-button-tertiary-active-hover-bg,var(--a-surface-action-active))}.navds-button--tertiary:active:focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}.navds-button--tertiary:active:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary:active:where(:disabled,.navds-button--disabled),.navds-button--tertiary:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary:where(:disabled,.navds-button--disabled){background:none;box-shadow:none;color:var(--ac-button-tertiary-text,var(--a-text-action))}.navds-button--tertiary-neutral{color:var(--ac-button-tertiary-neutral-text,var(--a-text-default))}.navds-button--tertiary-neutral:hover{background-color:var(--ac-button-tertiary-neutral-hover-bg,var(--a-surface-neutral-subtle-hover));color:var(--ac-button-tertiary-neutral-hover-text,var(--a-text-default))}.navds-button--tertiary-neutral:focus{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus)}.navds-button--tertiary-neutral:active{background-color:var(--ac-button-tertiary-neutral-active-bg,var(--a-surface-neutral-active));box-shadow:inset 0 0 0 1px var(--a-surface-default);color:var(--ac-button-tertiary-neutral-active-text,var(--a-text-on-neutral))}.navds-button--tertiary-neutral:active:hover{background-color:var(--ac-button-tertiary-neutral-active-hover-bg,var(--a-surface-neutral-active))}.navds-button--tertiary-neutral:active:focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}.navds-button--tertiary-neutral:active:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:active:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:where(:disabled,.navds-button--disabled){background:none;box-shadow:none;color:var(--ac-button-tertiary-neutral-text,var(--a-text-default))}.navds-button--danger{background-color:var(--ac-button-danger-bg,var(--a-surface-danger));color:var(--ac-button-danger-text,var(--a-text-on-danger))}.navds-button--danger:hover{background-color:var(--ac-button-danger-hover-bg,var(--a-surface-danger-hover))}.navds-button--danger:active{background-color:var(--ac-button-danger-active-bg,var(--a-surface-danger-active))}.navds-button--danger:focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}.navds-button--danger:active:where(:disabled,.navds-button--disabled),.navds-button--danger:hover:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-danger-bg,var(--a-surface-danger))}.navds-button:where(:disabled,.navds-button--disabled){cursor:not-allowed}.navds-button:not(.navds-button--loading):where(:disabled,.navds-button--disabled){opacity:.3}.navds-button .navds-loader .navds-loader__foreground{stroke:var(--ac-button-loader-stroke,currentColor)}.navds-button--danger .navds-loader .navds-loader__background,.navds-button--primary .navds-loader .navds-loader__background{stroke:var(--ac-button-primary-loader-stroke-bg,hsla(0,0%,100%,.3))}

package/dist/version/2.8.12/chat.css

@@ -0,0 +1,98 @@
+.navds-chat {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--a-spacing-4);
+  padding-right: var(--a-spacing-16);
+}
+
+.navds-chat--right {
+  flex-direction: row-reverse;
+  padding-right: 0;
+  padding-left: var(--a-spacing-16);
+}
+
+.navds-chat__bubble-wrapper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-3);
+}
+
+.navds-chat--right .navds-chat__bubble-wrapper {
+  align-items: flex-end;
+}
+
+.navds-chat__avatar {
+  align-items: center;
+  background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
+  color: var(--ac-chat-avatar-color, var(--a-text-default));
+  border-radius: var(--a-border-radius-full);
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  overflow: hidden;
+  height: 3rem;
+  width: 3rem;
+}
+
+.navds-chat__avatar svg {
+  align-self: center;
+  height: 100%;
+  width: 100%;
+}
+
+.navds-chat__bubble {
+  padding: 1rem;
+  box-shadow: var(--a-shadow-small);
+  width: fit-content;
+  max-width: 37.5rem;
+  background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
+  border-radius: var(--a-border-radius-xlarge);
+  border-bottom-left-radius: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-2);
+}
+
+.navds-chat__bubble:focus {
+  box-shadow: var(--a-shadow-focus);
+  outline: none;
+}
+
+.navds-chat--right .navds-chat__bubble {
+  border-radius: var(--a-border-radius-xlarge);
+  border-bottom-right-radius: 2px;
+}
+
+.navds-chat__top-text {
+  color: var(--ac-chat-top-text, var(--a-text-default));
+  display: flex;
+  gap: var(--a-spacing-2);
+  align-items: baseline;
+}
+
+.navds-chat--right .navds-chat__top-text {
+  align-self: flex-end;
+}
+
+.navds-chat--top-text-left .navds-chat__top-text {
+  align-self: flex-start;
+}
+
+.navds-chat--top-text-right .navds-chat__top-text {
+  align-self: flex-end;
+}
+
+.navds-chat--left .navds-chat__top-text--right {
+  align-self: flex-end;
+}
+
+.navds-chat--right .navds-chat__top-text--left {
+  align-self: flex-start;
+}
+
+.navds-chat__name {
+  font-weight: var(--a-font-weight-bold);
+}

package/dist/version/2.8.12/chat.min.css

@@ -0,0 +1 @@
+.navds-chat{align-items:flex-end;display:flex;gap:var(--a-spacing-4);padding-right:var(--a-spacing-16)}.navds-chat--right{flex-direction:row-reverse;padding-left:var(--a-spacing-16);padding-right:0}.navds-chat__bubble-wrapper{display:flex;flex-direction:column;gap:var(--a-spacing-3);list-style:none;margin:0;padding:0}.navds-chat--right .navds-chat__bubble-wrapper{align-items:flex-end}.navds-chat__avatar{align-items:center;background:var(--ac-chat-avatar-bg,var(--a-bg-subtle));border-radius:var(--a-border-radius-full);color:var(--ac-chat-avatar-color,var(--a-text-default));display:flex;flex-shrink:0;height:3rem;justify-content:center;overflow:hidden;width:3rem}.navds-chat__avatar svg{align-self:center;height:100%;width:100%}.navds-chat__bubble{background-color:var(--ac-chat-bubble-bg,var(--a-bg-subtle));border-radius:var(--a-border-radius-xlarge);border-bottom-left-radius:2px;box-shadow:var(--a-shadow-small);display:flex;flex-direction:column;gap:var(--a-spacing-2);max-width:37.5rem;padding:1rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-chat__bubble:focus{box-shadow:var(--a-shadow-focus);outline:none}.navds-chat--right .navds-chat__bubble{border-radius:var(--a-border-radius-xlarge);border-bottom-right-radius:2px}.navds-chat__top-text{align-items:baseline;color:var(--ac-chat-top-text,var(--a-text-default));display:flex;gap:var(--a-spacing-2)}.navds-chat--right .navds-chat__top-text{align-self:flex-end}.navds-chat--top-text-left .navds-chat__top-text{align-self:flex-start}.navds-chat--left .navds-chat__top-text--right,.navds-chat--top-text-right .navds-chat__top-text{align-self:flex-end}.navds-chat--right .navds-chat__top-text--left{align-self:flex-start}.navds-chat__name{font-weight:var(--a-font-weight-bold)}

package/dist/version/2.8.12/chips.css

@@ -0,0 +1,138 @@
+.navds-chips {
+  display: flex;
+  gap: var(--a-spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  flex-wrap: wrap;
+}
+
+.navds-chips :where(li) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: block;
+}
+
+.navds-chips__chip {
+  all: unset;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: var(--a-spacing-05);
+  margin: 0;
+  padding: 0 var(--a-spacing-3);
+  text-decoration: none;
+  border-radius: var(--a-border-radius-full);
+  min-height: 32px;
+}
+
+.navds-chips--small .navds-chips__chip {
+  min-height: 24px;
+  padding: 0 var(--a-spacing-2);
+}
+
+.navds-chips__toggle {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-default));
+  background-color: var(--ac-chip-toggle-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-chip-toggle-text, var(--a-text-default));
+}
+
+.navds-chips__toggle:hover {
+  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-strong));
+  background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-chips__toggle[aria-pressed="true"] {
+  box-shadow: none;
+  background-color: var(--ac-chip-toggle-pressed-bg, var(--a-surface-action-selected));
+  color: var(--ac-chip-toggle-pressed-text, var(--a-text-on-action));
+}
+
+.navds-chips__toggle[aria-pressed="true"]:hover {
+  background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
+}
+
+.navds-chips__toggle:focus-visible {
+  box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+}
+
+.navds-chips__toggle[aria-pressed="true"]:focus-visible,
+.navds-chips__toggle:active:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+}
+
+.navds-chips__removable--action {
+  background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
+  color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
+}
+
+.navds-chips__removable--neutral {
+  background-color: var(--ac-chip-removable-neutral-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-chip-removable-neutral-text, var(--a-text-default));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--a-border-default));
+}
+
+.navds-chips__removable-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  display: grid;
+  place-items: center;
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-chips__toggle-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: grid;
+  place-items: center;
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-chips--small .navds-chips__toggle-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.navds-chips--small .navds-chips__removable-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.navds-chips--small .navds-chips__removable-icon > svg {
+  width: 0.75rem;
+}
+
+.navds-chips__removable--action:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), 0 0 0 2px var(--a-border-focus);
+}
+
+.navds-chips__removable--neutral:focus-visible {
+  box-shadow: 0 0 0 2px var(--a-border-focus);
+}
+
+.navds-chips__removable--action:hover {
+  background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
+}
+
+.navds-chips__removable--neutral:hover {
+  background-color: var(--ac-chip-removable-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border, var(--a-border-strong));
+}
+
+.navds-chips--icon-left {
+  padding-left: 0.375rem;
+}
+
+.navds-chips--icon-right {
+  padding-right: var(--a-spacing-1);
+}
+
+.navds-chips--small .navds-chips--icon-right {
+  padding-right: var(--a-spacing-05);
+}
+
+.navds-chips--small .navds-chips--icon-left {
+  padding-left: 0.375rem;
+}

package/dist/version/2.8.12/chips.min.css

@@ -0,0 +1 @@
+.navds-chips{display:flex;flex-wrap:wrap;gap:var(--a-spacing-2);list-style:none;margin:0;padding:0}.navds-chips :where(li){display:block;list-style:none;margin:0;padding:0}.navds-chips__chip{all:unset;align-items:center;border-radius:var(--a-border-radius-full);cursor:pointer;display:flex;gap:var(--a-spacing-05);justify-content:center;margin:0;min-height:32px;padding:0 var(--a-spacing-3);text-decoration:none}.navds-chips--small .navds-chips__chip{min-height:24px;padding:0 var(--a-spacing-2)}.navds-chips__toggle{background-color:var(--ac-chip-toggle-bg,var(--a-surface-neutral-subtle));box-shadow:inset 0 0 0 1px var(--ac-chip-toggle-border,var(--a-border-default));color:var(--ac-chip-toggle-text,var(--a-text-default))}.navds-chips__toggle:hover{background-color:var(--ac-chip-toggle-hover-bg,var(--a-surface-neutral-subtle-hover));box-shadow:inset 0 0 0 1px var(--ac-chip-toggle-hover-border,var(--a-border-strong))}.navds-chips__toggle[aria-pressed=true]{background-color:var(--ac-chip-toggle-pressed-bg,var(--a-surface-action-selected));box-shadow:none;color:var(--ac-chip-toggle-pressed-text,var(--a-text-on-action))}.navds-chips__toggle[aria-pressed=true]:hover{background-color:var(--ac-chip-toggle-pressed-hover-bg,var(--a-surface-action-selected-hover))}.navds-chips__toggle:focus-visible{box-shadow:0 0 0 2px var(--ac-chip-toggle-focus,var(--a-border-focus))}.navds-chips__toggle:active:focus-visible,.navds-chips__toggle[aria-pressed=true]:focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),0 0 0 2px var(--ac-chip-toggle-focus,var(--a-border-focus))}.navds-chips__removable--action{background-color:var(--ac-chip-removable-action-bg,var(--a-surface-action-selected));color:var(--ac-chip-removable-action-text,var(--a-text-on-action))}.navds-chips__removable--neutral{background-color:var(--ac-chip-removable-neutral-bg,var(--a-surface-neutral-subtle));box-shadow:inset 0 0 0 1px var(--ac-chip-removable-neutral-border,var(--a-border-default));color:var(--ac-chip-removable-neutral-text,var(--a-text-default))}.navds-chips__removable-icon{border-radius:var(--a-border-radius-full);display:grid;height:1.5rem;place-items:center;width:1.5rem}.navds-chips__toggle-icon{border-radius:var(--a-border-radius-full);display:grid;height:1.25rem;place-items:center;width:1.25rem}.navds-chips--small .navds-chips__toggle-icon{height:1rem;width:1rem}.navds-chips--small .navds-chips__removable-icon{height:1.25rem;width:1.25rem}.navds-chips--small .navds-chips__removable-icon>svg{width:.75rem}.navds-chips__removable--action:focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),0 0 0 2px var(--a-border-focus)}.navds-chips__removable--neutral:focus-visible{box-shadow:0 0 0 2px var(--a-border-focus)}.navds-chips__removable--action:hover{background-color:var(--ac-chip-removable-action-hover-bg,var(--a-surface-action-selected-hover))}.navds-chips__removable--neutral:hover{background-color:var(--ac-chip-removable-neutral-hover-bg,var(--a-surface-neutral-subtle-hover));box-shadow:inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border,var(--a-border-strong))}.navds-chips--icon-left{padding-left:.375rem}.navds-chips--icon-right{padding-right:var(--a-spacing-1)}.navds-chips--small .navds-chips--icon-right{padding-right:var(--a-spacing-05)}.navds-chips--small .navds-chips--icon-left{padding-left:.375rem}

package/dist/version/2.8.12/contentcontainer.css

@@ -0,0 +1,17 @@
+:root,
+:host {
+  --navds-content-container-max-width: 79.5rem;
+}
+
+.navds-content-container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--navds-content-container-max-width);
+  padding: var(--a-spacing-4);
+}
+
+@media (min-width: 448px) {
+  .navds-content-container {
+    padding: var(--a-spacing-6);
+  }
+}

package/dist/version/2.8.12/contentcontainer.min.css

@@ -0,0 +1 @@
+:host,:root{--navds-content-container-max-width:79.5rem}.navds-content-container{margin-left:auto;margin-right:auto;max-width:var(--navds-content-container-max-width);padding:var(--a-spacing-4)}@media (min-width:448px){.navds-content-container{padding:var(--a-spacing-6)}}