newtui 2.0.0

package/registry/html/components/permission.html

@@ -0,0 +1,33 @@
+<div class="newt-permission">
+  <div class="newt-permission__info">
+    <span class="newt-permission__name">Permission name</span>
+    <span class="newt-permission__desc">Permission description.</span>
+  </div>
+  <div
+    class="newt-permission__states"
+    role="group"
+    aria-label="Permission name"
+  >
+    <button
+      class="newt-permission__state newt-permission__state--deny"
+      aria-pressed="false"
+      aria-label="Deny"
+    >
+      ✕
+    </button>
+    <button
+      class="newt-permission__state newt-permission__state--inherit newt-permission__state--active"
+      aria-pressed="true"
+      aria-label="Inherit"
+    >
+      /
+    </button>
+    <button
+      class="newt-permission__state newt-permission__state--allow"
+      aria-pressed="false"
+      aria-label="Allow"
+    >
+      ✓
+    </button>
+  </div>
+</div>

package/registry/html/components/progress.css

@@ -0,0 +1,29 @@
+/* newt-ui · Progress Bar (server boost / upload style) */
+
+.newt-progress {
+  width: 100%;
+  height: 8px;
+  border-radius: var(--newt-radius-full);
+  background: var(--newt-bg-base);
+  overflow: hidden;
+}
+.newt-progress__fill {
+  height: 100%;
+  border-radius: var(--newt-radius-full);
+  background: linear-gradient(90deg, var(--newt-brand), #8c54ff);
+  transition: width var(--newt-duration-base) var(--newt-ease);
+}
+.newt-progress__fill--success {
+  background: linear-gradient(90deg, var(--newt-online), #45c178);
+}
+.newt-progress__fill--danger {
+  background: linear-gradient(90deg, var(--newt-dnd), #f4878a);
+}
+
+.newt-progress-label {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--newt-text-muted);
+  margin-bottom: 6px;
+}

package/registry/html/components/progress.html

@@ -0,0 +1,6 @@
+<div>
+  <div class="newt-progress-label"><span>Label</span><span>50%</span></div>
+  <div class="newt-progress">
+    <div class="newt-progress__fill" style="width: 50%"></div>
+  </div>
+</div>

package/registry/html/components/reaction.css

@@ -0,0 +1,33 @@
+/* newt-ui · Reaction Pill */
+
+.newt-reaction {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: var(--newt-radius-md);
+  border: 1px solid var(--newt-border);
+  background: var(--newt-bg-surface);
+  font-size: 13px;
+  color: var(--newt-text-secondary);
+  cursor: pointer;
+  transition:
+    background var(--newt-duration-fast) var(--newt-ease),
+    border-color var(--newt-duration-fast) var(--newt-ease);
+}
+.newt-reaction:hover {
+  background: var(--newt-bg-hover);
+}
+.newt-reaction--active {
+  background: rgba(88, 101, 242, 0.15);
+  border-color: var(--newt-brand);
+  color: #b3baff;
+}
+.newt-reaction:focus-visible {
+  outline: 2px solid var(--newt-text-link);
+  outline-offset: 2px;
+}
+.newt-reaction__count {
+  font-weight: 600;
+  font-size: 12px;
+}

package/registry/html/components/reaction.html

@@ -0,0 +1,14 @@
+<button
+  class="newt-reaction newt-reaction--active"
+  aria-pressed="true"
+  aria-label="👍 reaction, 12 people, you reacted"
+>
+  <span aria-hidden="true">👍</span><span class="newt-reaction__count">12</span>
+</button>
+<button
+  class="newt-reaction"
+  aria-pressed="false"
+  aria-label="🚀 reaction, 4 people"
+>
+  <span aria-hidden="true">🚀</span><span class="newt-reaction__count">4</span>
+</button>

package/registry/html/components/reply-preview.css

@@ -0,0 +1,35 @@
+/* newt-ui · Reply Preview (Discord "replying to" bar) */
+
+.newt-reply {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--newt-text-muted);
+  margin-bottom: 4px;
+  padding-left: 18px;
+  position: relative;
+}
+.newt-reply::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid var(--newt-border);
+  border-top: 2px solid var(--newt-border);
+  border-radius: 6px 0 0 0;
+  transform: translateY(-100%);
+}
+.newt-reply__author {
+  color: var(--newt-text-link);
+  font-weight: 500;
+}
+.newt-reply__text {
+  color: var(--newt-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 360px;
+}

package/registry/html/components/reply-preview.html

@@ -0,0 +1,4 @@
+<div class="newt-reply">
+  <span class="newt-reply__author">@username</span>
+  <span class="newt-reply__text">original message text being replied to</span>
+</div>

package/registry/html/components/role-tag.css

@@ -0,0 +1,19 @@
+/* newt-ui · Role Tag */
+
+.newt-role-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: var(--newt-radius-sm);
+  background: var(--newt-bg-elevated);
+  border: 1px solid var(--newt-border);
+}
+.newt-role-tag__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+}

