@tangible/ui 0.0.6 → 0.0.7

package/styles/all.expanded.unlayered.css

@@ -66,6 +66,7 @@
 /* @tui-tokens
 --tui-card-bg
 --tui-card-border
+--tui-card-border-width
 --tui-card-border-interact
 --tui-card-radius
 --tui-card-shadow
@@ -211,6 +212,14 @@
 */
 /* @tui-tokens
 --tui-radio-accent
+--tui-radio-size
+--tui-radio-border
+--tui-radio-bg
+--tui-radio-gap
+--tui-radio-font-size
+--tui-radio-label-color
+--tui-radio-description-color
+--tui-radio-group-gap
 */
 /* @tui-tokens
 --tui-rating-active
@@ -242,7 +251,14 @@
 */
 /* @tui-tokens
 --tui-switch-accent
---tui-switch-track-off
+--tui-switch-bg
+--tui-switch-border
+--tui-switch-thumb-bg
+--tui-switch-track-height
+--tui-switch-size
+--tui-switch-label-color
+--tui-switch-font-size
+--tui-switch-gap
 */
 /* @tui-tokens
 --tui-sidebar-width
@@ -1063,7 +1079,6 @@
     font-weight: var(--tui-button-font-weight, normal);
     line-height: var(--tui-button-line-height, 1.4);
     display: inline-flex;
-    align-self: center;
     text-align: center;
     justify-content: center;
     align-items: center;
@@ -1082,7 +1097,7 @@
     border-width: var(--tui-border-width);
   }
   .tui-interface .tui-button .tui-icon {
-    font-size: inherit;
+    font-size: 1.25em;
   }
   .tui-interface .tui-button:hover {
     --_bg: var(--_bg-interact);
@@ -1284,7 +1299,6 @@
     font-weight: var(--tui-button-font-weight, normal);
     line-height: var(--tui-button-line-height, 1.4);
     display: inline-flex;
-    align-self: center;
     text-align: center;
     justify-content: center;
     align-items: center;
@@ -1320,6 +1334,7 @@
   :where(.tui-interface) .tui-card {
     --_bg: var(--tui-card-bg, var(--tui-color-bg-surface));
     --_border: var(--tui-card-border, var(--tui-color-border));
+    --_border-width: var(--tui-card-border-width, var(--tui-border-width));
     --_border-interact: var(--tui-card-border-interact, var(--tui-theme-primary-base));
     --_radius: var(--tui-card-radius, var(--tui-radius-md));
     --_shadow: var(--tui-card-shadow, var(--tui-shadow-sm));
@@ -1331,7 +1346,7 @@
     position: relative;
     width: 100%;
     border-style: solid;
-    border-width: var(--tui-border-width);
+    border-width: var(--_border-width);
     border-color: var(--_border);
     border-radius: var(--_radius);
     background-color: var(--_bg);
@@ -1387,40 +1402,40 @@
     border-end-start-radius: calc(var(--_radius) - 1px);
   }
   @container tuiCard (width >= 400px) {
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner {
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: var(--_padding);
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__media.is-flush {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__media.is-flush {
       object-fit: cover;
       object-position: center;
       margin-block: calc(var(--_padding) * -1);
       height: calc(100% + 2 * var(--_padding));
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner *:has(.tui-card__media.is-flush) {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner *:has(.tui-card__media.is-flush) {
       align-self: stretch;
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__head {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__head {
       padding-inline-start: var(--_padding);
       padding-block: var(--_padding);
       flex: 0 1 auto;
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__head:has(.tui-icon:only-child) {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__head:has(.tui-icon:only-child) {
       flex: 0 0 max-content;
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__head .tui-card__media.is-flush:first-child {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__head .tui-card__media.is-flush:first-child {
       margin-inline-end: var(--_padding);
       max-width: calc(100% + var(--_padding));
       border-start-end-radius: 0;
       border-end-start-radius: calc(var(--_radius) - 1px);
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__body {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__body {
       flex: 2 1 auto;
       padding-block: var(--_padding);
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__foot {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__foot {
       width: unset;
       flex: 0 1 var(--_foot-basis);
       padding-block: var(--_padding);
@@ -1428,20 +1443,20 @@
       margin-inline-start: auto;
       justify-content: flex-end;
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__foot .tui-card__media.is-flush:last-child {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__foot .tui-card__media.is-flush:last-child {
       margin-inline-start: var(--_padding);
       max-width: calc(100% + var(--_padding));
       border-end-start-radius: 0;
       border-start-end-radius: calc(var(--_radius) - 1px);
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__head:not(:first-child),
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__body:not(:first-child),
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__foot:not(:first-child) {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__head:not(:first-child),
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__body:not(:first-child),
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__foot:not(:first-child) {
       padding-inline-start: 0;
     }
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__head:not(:last-child),
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__body:not(:last-child),
-    :where(.tui-interface) .tui-card.is-layout-inline .tui-card__inner .tui-card__foot:not(:last-child) {
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__head:not(:last-child),
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__body:not(:last-child),
+    :where(:where(.tui-interface) .tui-card.is-layout-inline) .tui-card__inner .tui-card__foot:not(:last-child) {
       padding-inline-end: 0;
     }
   }
@@ -3688,26 +3703,26 @@
       display: flex;
       align-items: center;
     }
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner {
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: var(--_padding);
       flex: 1 1 auto;
     }
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__head {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__head {
       padding-inline-start: var(--_padding);
       padding-block: var(--_padding);
       flex: 0 1 auto;
     }
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__head:has(.tui-icon:only-child) {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__head:has(.tui-icon:only-child) {
       flex: 0 0 max-content;
     }
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__body {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__body {
       flex: 2 1 auto;
       padding-block: var(--_padding);
     }
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__foot {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__foot {
       width: unset;
       flex: 0 1 var(--_foot-basis);
       padding-block: var(--_padding);
@@ -3715,14 +3730,14 @@
       margin-inline-start: auto;
       justify-content: flex-end;
     }
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__head:not(:first-child),
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__body:not(:first-child),
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__foot:not(:first-child) {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__head:not(:first-child),
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__body:not(:first-child),
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__foot:not(:first-child) {
       padding-inline-start: 0;
     }
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__head:not(:last-child),
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__body:not(:last-child),
-    :where(.tui-interface) .tui-notice.is-layout-inline .tui-notice__inner .tui-notice__foot:not(:last-child) {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__head:not(:last-child),
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__body:not(:last-child),
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline) .tui-notice__inner .tui-notice__foot:not(:last-child) {
       padding-inline-end: 0;
     }
   }
@@ -3730,18 +3745,27 @@
     padding-inline-end: calc(var(--_padding) + var(--tui-control-height-sm));
   }
   @container tuiNotice (width >= 400px) {
-    :where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible .tui-notice__inner {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible) .tui-notice__inner {
       padding-inline-end: 0;
     }
-    :where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible .tui-notice__inner .tui-notice__head:last-child,
-    :where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible .tui-notice__inner .tui-notice__body:last-child,
-    :where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible .tui-notice__inner .tui-notice__foot:last-child {
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible) .tui-notice__inner .tui-notice__head:last-child,
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible) .tui-notice__inner .tui-notice__body:last-child,
+    :where(:where(.tui-interface) .tui-notice.is-layout-inline.is-dismissible) .tui-notice__inner .tui-notice__foot:last-child {
       padding-inline-end: 0;
     }
   }
   :where(.tui-interface) .tui-notice.has-stripe {
-    border-inline-start-width: var(--tui-notice-stripe-width, 4px);
-    border-inline-start-color: var(--_stripe);
+    overflow: hidden;
+    padding-inline-start: var(--tui-notice-stripe-width, 4px);
+  }
+  :where(.tui-interface) .tui-notice.has-stripe::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: var(--tui-notice-stripe-width, 4px);
+    background-color: var(--_stripe);
+    z-index: 1;
   }
   :where(.tui-interface) .tui-notice.is-theme-info {
     --_bg: var(--tui-notice-bg, var(--tui-theme-primary-subtlest));
@@ -3937,61 +3961,79 @@
     gap: var(--tui-spacing-xs);
   }
   :where(.tui-interface) .tui-radio-group {
+    --_group-gap: var(--tui-radio-group-gap, var(--tui-spacing-xs));
     display: flex;
     flex-direction: column;
-    gap: var(--tui-spacing-xs);
+    gap: var(--_group-gap);
   }
   :where(.tui-interface) .tui-radio-group.is-horizontal {
     flex-direction: row;
     flex-wrap: wrap;
-    gap: var(--tui-spacing-sm);
+    gap: var(--_group-gap);
   }
   :where(.tui-interface) .tui-radio-group[aria-disabled=true] {
     opacity: var(--tui-opacity-disabled);
   }
   :where(.tui-interface) .tui-radio {
     --_accent: var(--tui-radio-accent, var(--tui-input-accent, var(--tui-theme-primary-base)));
-    --_border: var(--tui-input-border, var(--tui-color-border));
+    --_border: var(--tui-radio-border, var(--tui-input-border, var(--tui-color-border)));
+    --_bg: var(--tui-radio-bg, var(--tui-color-bg));
+    --_size: var(--tui-radio-size, 1.15em);
+    --_gap: var(--tui-radio-gap, var(--tui-spacing-xs));
+    --_fs: var(--tui-radio-font-size, var(--tui-typography-size-sm));
+    --_label-color: var(--tui-radio-label-color, var(--tui-color-fg));
+    --_desc-color: var(--tui-radio-description-color, var(--tui-color-fg-muted));
+    display: flex;
+    flex-direction: column;
+  }
+  :where(.tui-interface) .tui-radio:has(.tui-radio__control[aria-checked=true]) .tui-radio__indicator {
+    border-color: var(--_accent);
+  }
+  :where(.tui-interface) .tui-radio:has(.tui-radio__control[aria-checked=true]) .tui-radio__indicator::after {
+    transform: scale(1);
+    background-color: var(--_accent);
+  }
+  :where(.tui-interface) .tui-radio__control {
     display: inline-flex;
     align-items: center;
-    gap: var(--tui-spacing-xs);
+    gap: var(--_gap);
     padding: 0;
     border: none;
     background: none;
     font: inherit;
-    font-size: var(--tui-typography-size-sm);
-    color: var(--tui-color-fg);
+    font-size: var(--_fs);
+    color: var(--_label-color);
     cursor: pointer;
     appearance: none;
   }
-  :where(.tui-interface) .tui-radio:focus-visible {
+  :where(.tui-interface) .tui-radio__control:hover:not(:disabled):not([aria-disabled=true]) .tui-radio__indicator {
+    border-color: var(--_accent);
+  }
+  :where(.tui-interface) .tui-radio__control:focus-visible {
     outline: none;
   }
-  :where(.tui-interface) .tui-radio:focus-visible .tui-radio__indicator {
+  :where(.tui-interface) .tui-radio__control:focus-visible .tui-radio__indicator {
     outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
     outline-offset: var(--tui-focus-ring-offset);
   }
-  :where(.tui-interface) .tui-radio:disabled {
+  :where(.tui-interface) .tui-radio__control:disabled {
     cursor: not-allowed;
     opacity: var(--tui-opacity-disabled);
+    pointer-events: none;
   }
-  :where(.tui-interface) .tui-radio[aria-checked=true] .tui-radio__indicator {
-    border-color: var(--_accent);
-  }
-  :where(.tui-interface) .tui-radio[aria-checked=true] .tui-radio__indicator::after {
-    transform: scale(1);
-    background-color: var(--_accent);
+  :where(.tui-interface) .tui-radio__control[aria-disabled=true] {
+    cursor: not-allowed;
   }
   :where(.tui-interface) .tui-radio__indicator {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    width: 1.15em;
-    height: 1.15em;
+    width: var(--_size);
+    height: var(--_size);
     border-radius: 50%;
     border: var(--tui-border-width) solid var(--_border);
-    background-color: var(--tui-color-bg);
+    background-color: var(--_bg);
     transition-duration: var(--tui-motion-duration);
     transition-timing-function: var(--tui-motion-timing);
     transition-property: border-color;
@@ -3999,8 +4041,8 @@
   :where(.tui-interface) .tui-radio__indicator::after {
     content: "";
     display: block;
-    width: 0.5em;
-    height: 0.5em;
+    width: calc(var(--_size) * 0.435);
+    height: calc(var(--_size) * 0.435);
     border-radius: 50%;
     background-color: transparent;
     transform: scale(0);
@@ -4013,6 +4055,22 @@
     line-height: 1.25em;
     user-select: none;
   }
+  :where(.tui-interface) .tui-radio__body {
+    padding-inline-start: calc(var(--_size) + var(--_gap));
+  }
+  :where(.tui-interface) .tui-radio__description {
+    display: block;
+    margin: 0;
+    font-size: var(--_fs);
+    color: var(--_desc-color);
+    line-height: var(--tui-typography-line-height);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where(.tui-interface) .tui-radio__indicator,
+    :where(.tui-interface) .tui-radio__indicator::after {
+      transition: none;
+    }
+  }
   @media (forced-colors: active) {
     :where(.tui-interface) .tui-radio__indicator {
       forced-color-adjust: none;
@@ -4022,10 +4080,10 @@
     :where(.tui-interface) .tui-radio__indicator::after {
       background-color: CanvasText;
     }
-    :where(.tui-interface) .tui-radio[aria-checked=true] .tui-radio__indicator {
+    :where(.tui-interface) .tui-radio:has(.tui-radio__control[aria-checked=true]) .tui-radio__indicator {
       border-color: Highlight;
     }
-    :where(.tui-interface) .tui-radio[aria-checked=true] .tui-radio__indicator::after {
+    :where(.tui-interface) .tui-radio:has(.tui-radio__control[aria-checked=true]) .tui-radio__indicator::after {
       background-color: Highlight;
     }
   }
@@ -4481,8 +4539,8 @@
   :where(.tui-interface) .tui-switch {
     display: inline-flex;
     align-items: center;
-    gap: var(--tui-spacing-xs);
-    font-size: var(--tui-typography-size-md);
+    gap: var(--tui-switch-gap, var(--tui-spacing-xs));
+    font-size: var(--tui-switch-font-size, var(--tui-typography-size-md));
     cursor: pointer;
     user-select: none;
   }
@@ -4500,12 +4558,17 @@
     font-weight: unset;
     line-height: 1.25em;
     font-size: var(--tui-typography-size-sm);
+    color: var(--tui-switch-label-color, inherit);
     user-select: none;
   }
   :where(.tui-interface) .tui-switch__track {
     --_accent: var(--tui-switch-accent, var(--tui-input-accent, var(--tui-theme-primary-base)));
-    --_track-off: var(--tui-switch-track-off, var(--tui-theme-secondary-soft));
-    font-size: var(--tui-typography-size-md);
+    --_bg: var(--tui-switch-bg, var(--tui-theme-secondary-soft));
+    --_border: var(--tui-switch-border, var(--_bg));
+    --_thumb-bg: var(--tui-switch-thumb-bg, var(--tui-color-bg));
+    --_track-height: var(--tui-switch-track-height, 1.4285em);
+    --_thumb-size: calc(var(--_track-height) - 4px);
+    font-size: var(--tui-switch-size, var(--tui-typography-size-md));
   }
   :where(.tui-interface) .tui-switch__track.is-size-sm {
     font-size: var(--tui-typography-size-sm);
@@ -4519,10 +4582,10 @@
     align-items: center;
     flex-shrink: 0;
     width: 2.8575em;
-    height: 1.4285em;
+    height: var(--_track-height);
     border-radius: 9999px;
-    border: var(--tui-border-width) solid var(--_track-off);
-    background-color: var(--_track-off);
+    border: var(--tui-border-width) solid var(--_border);
+    background-color: var(--_bg);
     padding: 0;
     cursor: pointer;
     appearance: none;
@@ -4538,24 +4601,30 @@
   :where(.tui-interface) .tui-switch__track:disabled {
     cursor: not-allowed;
   }
-  :where(.tui-interface) .tui-switch__track.is-checked {
+  :where(.tui-interface) .tui-switch__track[aria-checked=true] {
     background-color: var(--_accent);
     border-color: var(--_accent);
   }
+  :where(.tui-interface) .tui-switch__track[aria-invalid=true] {
+    --_border: var(--tui-theme-danger-base);
+  }
+  :where(.tui-interface) .tui-switch__track[aria-invalid=true][aria-checked=true] {
+    border-color: var(--tui-theme-danger-base);
+  }
   :where(.tui-interface) .tui-switch__thumb {
     display: block;
-    width: calc(1.4285em - 4px);
-    height: calc(1.4285em - 4px);
+    width: var(--_thumb-size);
+    height: var(--_thumb-size);
     border-radius: 50%;
-    background-color: var(--tui-color-bg);
+    background-color: var(--_thumb-bg);
     transform: translateX(2px);
     transition-duration: var(--tui-motion-duration);
     transition-timing-function: var(--tui-motion-timing);
     transition-property: transform;
     pointer-events: none;
   }
-  :where(.tui-interface) .tui-switch__track.is-checked .tui-switch__thumb {
-    transform: translateX(calc(2.8575em - calc(1.4285em - 4px) - 2px - 2 * var(--tui-border-width)));
+  :where(.tui-interface) .tui-switch__track[aria-checked=true] .tui-switch__thumb {
+    transform: translateX(calc(2.8575em - var(--_thumb-size) - 2px - 2 * var(--tui-border-width)));
   }
   @media (forced-colors: active) {
     :where(.tui-interface) .tui-switch__track {
@@ -4563,20 +4632,27 @@
       border: 2px solid CanvasText;
       background-color: Canvas;
     }
-    :where(.tui-interface) .tui-switch__track.is-checked {
+    :where(.tui-interface) .tui-switch__track[aria-checked=true] {
       background-color: Highlight;
       border-color: Highlight;
     }
     :where(.tui-interface) .tui-switch__track:focus-visible {
-      outline-color: Highlight;
+      outline-color: ButtonText;
+      outline-offset: 3px;
     }
     :where(.tui-interface) .tui-switch__thumb {
       background-color: CanvasText;
     }
-    :where(.tui-interface) .tui-switch__track.is-checked .tui-switch__thumb {
+    :where(.tui-interface) .tui-switch__track[aria-checked=true] .tui-switch__thumb {
       background-color: HighlightText;
     }
   }
+  @media (prefers-reduced-motion: reduce) {
+    :where(.tui-interface) .tui-switch__track,
+    :where(.tui-interface) .tui-switch__thumb {
+      transition: none;
+    }
+  }
   :where(.tui-interface) .tui-sidebar {
     --_width: var(--tui-sidebar-width, 320px);
     --_bg: var(--tui-sidebar-bg, var(--tui-color-bg-surface));
@@ -5909,8 +5985,7 @@
   .tui-interface ul.tui-inline-flex,
   .tui-interface ul.tui-flex {
     list-style: none !important;
-    padding: 0 !important;
-    margin: 0 !important;
+    padding-inline-start: 0 !important;
   }
   .tui-interface ul.tui-grid > li,
   .tui-interface ul.tui-stack > li,
@@ -5918,6 +5993,14 @@
   .tui-interface ul.tui-flex > li {
     list-style: none !important;
   }
+  .tui-interface .tui-list-reset {
+    list-style: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+  .tui-interface .tui-list-reset > li {
+    list-style: none !important;
+  }
   .tui-interface .is-density-none {
     --tui-gap-inline: 0;
     --tui-gap-block: 0;