WIP: Adding components/ CSS from Dispatcher port

Author: tcannonfodder

css/components/datatable-filters.scss

@@ -0,0 +1,3 @@
+.datatable-filters {
+  padding: var(--wa-space-s);
+}

css/components/dropdown-navigation.scss

@@ -0,0 +1,13 @@
+wa-dropdown .dropdown-navigation {
+  background-color: var(--wa-color-surface-raised);
+  border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
+  border-radius: var(--wa-border-radius-m);
+}
+
+.dropdown-navigation {
+  padding-block: var(--wa-space-m);
+}
+
+.dropdown-navigation > *:not(wa-divider) {
+  padding-inline: var(--wa-space-m);
+}

css/components/field-title.scss

@@ -0,0 +1,5 @@
+.field-title {
+  > div {
+    min-inline-size: max-content;
+  }
+}

css/components/icon-text.scss

@@ -0,0 +1,5 @@
+.icon-text {
+  > span {
+    min-inline-size: max-content;
+  }
+}

css/components/index.scss

@@ -0,0 +1,11 @@
+@use 'toast';
+@use 'wa-component-with-fallback';
+@use 'dropdown-navigation';
+@use 'icon-text';
+@use 'field-title';
+@use 'user-name';
+@use 'organization-name';
+@use 'navigation-list';
+@use 'navigation-link';
+@use 'pagination-goto-form';
+@use 'datatable-filters';

css/components/navigation-link.scss

@@ -0,0 +1,10 @@
+.navigation-link {
+  padding: var(--wa-space-2xs) var(--wa-space-xs);
+}
+
+.navigation-link[data-selected] {
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  border-radius: var(--wa-border-radius-s);
+}

css/components/navigation-list.scss

@@ -0,0 +1,8 @@
+.navigation-list {
+  list-style: none;
+  margin: 0;
+
+  > li {
+    padding: 0;
+  }
+}

css/components/organization-name.scss

@@ -0,0 +1,5 @@
+.organization-name {
+  > span {
+    min-inline-size: max-content;
+  }
+}

css/components/pagination-goto-form.scss

@@ -0,0 +1,11 @@
+.pagination-goto-form {
+  fieldset{
+    max-inline-size: max-content;
+    padding: var(--wa-space-xs);
+  }
+
+  input {
+    min-inline-size: max-content;
+    max-inline-size: max-content;
+  }
+}

css/components/toast.scss

@@ -0,0 +1,15 @@
+dialog.toast {
+  margin: 0;
+  padding: 0;
+  border: none;
+  position: static;
+  box-shadow: unset;
+}
+
+toast-dialog {
+  [remaining-time-indicator] {
+    --size: 2rem;
+    --track-color: var(--wa-color-fill-normal);
+    --indicator-color: var(--wa-color-fill-loud);
+  }
+}