package/registry/html/components/role-tag.html

@@ -0,0 +1,3 @@
+<span class="newt-role-tag"
+  ><span class="newt-role-tag__dot"></span>Role name</span
+>

package/registry/html/components/scrollbar.css

@@ -0,0 +1,26 @@
+/* newt-ui · Scrollbar Utility */
+
+.newt-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--newt-bg-active) transparent;
+}
+.newt-scrollbar::-webkit-scrollbar {
+  width: 16px;
+  height: 16px;
+}
+.newt-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.newt-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--newt-bg-active);
+  border: 4px solid transparent;
+  background-clip: padding-box;
+  border-radius: 8px;
+}
+.newt-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--newt-text-muted);
+  background-clip: padding-box;
+}
+.newt-scrollbar::-webkit-scrollbar-corner {
+  background-color: transparent;
+}

package/registry/html/components/scrollbar.html

@@ -0,0 +1,7 @@
+<!--
+  Apply the .newt-scrollbar class to any scrollable container to get
+  Discord-styled scrollbars (thin, rounded thumb, transparent track).
+-->
+<div class="newt-scrollbar" style="max-height: 240px; overflow-y: auto">
+  <!-- scrollable content -->
+</div>

package/registry/html/components/select-menu.css

@@ -0,0 +1,72 @@
+/* newt-ui · Select Menu */
+
+.newt-select-menu {
+  background: var(--newt-bg-floating);
+  border: 1px solid var(--newt-border);
+  border-radius: var(--newt-radius-md);
+  box-shadow: var(--newt-shadow-elevation-high);
+  padding: 6px;
+  min-width: 200px;
+  max-height: 320px;
+  overflow-y: auto;
+}
+.newt-select-menu__search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: var(--newt-bg-base);
+  border-radius: var(--newt-radius-sm);
+  margin-bottom: 4px;
+}
+.newt-select-menu__search input {
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--newt-text-primary);
+  font-family: var(--newt-font-sans);
+  font-size: 14px;
+  width: 100%;
+}
+.newt-select-menu__search input::placeholder {
+  color: var(--newt-text-muted);
+}
+.newt-select-menu__label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--newt-text-muted);
+  padding: 4px 10px 2px;
+}
+.newt-select-menu__option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: var(--newt-radius-sm);
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--newt-text-secondary);
+}
+.newt-select-menu__option:hover {
+  background: var(--newt-brand);
+  color: #fff;
+}
+.newt-select-menu__option--selected {
+  color: var(--newt-text-primary);
+}
+.newt-select-menu__option--selected::after {
+  content: "✓";
+  margin-left: auto;
+  color: var(--newt-brand);
+  font-weight: 700;
+}
+.newt-select-menu__option:hover::after {
+  color: #fff;
+}
+.newt-select-menu__divider {
+  height: 1px;
+  background: var(--newt-border);
+  margin: 4px 6px;
+}

package/registry/html/components/select-menu.html

@@ -0,0 +1,19 @@
+<div class="newt-select-menu" role="listbox" aria-label="Select an option">
+  <div class="newt-select-menu__search">
+    <input type="text" placeholder="Search…" aria-label="Search options" />
+  </div>
+  <div class="newt-select-menu__label">Options</div>
+  <div
+    class="newt-select-menu__option newt-select-menu__option--selected"
+    role="option"
+    aria-selected="true"
+  >
+    Option one
+  </div>
+  <div class="newt-select-menu__option" role="option" aria-selected="false">
+    Option two
+  </div>
+  <div class="newt-select-menu__option" role="option" aria-selected="false">
+    Option three
+  </div>
+</div>

