@askrjs/themes 0.0.2 → 0.0.4

package/src/themes/default/styles/base/utilities.css

@@ -18,114 +18,131 @@
   border: 0;
 }
 
-:where(.gap-1, [data-slot="grid"][data-gap="initial:1"], [data-slot="flex"][data-gap="initial:1"]) {
+:where(
+  .gap-1,
+  [data-slot="flex"][data-gap="initial:1"],
+  [data-slot="block"][data-gap="initial:1"],
+  [data-slot="shell"][data-gap="initial:1"]
+) {
   gap: var(--ak-space-1);
 }
 
-:where(.gap-2, [data-slot="grid"][data-gap="initial:2"], [data-slot="flex"][data-gap="initial:2"]) {
+:where(
+  .gap-2,
+  [data-slot="flex"][data-gap="initial:2"],
+  [data-slot="block"][data-gap="initial:2"],
+  [data-slot="shell"][data-gap="initial:2"]
+) {
   gap: var(--ak-space-2);
 }
 
-:where(.gap-3, [data-slot="grid"][data-gap="initial:3"], [data-slot="flex"][data-gap="initial:3"]) {
+:where(
+  .gap-3,
+  [data-slot="flex"][data-gap="initial:3"],
+  [data-slot="block"][data-gap="initial:3"],
+  [data-slot="shell"][data-gap="initial:3"]
+) {
   gap: var(--ak-space-3);
 }
 
-:where(.gap-4, [data-slot="grid"][data-gap="initial:4"], [data-slot="flex"][data-gap="initial:4"]) {
+:where(
+  .gap-4,
+  [data-slot="flex"][data-gap="initial:4"],
+  [data-slot="block"][data-gap="initial:4"],
+  [data-slot="shell"][data-gap="initial:4"]
+) {
   gap: var(--ak-space-4);
 }
 
 :where(
   .gap-xs,
-  [data-slot="grid"][data-gap="initial:xs"],
-  [data-slot="flex"][data-gap="initial:xs"]
+  [data-slot="flex"][data-gap="initial:xs"],
+  [data-slot="block"][data-gap="initial:xs"],
+  [data-slot="shell"][data-gap="initial:xs"]
 ) {
   gap: var(--ak-space-xs);
 }
 
 :where(
   .gap-sm,
-  [data-slot="grid"][data-gap="initial:sm"],
   [data-slot="flex"][data-gap="initial:sm"],
-  [data-slot="sidebar-layout"][data-gap="sm"],
-  [data-slot="topbar-layout"][data-gap="sm"]
+  [data-slot="block"][data-gap="initial:sm"],
+  [data-slot="shell"][data-gap="initial:sm"]
 ) {
   gap: var(--ak-space-sm);
 }
 
 :where(
   .gap-md,
-  [data-slot="grid"][data-gap="initial:md"],
   [data-slot="flex"][data-gap="initial:md"],
-  [data-slot="sidebar-layout"][data-gap="md"],
-  [data-slot="topbar-layout"][data-gap="md"]
+  [data-slot="block"][data-gap="initial:md"],
+  [data-slot="shell"][data-gap="initial:md"]
 ) {
   gap: var(--ak-space-md);
 }
 
 :where(
   .gap-lg,
-  [data-slot="grid"][data-gap="initial:lg"],
   [data-slot="flex"][data-gap="initial:lg"],
-  [data-slot="sidebar-layout"][data-gap="lg"],
-  [data-slot="topbar-layout"][data-gap="lg"]
+  [data-slot="block"][data-gap="initial:lg"],
+  [data-slot="shell"][data-gap="initial:lg"]
 ) {
   gap: var(--ak-space-lg);
 }
 
 :where(
   .gap-xl,
-  [data-slot="grid"][data-gap="initial:xl"],
   [data-slot="flex"][data-gap="initial:xl"],
-  [data-slot="sidebar-layout"][data-gap="xl"],
-  [data-slot="topbar-layout"][data-gap="xl"]
+  [data-slot="block"][data-gap="initial:xl"],
+  [data-slot="shell"][data-gap="initial:xl"]
 ) {
   gap: var(--ak-space-xl);
 }
 
 :where(
   .gap-x-sm,
-  [data-slot="grid"][data-gap-x="initial:sm"],
-  [data-slot="flex"][data-gap-x="initial:sm"]
+  [data-slot="flex"][data-gap-x="initial:sm"],
+  [data-slot="block"][data-gap-x="initial:sm"]
 ) {
   column-gap: var(--ak-space-sm);
 }
 
 :where(
   .gap-x-md,
-  [data-slot="grid"][data-gap-x="initial:md"],
-  [data-slot="flex"][data-gap-x="initial:md"]
+  [data-slot="flex"][data-gap-x="initial:md"],
+  [data-slot="block"][data-gap-x="initial:md"]
 ) {
   column-gap: var(--ak-space-md);
 }
 
 :where(
   .gap-x-lg,
-  [data-slot="grid"][data-gap-x="initial:lg"],
-  [data-slot="flex"][data-gap-x="initial:lg"]
+  [data-slot="flex"][data-gap-x="initial:lg"],
+  [data-slot="block"][data-gap-x="initial:lg"]
 ) {
   column-gap: var(--ak-space-lg);
 }
 
 :where(
   .gap-y-sm,
-  [data-slot="grid"][data-gap-y="initial:sm"],
-  [data-slot="flex"][data-gap-y="initial:sm"]
+  [data-slot="flex"][data-gap-y="initial:sm"],
+  [data-slot="block"][data-gap-y="initial:sm"]
 ) {
   row-gap: var(--ak-space-sm);
 }
 
 :where(
   .gap-y-md,
-  [data-slot="grid"][data-gap-y="initial:md"],
-  [data-slot="flex"][data-gap-y="initial:md"]
+  [data-slot="flex"][data-gap-y="initial:md"],
+  [data-slot="block"][data-gap-y="initial:md"]
 ) {
   row-gap: var(--ak-space-md);
 }
 
 :where(
   .gap-y-lg,
-  [data-slot="grid"][data-gap-y="initial:lg"],
-  [data-slot="flex"][data-gap-y="initial:lg"]
+  [data-slot="flex"][data-gap-y="initial:lg"],
+  [data-slot="block"][data-gap-y="initial:lg"]
 ) {
   row-gap: var(--ak-space-lg);
 }
@@ -145,7 +162,7 @@
 :where(
   .items-start,
   [data-slot="flex"][data-align="initial:start"],
-  [data-slot="grid"][data-align="initial:start"]
+  [data-slot="block"][data-align="initial:start"]
 ) {
   align-items: flex-start;
 }
@@ -153,7 +170,7 @@
 :where(
   .items-end,
   [data-slot="flex"][data-align="initial:end"],
-  [data-slot="grid"][data-align="initial:end"]
+  [data-slot="block"][data-align="initial:end"]
 ) {
   align-items: flex-end;
 }
@@ -161,7 +178,7 @@
 :where(
   .items-center,
   [data-slot="flex"][data-align="initial:center"],
-  [data-slot="grid"][data-align="initial:center"]
+  [data-slot="block"][data-align="initial:center"]
 ) {
   align-items: center;
 }
@@ -169,7 +186,7 @@
 :where(
   .items-stretch,
   [data-slot="flex"][data-align="initial:stretch"],
-  [data-slot="grid"][data-align="initial:stretch"]
+  [data-slot="block"][data-align="initial:stretch"]
 ) {
   align-items: stretch;
 }
@@ -177,7 +194,7 @@
 :where(
   .items-baseline,
   [data-slot="flex"][data-align="initial:baseline"],
-  [data-slot="grid"][data-align="initial:baseline"]
+  [data-slot="block"][data-align="initial:baseline"]
 ) {
   align-items: baseline;
 }
@@ -185,7 +202,7 @@
 :where(
   .justify-start,
   [data-slot="flex"][data-justify="initial:start"],
-  [data-slot="grid"][data-justify="initial:start"]
+  [data-slot="block"][data-justify="initial:start"]
 ) {
   justify-content: flex-start;
 }
@@ -193,7 +210,7 @@
 :where(
   .justify-end,
   [data-slot="flex"][data-justify="initial:end"],
-  [data-slot="grid"][data-justify="initial:end"]
+  [data-slot="block"][data-justify="initial:end"]
 ) {
   justify-content: flex-end;
 }
@@ -201,7 +218,7 @@
 :where(
   .justify-center,
   [data-slot="flex"][data-justify="initial:center"],
-  [data-slot="grid"][data-justify="initial:center"]
+  [data-slot="block"][data-justify="initial:center"]
 ) {
   justify-content: center;
 }
@@ -209,7 +226,7 @@
 :where(
   .justify-between,
   [data-slot="flex"][data-justify="initial:between"],
-  [data-slot="grid"][data-justify="initial:between"]
+  [data-slot="block"][data-justify="initial:between"]
 ) {
   justify-content: space-between;
 }

package/src/themes/default/styles/disclosure/accordion.css

@@ -1,9 +1,9 @@
-[data-slot="accordion"] {
+:where([data-slot="accordion"]) {
   display: grid;
   gap: var(--ak-space-sm);
 }
 
-[data-slot="accordion-item"] {
+:where([data-slot="accordion-item"]) {
   border: 1px solid var(--ak-color-border);
   border-radius: var(--ak-radius-md);
   background: var(--ak-color-surface);
@@ -11,24 +11,30 @@
   transition: border-color var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-[data-slot="accordion-item"][data-state="open"] {
+:where([data-slot="accordion-item"][data-state="open"]) {
   border-color: var(--ak-color-primary);
 }
 
-[data-slot="accordion-header"] {
+:where([data-slot="accordion-header"]) {
   margin: 0;
 }
 
-[data-slot="accordion-trigger"] {
+:where([data-slot="accordion-trigger"]) {
   display: flex;
   align-items: center;
   justify-content: space-between;
   inline-size: 100%;
-  min-height: 2.75rem;
-  padding: 0 var(--ak-space-md);
+  min-height: var(--ak-density-control-height-lg);
+  min-inline-size: 0;
+  padding: 0 var(--ak-density-control-padding-x-md);
   border: 0;
   background: transparent;
   color: var(--ak-color-text);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+  text-align: start;
   cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
@@ -36,27 +42,29 @@
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-[data-slot="accordion-trigger"]:hover {
+:where([data-slot="accordion-trigger"]:hover) {
   background: var(--ak-color-hover);
 }
 
-[data-slot="accordion-trigger"]:active {
+:where([data-slot="accordion-trigger"]:active) {
   background: var(--ak-color-active);
 }
 
-[data-slot="accordion-trigger"]:focus-visible {
+:where([data-slot="accordion-trigger"]:focus-visible) {
   outline: none;
-  box-shadow: inset 0 0 0 3px var(--ak-color-focus-ring);
+  box-shadow: inset 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
-[data-slot="accordion-trigger"][data-disabled] {
-  opacity: 0.5;
+:where([data-slot="accordion-trigger"][data-disabled]) {
+  color: var(--ak-color-disabled-text);
   pointer-events: none;
   cursor: not-allowed;
 }
 
-[data-slot="accordion-content"] {
+:where([data-slot="accordion-content"]) {
   padding: 0 var(--ak-space-md) var(--ak-space-md);
   color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
   line-height: var(--ak-line-height-normal);
+  overflow-wrap: anywhere;
 }

package/src/themes/default/styles/disclosure/collapsible.css

@@ -1,13 +1,19 @@
-[data-slot="collapsible-trigger"] {
+:where([data-slot="collapsible-trigger"]) {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 2.5rem;
-  padding: 0 var(--ak-space-md);
+  min-height: var(--ak-density-control-height-md);
+  min-inline-size: 0;
+  padding: 0 var(--ak-density-control-padding-x-md);
   border: 1px solid var(--ak-color-border);
   border-radius: var(--ak-radius-md);
   background: var(--ak-color-surface);
   color: var(--ak-color-text);
+  font-size: var(--ak-font-size-sm);
+  font-weight: var(--ak-font-weight-semibold);
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+  text-align: start;
   cursor: pointer;
   transition:
     background var(--ak-duration-fast) var(--ak-ease-standard),
@@ -16,32 +22,37 @@
     box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
 }
 
-[data-slot="collapsible-trigger"][data-state="open"] {
+:where([data-slot="collapsible-trigger"][data-state="open"]) {
   border-color: var(--ak-color-primary);
 }
 
-[data-slot="collapsible-trigger"]:hover {
+:where([data-slot="collapsible-trigger"]:hover) {
   background: var(--ak-color-hover);
   border-color: var(--ak-color-border-strong);
 }
 
-[data-slot="collapsible-trigger"]:active {
+:where([data-slot="collapsible-trigger"]:active) {
   background: var(--ak-color-active);
 }
 
-[data-slot="collapsible-trigger"]:focus-visible {
+:where([data-slot="collapsible-trigger"]:focus-visible) {
   outline: none;
-  box-shadow: 0 0 0 3px var(--ak-color-focus-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
 }
 
-[data-slot="collapsible-trigger"][data-disabled] {
-  opacity: 0.5;
+:where([data-slot="collapsible-trigger"][data-disabled]) {
+  background: var(--ak-color-disabled-surface);
+  border-color: var(--ak-color-disabled-border);
+  box-shadow: none;
+  color: var(--ak-color-disabled-text);
   pointer-events: none;
   cursor: not-allowed;
 }
 
-[data-slot="collapsible-content"] {
+:where([data-slot="collapsible-content"]) {
   padding: var(--ak-space-md) 0 0;
   color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
   line-height: var(--ak-line-height-normal);
+  overflow-wrap: anywhere;
 }

package/src/themes/default/styles/display/alert.css

@@ -0,0 +1,109 @@
+:where(.alert, [data-slot="alert"]) {
+  --_alert-bg: color-mix(in srgb, var(--ak-color-surface-muted) 86%, var(--ak-color-surface));
+  --_alert-border: color-mix(in srgb, var(--ak-color-border) 82%, var(--ak-color-surface));
+  --_alert-ink: var(--ak-color-text);
+  --_alert-icon-bg: var(--ak-color-surface);
+  --_alert-icon-ink: var(--ak-color-text-muted);
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ak-space-sm);
+  min-inline-size: 0;
+  padding: calc(var(--ak-layout-panel-padding) - 0.05rem) var(--ak-layout-panel-padding);
+  border: 1px solid var(--_alert-border);
+  border-radius: var(--ak-radius-lg);
+  background: var(--_alert-bg);
+  color: var(--_alert-ink);
+  box-shadow: var(--ak-shadow-sm);
+}
+
+:where(.alert.alert-info, [data-slot="alert"][data-variant="info"]) {
+  --_alert-bg: color-mix(in srgb, var(--ak-color-info-soft) 52%, var(--ak-color-surface));
+  --_alert-border: color-mix(in srgb, var(--ak-color-info) 16%, var(--ak-color-border));
+  --_alert-ink: var(--ak-color-info-ink);
+  --_alert-icon-bg: color-mix(in srgb, var(--ak-color-info-soft) 60%, var(--ak-color-surface));
+  --_alert-icon-ink: var(--ak-color-info);
+}
+
+:where(.alert.alert-success, [data-slot="alert"][data-variant="success"]) {
+  --_alert-bg: color-mix(in srgb, var(--ak-color-success-soft) 52%, var(--ak-color-surface));
+  --_alert-border: color-mix(in srgb, var(--ak-color-success) 16%, var(--ak-color-border));
+  --_alert-ink: var(--ak-color-success-ink);
+  --_alert-icon-bg: color-mix(in srgb, var(--ak-color-success-soft) 60%, var(--ak-color-surface));
+  --_alert-icon-ink: var(--ak-color-success);
+}
+
+:where(.alert.alert-warning, [data-slot="alert"][data-variant="warning"]) {
+  --_alert-bg: color-mix(in srgb, var(--ak-color-warning-soft) 52%, var(--ak-color-surface));
+  --_alert-border: color-mix(in srgb, var(--ak-color-warning) 16%, var(--ak-color-border));
+  --_alert-ink: var(--ak-color-warning-ink);
+  --_alert-icon-bg: color-mix(in srgb, var(--ak-color-warning-soft) 60%, var(--ak-color-surface));
+  --_alert-icon-ink: var(--ak-color-warning);
+}
+
+:where(.alert.alert-danger, [data-slot="alert"][data-variant="danger"]) {
+  --_alert-bg: color-mix(in srgb, var(--ak-color-danger-soft) 52%, var(--ak-color-surface));
+  --_alert-border: color-mix(in srgb, var(--ak-color-danger) 16%, var(--ak-color-border));
+  --_alert-ink: var(--ak-color-danger-ink);
+  --_alert-icon-bg: color-mix(in srgb, var(--ak-color-danger-soft) 60%, var(--ak-color-surface));
+  --_alert-icon-ink: var(--ak-color-danger);
+}
+
+:where(.alert-icon, [data-slot="alert-icon"]) {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  border-radius: var(--ak-radius-round);
+  background: var(--_alert-icon-bg);
+  color: var(--_alert-icon-ink);
+}
+
+:where(.alert-content, [data-slot="alert-content"]) {
+  display: grid;
+  gap: var(--ak-space-2xs, 0.25rem);
+  min-inline-size: 0;
+  flex: 1 1 auto;
+}
+
+:where(.alert-title, [data-slot="alert-title"]) {
+  margin: 0;
+  color: currentColor;
+  font-size: var(--ak-font-size-md);
+  font-weight: var(--ak-font-weight-bold);
+  line-height: var(--ak-line-height-tight);
+  overflow-wrap: anywhere;
+}
+
+:where(.alert-description, [data-slot="alert-description"]) {
+  margin: 0;
+  color: color-mix(in srgb, currentColor 82%, var(--ak-color-text-muted));
+  font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-line-height-normal);
+  overflow-wrap: anywhere;
+}
+
+:where(.alert-actions, [data-slot="alert-actions"]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ak-space-xs);
+  margin-top: var(--ak-space-xs);
+}
+
+:where(.alert-close, [data-slot="alert-close"]) {
+  flex: none;
+  margin-inline-start: auto;
+}
+
+@media (max-width: 30rem) {
+  :where(.alert, [data-slot="alert"]) {
+    gap: var(--ak-space-xs);
+    padding: var(--ak-space-md);
+  }
+
+  :where(.alert-icon, [data-slot="alert-icon"]) {
+    inline-size: 2rem;
+    block-size: 2rem;
+  }
+}

package/src/themes/default/styles/display/avatar.css

@@ -1,25 +1,30 @@
-[data-slot="avatar"] {
+:where(.avatar, [data-slot="avatar"]) {
   display: inline-grid;
+  flex: none;
   place-items: center;
   inline-size: 2.5rem;
   block-size: 2.5rem;
   overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--ak-color-border) 72%, transparent);
   border-radius: 999px;
-  background: var(--ak-color-surface-muted);
+  background: color-mix(in srgb, var(--ak-color-surface-muted) 86%, var(--ak-color-surface) 14%);
   color: var(--ak-color-text);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ak-color-surface) 72%, transparent);
 }
 
-[data-slot="avatar-image"] {
+:where(.avatar-image, [data-slot="avatar-image"]) {
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
 }
 
-[data-slot="avatar-fallback"] {
+:where(.avatar-fallback, [data-slot="avatar-fallback"]) {
   display: inline-grid;
   place-items: center;
   inline-size: 100%;
   block-size: 100%;
   font-size: var(--ak-font-size-sm);
   font-weight: var(--ak-font-weight-semibold);
+  line-height: 1;
+  overflow-wrap: anywhere;
 }

package/src/themes/default/styles/display/badge.css

@@ -2,8 +2,10 @@
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
-  min-height: 1.625rem;
-  padding: 0 0.625rem;
+  min-height: 1.5rem;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  padding: 0 0.55rem;
   border: 1px solid color-mix(in srgb, var(--ak-color-primary) 10%, var(--ak-color-border-subtle));
   border-radius: var(--ak-radius-sm);
   background: color-mix(in srgb, var(--ak-color-primary-soft) 58%, var(--ak-color-surface));
@@ -11,7 +13,14 @@
   box-shadow: none;
   font-size: var(--ak-font-size-xs);
   font-weight: var(--ak-font-weight-semibold);
-  letter-spacing: 0.015em;
+  line-height: 1;
+  letter-spacing: 0;
+  overflow-wrap: anywhere;
+}
+
+:where(.badge, [data-slot="badge"]) > :where([data-slot="icon"]) {
+  inline-size: var(--ak-icon-size-sm);
+  block-size: var(--ak-icon-size-sm);
 }
 
 :where(.badge-secondary, [data-slot="badge"][data-variant="secondary"]) {

package/src/themes/default/styles/display/card.css

@@ -1,8 +1,9 @@
 :where(.card, [data-slot="card"]) {
   display: grid;
-  gap: var(--ak-space-xs);
+  gap: var(--ak-space-md);
   padding: var(--ak-layout-panel-padding);
-  border: 1px solid color-mix(in srgb, var(--ak-color-border-subtle) 86%, white 14%);
+  border: 1px solid
+    color-mix(in srgb, var(--ak-color-border-subtle) 86%, var(--ak-color-surface) 14%);
   border-radius: var(--ak-radius-md);
   background: var(--ak-color-surface);
   color: var(--ak-color-text);
@@ -32,13 +33,16 @@
   margin: 0;
   color: var(--ak-color-text);
   font-size: var(--ak-font-size-lg);
-  font-weight: 650;
-  line-height: 1.15;
+  font-weight: var(--ak-font-weight-semibold);
+  letter-spacing: -0.01em;
+  line-height: 1.2;
 }
 
 :where(.card-description, [data-slot="card-description"]) {
   margin: 0;
   color: var(--ak-color-text-muted);
+  font-size: var(--ak-font-size-sm);
+  line-height: var(--ak-line-height-normal);
 }
 
 :where(.card-content, [data-slot="card-content"]) {
@@ -51,3 +55,11 @@
   gap: var(--ak-space-sm);
   align-items: center;
 }
+
+:where(.card-actions, [data-slot="card-actions"]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ak-space-sm);
+  align-items: center;
+  justify-content: flex-end;
+}

package/src/themes/default/styles/display/coverage.css

@@ -7,11 +7,6 @@
   box-sizing: border-box;
 }
 
-[data-slot="grid"] {
-  display: grid;
-  gap: var(--ak-space-md);
-}
-
 [data-slot="stack"] {
   display: flex;
   flex-direction: column;
@@ -141,7 +136,7 @@
   cursor: pointer;
 }
 
-[data-slot="dropdown-menu-group"],
+[data-slot="dropdown-group"],
 [data-slot="menu-group"],
 [data-slot="menubar-group"],
 [data-slot="select-group"] {
@@ -195,7 +190,7 @@
 [data-columns],
 [data-dialog-overlay],
 [data-dismissable-layer],
-[data-dropdown-menu-label],
+[data-dropdown-label],
 [data-fluid],
 [data-focus-ring],
 [data-focus-scope],
@@ -209,11 +204,6 @@
 [data-menubar-label],
 [data-min-height],
 [data-min-item-width],
-[data-navigation-menu],
-[data-navigation-menu-indicator],
-[data-navigation-menu-link],
-[data-navigation-menu-list],
-[data-navigation-menu-viewport],
 [data-padding],
 [data-percentage],
 [data-progress],
@@ -232,8 +222,6 @@
 [data-slider-range],
 [data-slider-thumb],
 [data-slider-track],
-[data-tabs],
-[data-tabs-list],
 [data-toast],
 [data-toast-action],
 [data-toast-close],