secure-ui-components 0.1.0-beta.1

package/dist/components/secure-table/secure-table.css

@@ -0,0 +1,341 @@
+/**
+ * Secure Table Component Styles
+ * Uses design tokens for full customizability
+ */
+
+/* Host Container */
+:host {
+  display: block;
+  font-family: var(--secure-ui-font-family-base);
+}
+
+/* Table Container */
+.table-container {
+  background: var(--secure-ui-color-bg-primary);
+  border-radius: var(--secure-ui-border-radius-lg);
+  border: var(--secure-ui-border-width-thin) solid var(--secure-ui-color-border);
+  overflow: hidden;
+}
+
+/* Table Header Controls */
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--secure-ui-space-4);
+  background-color: var(--secure-ui-color-bg-secondary);
+  border-bottom: var(--secure-ui-border-width-thin) solid var(--secure-ui-color-border);
+  gap: var(--secure-ui-space-3);
+  flex-wrap: wrap;
+}
+
+.table-title {
+  font-size: var(--secure-ui-font-size-lg);
+  font-weight: var(--secure-ui-font-weight-semibold);
+  color: var(--secure-ui-color-text-primary);
+  margin: 0;
+}
+
+.table-controls {
+  display: flex;
+  gap: var(--secure-ui-space-3);
+  align-items: center;
+}
+
+/* Search Input */
+.search-input {
+  padding: var(--secure-ui-space-2) var(--secure-ui-space-3);
+  border: var(--secure-ui-border-width-thin) solid var(--secure-ui-color-border);
+  border-radius: var(--secure-ui-border-radius-base);
+  font-size: var(--secure-ui-font-size-sm);
+  font-family: var(--secure-ui-font-family-base);
+  color: var(--secure-ui-color-text-primary);
+  background-color: var(--secure-ui-color-bg-primary);
+  min-width: 200px;
+  transition: all var(--secure-ui-transition-base) var(--secure-ui-transition-ease-in-out);
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--secure-ui-color-primary);
+  box-shadow: var(--secure-ui-shadow-focus);
+}
+
+.search-input::placeholder {
+  color: var(--secure-ui-color-text-secondary);
+}
+
+/* Table Wrapper (for horizontal scrolling) */
+.table-wrapper {
+  overflow-x: auto;
+  overflow-y: visible;
+}
+
+/* Table Element */
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--secure-ui-font-size-sm);
+  color: var(--secure-ui-table-font-color);
+}
+
+/* Table Head */
+.data-table thead {
+  background-color: var(--secure-ui-color-bg-tertiary);
+  border-bottom: var(--secure-ui-border-width-base) solid var(--secure-ui-color-border);
+}
+
+.data-table th {
+  padding: var(--secure-ui-space-3) var(--secure-ui-space-4);
+  text-align: left;
+  font-weight: var(--secure-ui-font-weight-semibold);
+  color: var(--secure-ui-color-text-primary);
+  white-space: nowrap;
+  position: relative;
+}
+
+/* Sortable Column Headers */
+.data-table th.sortable {
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--secure-ui-transition-fast) var(--secure-ui-transition-ease-in-out);
+}
+
+.data-table th.sortable:hover {
+  background-color: var(--secure-ui-color-bg-secondary);
+}
+
+.data-table th.sorted {
+  color: var(--secure-ui-color-primary);
+}
+
+.sort-indicator {
+  display: inline-block;
+  margin-left: var(--secure-ui-space-1);
+  font-size: var(--secure-ui-font-size-xs);
+  opacity: 0.5;
+  transition: opacity var(--secure-ui-transition-fast) var(--secure-ui-transition-ease-in-out);
+}
+
+.data-table th.sorted .sort-indicator {
+  opacity: 1;
+}
+
+/* Table Body */
+.data-table tbody tr {
+  border-bottom: var(--secure-ui-border-width-thin) solid var(--secure-ui-color-border);
+  transition: background-color var(--secure-ui-transition-fast) var(--secure-ui-transition-ease-in-out);
+}
+
+.data-table tbody tr:hover {
+  background-color: var(--secure-ui-color-bg-secondary);
+}
+
+.data-table tbody tr:last-child {
+  border-bottom: none;
+}
+
+.data-table td {
+  padding: var(--secure-ui-space-3) var(--secure-ui-space-4);
+  color: var(--secure-ui-color-text-primary);
+  vertical-align: middle;
+}
+
+/* Masked Data */
+.masked-cell {
+  font-family: var(--secure-ui-font-family-mono);
+  color: var(--secure-ui-color-text-secondary);
+  letter-spacing: 0.1em;
+}
+
+/* Empty State */
+.empty-state {
+  padding: var(--secure-ui-space-8) var(--secure-ui-space-4);
+  text-align: center;
+  color: var(--secure-ui-color-text-secondary);
+}
+
+.empty-state-icon {
+  font-size: var(--secure-ui-font-size-3xl);
+  margin-bottom: var(--secure-ui-space-2);
+}
+
+.empty-state-text {
+  font-size: var(--secure-ui-font-size-base);
+  margin: 0;
+}
+
+/* Pagination */
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--secure-ui-space-4);
+  background-color: var(--secure-ui-color-bg-secondary);
+  border-top: var(--secure-ui-border-width-thin) solid var(--secure-ui-color-border);
+  gap: var(--secure-ui-space-3);
+  flex-wrap: wrap;
+}
+
+.pagination-info {
+  font-size: var(--secure-ui-font-size-sm);
+  color: var(--secure-ui-color-text-secondary);
+}
+
+.pagination-controls {
+  display: flex;
+  gap: var(--secure-ui-space-2);
+}
+
+.pagination-button {
+  padding: var(--secure-ui-space-2) var(--secure-ui-space-3);
+  border: var(--secure-ui-border-width-thin) solid var(--secure-ui-color-border);
+  border-radius: var(--secure-ui-border-radius-base);
+  background-color: var(--secure-ui-color-bg-primary);
+  color: var(--secure-ui-color-text-primary);
+  font-size: var(--secure-ui-font-size-sm);
+  font-family: var(--secure-ui-font-family-base);
+  cursor: pointer;
+  transition: all var(--secure-ui-transition-base) var(--secure-ui-transition-ease-in-out);
+}
+
+.pagination-button:hover:not(:disabled) {
+  background-color: var(--secure-ui-color-primary);
+  color: var(--secure-ui-color-text-inverse);
+  border-color: var(--secure-ui-color-primary);
+}
+
+.pagination-button:disabled {
+  opacity: var(--secure-ui-input-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.pagination-button.active {
+  background-color: var(--secure-ui-color-primary);
+  color: var(--secure-ui-color-text-inverse);
+  border-color: var(--secure-ui-color-primary);
+}
+
+/* Page Size Selector */
+.page-size-selector {
+  display: flex;
+  align-items: center;
+  gap: var(--secure-ui-space-2);
+  font-size: var(--secure-ui-font-size-sm);
+  color: var(--secure-ui-color-text-secondary);
+}
+
+.page-size-select {
+  padding: var(--secure-ui-space-1) var(--secure-ui-space-2);
+  border: var(--secure-ui-border-width-thin) solid var(--secure-ui-color-border);
+  border-radius: var(--secure-ui-border-radius-base);
+  background-color: var(--secure-ui-color-bg-primary);
+  color: var(--secure-ui-color-text-primary);
+  font-size: var(--secure-ui-font-size-sm);
+  font-family: var(--secure-ui-font-family-base);
+  cursor: pointer;
+}
+
+/* Loading State */
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--secure-ui-z-sticky);
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--secure-ui-color-border);
+  border-top-color: var(--secure-ui-color-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Security Tier Styles */
+:host([security-tier="authenticated"]) .table-container {
+  border-top: var(--secure-ui-border-width-thick) solid var(--secure-ui-tier-authenticated);
+}
+
+:host([security-tier="sensitive"]) .table-container {
+  border-top: var(--secure-ui-border-width-thick) solid var(--secure-ui-tier-sensitive);
+}
+
+:host([security-tier="critical"]) .table-container {
+  border-top: var(--secure-ui-border-width-thick) solid var(--secure-ui-tier-critical);
+}
+
+/* Security Badge */
+.security-badge {
+  display: inline-block;
+  padding: var(--secure-ui-badge-padding);
+  margin-left: var(--secure-ui-space-2);
+  font-size: var(--secure-ui-badge-font-size);
+  font-weight: var(--secure-ui-font-weight-semibold);
+  border-radius: var(--secure-ui-badge-border-radius);
+  text-transform: uppercase;
+  background-color: var(--secure-ui-color-bg-tertiary);
+  color: var(--secure-ui-color-text-secondary);
+  border: var(--secure-ui-border-width-thin) solid var(--secure-ui-color-border);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .table-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .table-controls {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .search-input {
+    width: 100%;
+    min-width: auto;
+  }
+
+  .pagination {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .pagination-controls {
+    justify-content: center;
+  }
+
+  /* Horizontal scroll shadow indicator — purely visual, no generated text content
+     that would be read by screen readers (replaces previous '← Scroll →' ::after) */
+  .table-wrapper {
+    position: relative;
+    background:
+      linear-gradient(to right, var(--secure-ui-color-bg-primary) 0%, transparent 100%) left,
+      linear-gradient(to left,  var(--secure-ui-color-bg-primary) 0%, transparent 100%) right,
+      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), transparent) left,
+      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), transparent) right;
+    background-repeat: no-repeat;
+    background-size: 32px 100%, 32px 100%, 10px 100%, 10px 100%;
+    background-attachment: local, local, scroll, scroll;
+  }
+}
+
+/* Zebra Striping (Optional Enhancement) */
+.data-table tbody tr:nth-child(even) {
+  background-color: rgba(0, 0, 0, 0.01);
+}
+
+.data-table tbody tr:nth-child(even):hover {
+  background-color: var(--secure-ui-color-bg-secondary);
+}