package/registry/html/components/server-banner.css

@@ -0,0 +1,58 @@
+/* newt-ui · Server Banner */
+
+.newt-server-banner {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  background: var(--newt-bg-elevated);
+  border: 1px solid var(--newt-border);
+  border-radius: var(--newt-radius-lg);
+  padding: 16px 20px;
+  max-width: 480px;
+}
+.newt-server-banner__icon {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--newt-radius-lg);
+  background: var(--newt-brand);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.newt-server-banner__info {
+  flex: 1;
+  min-width: 0;
+}
+.newt-server-banner__name {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--newt-text-primary);
+}
+.newt-server-banner__meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 13px;
+  color: var(--newt-text-muted);
+  margin-top: 2px;
+}
+.newt-server-banner__meta-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.newt-server-banner__meta-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.newt-server-banner__meta-dot--online {
+  background: var(--newt-online);
+}
+.newt-server-banner__meta-dot--offline {
+  background: var(--newt-offline);
+}

package/registry/html/components/server-banner.html

@@ -0,0 +1,21 @@
+<div class="newt-server-banner">
+  <div class="newt-server-banner__icon" aria-hidden="true">N</div>
+  <div class="newt-server-banner__info">
+    <div class="newt-server-banner__name">Server name</div>
+    <div class="newt-server-banner__meta">
+      <span class="newt-server-banner__meta-item">
+        <span
+          class="newt-server-banner__meta-dot newt-server-banner__meta-dot--online"
+        ></span>
+        142 Online
+      </span>
+      <span class="newt-server-banner__meta-item">
+        <span
+          class="newt-server-banner__meta-dot newt-server-banner__meta-dot--offline"
+        ></span>
+        1,024 Members
+      </span>
+    </div>
+  </div>
+  <button class="newt-btn newt-btn--primary">Join</button>
+</div>

package/registry/html/components/skeleton.css

@@ -0,0 +1,40 @@
+/* newt-ui · Skeleton Loader */
+
+.newt-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--newt-bg-elevated) 25%,
+    var(--newt-bg-hover) 50%,
+    var(--newt-bg-elevated) 75%
+  );
+  background-size: 200% 100%;
+  border-radius: var(--newt-radius-sm);
+  animation: newt-skeleton-shimmer 1.6s ease-in-out infinite;
+}
+.newt-skeleton--text {
+  height: 14px;
+}
+.newt-skeleton--avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+.newt-skeleton--title {
+  height: 20px;
+  width: 40%;
+}
+
+@keyframes newt-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .newt-skeleton {
+    animation: none;
+    opacity: 0.6;
+  }
+}

package/registry/html/components/skeleton.html

@@ -0,0 +1,7 @@
+<div style="display: flex; gap: 12px">
+  <div class="newt-skeleton newt-skeleton--avatar"></div>
+  <div style="display: flex; flex-direction: column; flex: 1; gap: 6px">
+    <div class="newt-skeleton newt-skeleton--title"></div>
+    <div class="newt-skeleton newt-skeleton--text" style="width: 80%"></div>
+  </div>
+</div>

package/registry/html/components/slash-command.css

@@ -0,0 +1,16 @@
+/* newt-ui · Slash Command Block */
+
+.newt-command {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(88, 101, 242, 0.15);
+  color: #b3baff;
+  font-family: var(--newt-font-mono);
+  font-size: 13px;
+  padding: 2px 8px 2px 6px;
+  border-radius: var(--newt-radius-sm);
+}
+.newt-command__icon {
+  opacity: 0.8;
+}

package/registry/html/components/slash-command.html

@@ -0,0 +1,3 @@
+<span class="newt-command"
+  ><span class="newt-command__icon">/</span>command</span
+>

package/registry/html/components/spoiler.css

