@navikt/ds-css 2.8.16 → 2.9.0

package/dist/component/accordion.min.css

@@ -0,0 +1 @@
+.navds-accordion__item:focus-within{position:relative}.navds-accordion__header{align-items:flex-start;background:var(--ac-accordion-header-bg,var(--a-surface-transparent));border:none;border-bottom:2px solid var(--ac-accordion-header-border,var(--a-border-divider));cursor:pointer;display:flex;gap:var(--a-spacing-2);justify-content:space-between;margin:0;padding:14px var(--a-spacing-3) var(--a-spacing-3);text-align:left;width:100%}.navds-accordion__header:focus{box-shadow:var(--a-shadow-focus);outline:none}.navds-accordion__header:hover{background:var(--ac-accordion-header-bg-hover,var(--a-surface-transparent));border-color:var(--ac-accordion-header-border-hover,var(--a-border-default));color:var(--ac-accordion-header-text-hover,var(--a-text-action-on-action-subtle))}.navds-accordion__header-content{overflow:hidden;text-overflow:ellipsis}.navds-accordion__item--open>.navds-accordion__header{background-color:var(--ac-accordion-header-bg-open,var(--ac-accordion-item-bg-open,var(--a-surface-action-subtle)));border-color:var(--ac-accordion-item-border-open,var(--a-surface-action-subtle))}.navds-accordion__item--open>:where(.navds-accordion__header:hover){background-color:var(--ac-accordion-header-bg-open-hover,var(--a-surface-action-subtle))}.navds-accordion__content{border-bottom:2px solid var(--ac-accordion-content-border,var(--a-border-divider));padding:var(--a-spacing-3) var(--a-spacing-3) 18px}.navds-accordion__item--open>.navds-accordion__header:hover+* .navds-accordion__content{border-color:var(--ac-accordion-content-border-open,var(--a-border-default))}.navds-accordion__expand-icon{flex-shrink:0;font-size:1.5rem;height:1.75rem}.navds-accordion__item--open>.navds-accordion__header>.navds-accordion__expand-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.navds-accordion__expand-icon--filled{display:none}.navds-accordion__header:hover>.navds-accordion__expand-icon.navds-accordion__expand-icon--filled{display:inherit}.navds-accordion__header:hover>.navds-accordion__expand-icon{display:none}

package/dist/component/alert.css

@@ -0,0 +1,76 @@
+.navds-alert {
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid;
+  padding: var(--a-spacing-4);
+  display: flex;
+  gap: var(--a-spacing-3);
+  align-items: center;
+}
+
+.navds-alert__wrapper {
+  max-width: 43.5rem;
+}
+
+.navds-alert--small {
+  padding: var(--a-spacing-2) var(--a-spacing-4);
+}
+
+.navds-alert--full-width {
+  border-radius: 0;
+}
+
+.navds-alert > .navds-alert__icon {
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  align-self: flex-start;
+  height: var(--a-font-line-height-xlarge);
+  background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
+}
+
+.navds-alert--small > .navds-alert__icon {
+  font-size: 1.25rem;
+  height: var(--a-font-line-height-large);
+}
+
+.navds-alert--error {
+  border-color: var(--ac-alert-error-border, var(--a-border-danger));
+  background-color: var(--ac-alert-error-bg, var(--a-surface-danger-subtle));
+}
+
+.navds-alert--error > .navds-alert__icon {
+  color: var(--ac-alert-icon-error-color, var(--a-icon-danger));
+}
+
+.navds-alert--warning {
+  border-color: var(--ac-alert-warning-border, var(--a-border-warning));
+  background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
+}
+
+.navds-alert--warning > .navds-alert__icon {
+  background: radial-gradient(circle at 50% 57%, var(--a-surface-default) 32%, 0, transparent);
+  color: var(--ac-alert-icon-warning-color, var(--a-icon-warning));
+}
+
+.navds-alert--info {
+  border-color: var(--ac-alert-info-border, var(--a-border-info));
+  background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
+}
+
+.navds-alert--info > .navds-alert__icon {
+  color: var(--ac-alert-icon-info-color, var(--a-icon-info));
+}
+
+.navds-alert--success {
+  border-color: var(--ac-alert-success-border, var(--a-border-success));
+  background-color: var(--ac-alert-success-bg, var(--a-surface-success-subtle));
+}
+
+.navds-alert--success > .navds-alert__icon {
+  color: var(--ac-alert-icon-success-color, var(--a-icon-success));
+}
+
+.navds-alert--inline {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+}

package/dist/component/alert.min.css

@@ -0,0 +1 @@
+.navds-alert{align-items:center;border:1px solid;border-radius:var(--a-border-radius-medium);display:flex;gap:var(--a-spacing-3);padding:var(--a-spacing-4)}.navds-alert__wrapper{max-width:43.5rem}.navds-alert--small{padding:var(--a-spacing-2) var(--a-spacing-4)}.navds-alert--full-width{border-radius:0}.navds-alert>.navds-alert__icon{align-self:flex-start;background:radial-gradient(circle,var(--a-surface-default) 50%,0,transparent);flex-shrink:0;font-size:1.5rem;height:var(--a-font-line-height-xlarge)}.navds-alert--small>.navds-alert__icon{font-size:1.25rem;height:var(--a-font-line-height-large)}.navds-alert--error{background-color:var(--ac-alert-error-bg,var(--a-surface-danger-subtle));border-color:var(--ac-alert-error-border,var(--a-border-danger))}.navds-alert--error>.navds-alert__icon{color:var(--ac-alert-icon-error-color,var(--a-icon-danger))}.navds-alert--warning{background-color:var(--ac-alert-warning-bg,var(--a-surface-warning-subtle));border-color:var(--ac-alert-warning-border,var(--a-border-warning))}.navds-alert--warning>.navds-alert__icon{background:radial-gradient(circle at 50% 57%,var(--a-surface-default) 32%,0,transparent);color:var(--ac-alert-icon-warning-color,var(--a-icon-warning))}.navds-alert--info{background-color:var(--ac-alert-info-bg,var(--a-surface-info-subtle));border-color:var(--ac-alert-info-border,var(--a-border-info))}.navds-alert--info>.navds-alert__icon{color:var(--ac-alert-icon-info-color,var(--a-icon-info))}.navds-alert--success{background-color:var(--ac-alert-success-bg,var(--a-surface-success-subtle));border-color:var(--ac-alert-success-border,var(--a-border-success))}.navds-alert--success>.navds-alert__icon{color:var(--ac-alert-icon-success-color,var(--a-icon-success))}.navds-alert--inline{background-color:transparent;border:none;padding:0}

package/dist/component/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/component/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/component/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/component/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)}