package/dist/components/secure-table/secure-table.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Secure Table Component
+ *
+ * A security-aware data table component with filtering, sorting, and pagination.
+ *
+ * Features:
+ * - Real-time filtering/search across all columns
+ * - Column sorting (ascending/descending)
+ * - Pagination
+ * - Security tier-based column masking
+ * - XSS prevention via sanitization
+ * - Audit logging for data access
+ *
+ * @example
+ * <secure-table
+ *   id="userTable"
+ *   security-tier="sensitive"
+ * ></secure-table>
+ *
+ * // Set data programmatically
+ * const table = document.getElementById('userTable');
+ * table.data = [
+ *   { id: 1, name: 'John', email: 'john@example.com' },
+ *   { id: 2, name: 'Jane', email: 'jane@example.com' }
+ * ];
+ * table.columns = [
+ *   { key: 'id', label: 'ID', sortable: true },
+ *   { key: 'name', label: 'Name', sortable: true, filterable: true },
+ *   { key: 'email', label: 'Email', sortable: true, filterable: true, tier: 'sensitive' }
+ * ];
+ */
+import { SecureBaseComponent } from '../../core/base-component.js';
+import type { TableColumnDefinition } from '../../core/types.js';
+export declare class SecureTable extends SecureBaseComponent {
+    #private;
+    constructor();
+    /**
+     * Required by abstract base class, but this component manages its own rendering
+     * via the private #render() method.
+     * @protected
+     */
+    protected render(): DocumentFragment | HTMLElement | null;
+    /**
+     * Component lifecycle - called when added to DOM
+     */
+    connectedCallback(): void;
+    /**
+     * Set table data
+     */
+    set data(data: Record<string, unknown>[]);
+    /**
+     * Get table data
+     */
+    get data(): Record<string, unknown>[];
+    /**
+     * Set column configuration
+     */
+    set columns(columns: TableColumnDefinition[]);
+    /**
+     * Get column configuration
+     */
+    get columns(): TableColumnDefinition[];
+}
+//# sourceMappingURL=secure-table.d.ts.map

package/dist/components/secure-table/secure-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"secure-table.d.ts","sourceRoot":"","sources":["../../../src/components/secure-table/secure-table.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnE,OAAO,KAAK,EAAE,qBAAqB,EAAyC,MAAM,qBAAqB,CAAC;AAExG,qBAAa,WAAY,SAAQ,mBAAmB;;;IA+ClD;;;;OAIG;IACH,SAAS,CAAC,MAAM,IAAI,gBAAgB,GAAG,WAAW,GAAG,IAAI;IAIzD;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAuGzB;;OAEG;IACH,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EASvC;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAEpC;IAED;;OAEG;IACH,IAAI,OAAO,CAAC,OAAO,EAAE,qBAAqB,EAAE,EAQ3C;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,qBAAqB,EAAE,CAErC;CAmYF"}