@metropolle/design-system 1.2025.1-2.14.2035 → 1.2025.1-2.29.1129

package/dist/css/components.css

@@ -1036,6 +1036,372 @@ html body div.mds-dropdown select.mds-select-themed {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
 }
 
+/* Select dropdown option styles for .mds-input - fixes Edge/Windows dropdown visibility */
+select.mds-input {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  color-scheme: dark; /* Forces OS to render dropdown with dark theme on Edge/Chrome Windows */
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right var(--mds-spacing-md) center;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  padding-right: calc(var(--mds-spacing-md) + 24px);
+  cursor: pointer;
+}
+
+select.mds-input:disabled {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  cursor: not-allowed;
+}
+
+select.mds-input option {
+  background-color: var(--mds-dashboard-control-option-bg) !important;
+  color: var(--mds-dashboard-control-option-color) !important;
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm) !important;
+}
+
+select.mds-input option:hover,
+select.mds-input option:focus,
+select.mds-input option:checked {
+  background-color: var(--mds-dashboard-control-option-bg-hover) !important;
+  color: var(--mds-dashboard-control-option-color-hover) !important;
+}
+
+/* Light theme override for select.mds-input */
+html[data-theme="light"] select.mds-input {
+  color-scheme: light;
+}
+
+/* ============================================
+   Custom Select Component (JavaScript-rendered dropdown)
+   Cross-browser compatible - works on Edge/Chrome Windows
+   ============================================ */
+
+/* Select Trigger Button */
+.mds-select-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  font-family: var(--mds-typography-fontFamily-brand, system-ui, sans-serif);
+  font-size: 0.95rem;
+  line-height: 1.5;
+  color: var(--mds-color-text-primary, #ffffff);
+  background-color: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: left;
+  outline: none;
+  overflow: hidden;
+}
+
+.mds-select-trigger:hover:not(:disabled) {
+  background-color: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.25);
+}
+
+.mds-select-trigger:focus:not(:disabled) {
+  border-color: var(--mds-color-primary, #3b82f6);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
+}
+
+.mds-select-trigger--open {
+  border-color: var(--mds-color-primary, #3b82f6);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
+}
+
+.mds-select-trigger--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: rgba(255, 255, 255, 0.04);
+}
+
+.mds-select-trigger--loading {
+  cursor: wait;
+}
+
+.mds-select-trigger--error {
+  border-color: var(--mds-color-error, #ef4444);
+}
+
+.mds-select-trigger--error:focus {
+  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
+}
+
+.mds-select-trigger--full-width {
+  width: 100%;
+}
+
+/* Select Trigger Value */
+.mds-select-trigger__value {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mds-select-trigger__placeholder {
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+}
+
+/* Select Trigger Icon */
+.mds-select-trigger__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+  transition: transform 0.2s ease;
+}
+
+.mds-select-trigger--open .mds-select-trigger__icon {
+  transform: rotate(180deg);
+}
+
+.mds-select-chevron {
+  width: 16px;
+  height: 16px;
+}
+
+.mds-select-spinner {
+  width: 16px;
+  height: 16px;
+  animation: mds-select-spin 1s linear infinite;
+}
+
+@keyframes mds-select-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Select Dropdown */
+.mds-select-dropdown {
+  background-color: var(--mds-dashboard-control-option-bg, #2a2a2a);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  animation: mds-select-dropdown-enter 0.15s ease-out;
+}
+
+@keyframes mds-select-dropdown-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Select Search */
+.mds-select-search {
+  position: relative;
+  padding: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.mds-select-search__input {
+  width: 100%;
+  padding: 8px 12px 8px 36px;
+  font-family: var(--mds-typography-fontFamily-brand, system-ui, sans-serif);
+  font-size: 0.9rem;
+  color: var(--mds-color-text-primary, #ffffff);
+  background-color: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 6px;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.mds-select-search__input:focus {
+  border-color: var(--mds-color-primary, #3b82f6);
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+.mds-select-search__input::-moz-placeholder {
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+}
+
+.mds-select-search__input::placeholder {
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+}
+
+.mds-select-search__icon {
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+  pointer-events: none;
+}
+
+/* Select Options List */
+.mds-select-options {
+  list-style: none;
+  margin: 0;
+  padding: 4px;
+  overflow-y: auto;
+  max-height: inherit;
+}
+
+/* Select Option */
+.mds-select-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 12px;
+  font-size: 0.95rem;
+  color: var(--mds-dashboard-control-option-color, #ffffff);
+  background-color: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.mds-select-option:hover,
+.mds-select-option--highlighted {
+  background-color: var(--mds-dashboard-control-option-bg-hover, #505050);
+}
+
+.mds-select-option--selected {
+  color: var(--mds-color-primary, #3b82f6);
+  font-weight: 500;
+}
+
+.mds-select-option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.mds-select-option--disabled:hover {
+  background-color: transparent;
+}
+
+.mds-select-option--empty {
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.5));
+  font-style: italic;
+  cursor: default;
+}
+
+.mds-select-option--empty:hover {
+  background-color: transparent;
+}
+
+.mds-select-option__label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mds-select-option__check {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--mds-color-primary, #3b82f6);
+}
+
+/* Select Size Variants */
+.mds-select--sm .mds-select-trigger {
+  padding: 6px 10px;
+  font-size: 0.85rem;
+}
+
+.mds-select--sm .mds-select-option {
+  padding: 6px 10px;
+  font-size: 0.85rem;
+}
+
+.mds-select--lg .mds-select-trigger {
+  padding: 14px 16px;
+  font-size: 1.05rem;
+}
+
+.mds-select--lg .mds-select-option {
+  padding: 12px 16px;
+  font-size: 1.05rem;
+}
+
+/* Light Theme Overrides */
+html[data-theme="light"] .mds-select-trigger {
+  color: var(--mds-color-text-primary, #1a1a1a);
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.15);
+}
+
+html[data-theme="light"] .mds-select-trigger:hover:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.08);
+  border-color: rgba(0, 0, 0, 0.25);
+}
+
+html[data-theme="light"] .mds-select-trigger__placeholder {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
+html[data-theme="light"] .mds-select-trigger__icon {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
+html[data-theme="light"] .mds-select-dropdown {
+  background-color: var(--mds-dashboard-control-option-bg, #ffffff);
+  border-color: rgba(0, 0, 0, 0.15);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="light"] .mds-select-search {
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme="light"] .mds-select-search__input {
+  color: var(--mds-color-text-primary, #1a1a1a);
+  background-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(0, 0, 0, 0.15);
+}
+
+html[data-theme="light"] .mds-select-search__input:focus {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+html[data-theme="light"] .mds-select-search__input::-moz-placeholder {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
+html[data-theme="light"] .mds-select-search__input::placeholder {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
+html[data-theme="light"] .mds-select-search__icon {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
+html[data-theme="light"] .mds-select-option {
+  color: var(--mds-dashboard-control-option-color, #1a1a1a);
+}
+
+html[data-theme="light"] .mds-select-option:hover,
+html[data-theme="light"] .mds-select-option--highlighted {
+  background-color: var(--mds-dashboard-control-option-bg-hover, #f0f7ff);
+}
+
+html[data-theme="light"] .mds-select-option--empty {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.5));
+}
+
 /* Label styles */
 .mds-label {
   display: block;

package/dist/react/components/react/Select/Select.d.ts

@@ -1,20 +1,71 @@
-import React, { SelectHTMLAttributes } from 'react';
+import React from 'react';
 export interface SelectOption {
-    label: React.ReactNode;
+    /** Display label (must be string for serialization safety) */
+    label: string;
+    /** Option value */
     value: string;
+    /** Disable this option */
+    disabled?: boolean;
 }
-export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
-    options?: SelectOption[];
+export interface SelectProps {
+    /** Array of options to display */
+    options: SelectOption[];
+    /** Currently selected value */
+    value?: string;
+    /** Callback when value changes */
+    onChange?: (value: string) => void;
+    /** Placeholder text when no value selected */
+    placeholder?: string;
+    /** Visual variant */
     variant?: 'base' | 'themed' | 'dashboard';
-    containerClassName?: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Disable the select */
+    disabled?: boolean;
+    /** Show loading state */
+    loading?: boolean;
+    /** Error state */
+    error?: boolean;
+    /** Additional class for the trigger button */
+    className?: string;
+    /** Additional class for the dropdown container */
+    dropdownClassName?: string;
+    /** ID for the select (for labels) */
+    id?: string;
+    /** Name attribute for form submission */
+    name?: string;
+    /** ARIA label */
+    'aria-label'?: string;
+    /** Full width mode */
+    fullWidth?: boolean;
+    /** Enable search/filter functionality */
+    searchable?: boolean;
+    /** Search placeholder */
+    searchPlaceholder?: string;
+    /** Max height of dropdown in pixels */
+    maxHeight?: number;
+    /** Z-index for dropdown (default: 1050) */
+    zIndex?: number;
 }
 /**
  * Select Component (Design System)
  *
- * Provides a themed select element with multiple variants:
- * - `base`: Standard form select with mds-input styling
- * - `themed`: Generic themed select with dashboard control styling (recommended)
- * - `dashboard`: Legacy alias for themed variant (backward compatibility)
+ * Custom dropdown select that renders consistently across all browsers.
+ * Unlike native <select>, this component renders the dropdown via JavaScript,
+ * ensuring proper theming support on Edge/Chrome Windows.
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   options={[
+ *     { label: 'Option 1', value: '1' },
+ *     { label: 'Option 2', value: '2' },
+ *   ]}
+ *   value={selectedValue}
+ *   onChange={setSelectedValue}
+ *   placeholder="Select an option..."
+ * />
+ * ```
  */
-export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=Select.d.ts.map

package/dist/react/components/react/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGhE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAE1E,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IAEzB,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC;IAE1C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,uFAwCjB,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAI7F,MAAM,WAAW,YAAY;IAC3B,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,kCAAkC;IAClC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC;IAC1C,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM,uFAoXjB,CAAC"}

package/dist/react/components/react/index.d.ts

@@ -1,7 +1,7 @@
 export { GlassCard, type GlassCardProps } from './GlassCard';
 export { Typography, BrandLogo, type TypographyProps, type BrandLogoProps } from './Typography';
 export { Button, type ButtonProps } from './Button';
-export { Select, type SelectProps } from './Select';
+export { Select, type SelectProps, type SelectOption } from './Select';
 export { ThemeToggle, type ThemeToggleProps } from './ThemeToggle';
 export { DataTable, CellRenderers, ActionIcons, getTableConfig, type DataTableProps, type TableColumn, type TableAction } from './DataTable';
 export { cn } from '../../utils/cn';

package/dist/react/components/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/react/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,UAAU,EACV,SAAS,EACT,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,SAAS,EACT,aAAa,EACb,WAAW,EACX,cAAc,EACd,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,WAAW,EACjB,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAGpC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/react/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,UAAU,EACV,SAAS,EACT,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,SAAS,EACT,aAAa,EACb,WAAW,EACX,cAAc,EACd,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,WAAW,EACjB,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAGpC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC"}

package/dist/react/index.d.ts

@@ -1,7 +1,7 @@
 export { GlassCard, type GlassCardProps } from './GlassCard';
 export { Typography, BrandLogo, type TypographyProps, type BrandLogoProps } from './Typography';
 export { Button, type ButtonProps } from './Button';
-export { Select, type SelectProps } from './Select';
+export { Select, type SelectProps, type SelectOption } from './Select';
 export { ThemeToggle, type ThemeToggleProps } from './ThemeToggle';
 export { DataTable, CellRenderers, ActionIcons, getTableConfig, type DataTableProps, type TableColumn, type TableAction } from './DataTable';
 export { cn } from '../../utils/cn';