@@ -0,0 +1,22 @@
+/* newt-ui · Spoiler */
+
+.newt-spoiler {
+  background: #1a1a1e;
+  color: transparent;
+  border-radius: var(--newt-radius-sm);
+  padding: 0 4px;
+  cursor: pointer;
+  transition:
+    background var(--newt-duration-fast) var(--newt-ease),
+    color 0s;
+  user-select: none;
+}
+.newt-spoiler--revealed {
+  background: var(--newt-bg-active);
+  color: var(--newt-text-primary);
+  user-select: text;
+  cursor: text;
+}
+.newt-spoiler:not(.newt-spoiler--revealed):hover {
+  background: #232328;
+}

package/registry/html/components/spoiler.html

@@ -0,0 +1,8 @@
+<span
+  class="newt-spoiler"
+  tabindex="0"
+  role="button"
+  aria-label="Spoiler, click to reveal"
+  onclick="this.classList.toggle('newt-spoiler--revealed')"
+  >hidden text</span
+>

package/registry/html/components/stage-banner.css

@@ -0,0 +1,46 @@
+/* newt-ui · Stage Banner */
+
+.newt-stage-banner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: var(--newt-brand);
+  color: #fff;
+  padding: 10px 16px;
+  font-size: 13px;
+  font-weight: 500;
+}
+.newt-stage-banner__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #fff;
+  flex-shrink: 0;
+}
+.newt-stage-banner__action {
+  margin-left: auto;
+  background: rgba(0, 0, 0, 0.2);
+  color: #fff;
+  border: none;
+  border-radius: var(--newt-radius-sm);
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.newt-stage-banner__action:hover {
+  background: rgba(0, 0, 0, 0.32);
+}
+.newt-stage-banner--dismissible .newt-stage-banner__close {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.newt-stage-banner__close:hover {
+  color: #fff;
+}

package/registry/html/components/stage-banner.html

@@ -0,0 +1,22 @@
+<div class="newt-stage-banner">
+  <span class="newt-stage-banner__dot" aria-hidden="true"></span>
+  Announcement text goes here.
+  <button class="newt-stage-banner__action">Action</button>
+</div>
+
+<div
+  class="newt-stage-banner newt-stage-banner--dismissible"
+  style="
+    background: var(--newt-bg-elevated);
+    color: var(--newt-text-primary);
+    border: 1px solid var(--newt-border);
+  "
+>
+  <span
+    class="newt-stage-banner__dot"
+    aria-hidden="true"
+    style="background: var(--newt-online)"
+  ></span>
+  Status message goes here.
+  <button class="newt-stage-banner__close" aria-label="Dismiss">×</button>
+</div>

package/registry/html/components/status-indicator.css

@@ -0,0 +1,85 @@
+/* newt-ui · Status Indicator */
+
+.newt-status {
+  position: relative;
+  display: inline-block;
+}
+
+.newt-status__dot {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 3px solid var(--newt-bg-base);
+  background: var(--newt-offline);
+}
+
+.newt-status__dot--online {
+  background: var(--newt-online);
+}
+.newt-status__dot--idle {
+  background: var(--newt-bg-base);
+  border-color: var(--newt-bg-base);
+}
+.newt-status__dot--idle::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: var(--newt-idle);
+  clip-path: circle(60% at 35% 35%);
+}
+.newt-status__dot--dnd {
+  background: var(--newt-bg-base);
+}
+.newt-status__dot--dnd::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 65%;
+  height: 22%;
+  border-radius: 1px;
+  background: var(--newt-dnd);
+}
+.newt-status__dot--offline {
+  background: var(--newt-offline);
+}
+.newt-status__dot--streaming {
+  background: #593695;
+}
+
+/* presence glow — signature motif */
+.newt-status__dot--online::after {
+  content: "";
+  position: absolute;
+  inset: -4px;
+  border-radius: 50%;
+  border: 1.5px solid var(--newt-online);
+  opacity: 0;
+  animation: newt-presence-pulse 2.4s ease-out infinite;
+}
+
+@keyframes newt-presence-pulse {
+  0% {
+    transform: scale(0.7);
+    opacity: 0.6;
+  }
+  70% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .newt-status__dot--online::after {
+    animation: none;
+  }
+}

package/registry/html/components/status-indicator.html

@@ -0,0 +1,4 @@
+<div class="newt-status" role="status" aria-label="Online">
+  <div class="newt-avatar">A</div>
+  <div class="newt-status__dot newt-status__dot--online"></div>
+</div>