@foxeltech/angular-ui 0.0.14 → 0.3.0

package/package.json

@@ -1,18 +1,12 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.0.14",
+  "version": "0.3.0",
   "license": "MIT",
-  "main": "bundles/ui.umd.js",
-  "module": "fesm2022/foxeltech-angular-ui.mjs",
-  "es2020": "fesm2020/ui.mjs",
-  "typings": "index.d.ts",
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "tailwindcss": "^3.0.0",
-    "autoprefixer": "^10.0.0",
-    "postcss": "^8.0.0",
+    "tailwindcss": "^4.0.0",
     "@angular/common": "^20.3.0",
     "@angular/animations": "^20.3.0",
     "@angular/core": "^20.3.0",
@@ -37,13 +31,14 @@
     "@microsoft/signalr": "^10.0.0"
   },
   "exports": {
-    "./tailwind-config": "./tailwind.config.js",
     "./tailwind.css": "./tailwind.css",
     "./theme.css": "./theme.css",
     "./components.css": "./components.css",
     "./dialogs.css": "./dialogs.css",
     "./fonts.css": "./fonts.css",
     "./animations.css": "./animations.css",
+    "./tokens.css": "./tokens.css",
+    "./utilities.css": "./utilities.css",
     "./package.json": {
       "default": "./package.json"
     },
@@ -52,5 +47,9 @@
       "default": "./fesm2022/foxeltech-angular-ui.mjs"
     }
   },
-  "sideEffects": false
+  "sideEffects": [
+    "*.css"
+  ],
+  "module": "fesm2022/foxeltech-angular-ui.mjs",
+  "typings": "index.d.ts"
 }

package/src/lib/styles/components.css

@@ -79,6 +79,11 @@
 .mat-mdc-tooltip {
   border-radius: 6px !important;
   background-color: rgb(var(--bg-primary)) !important;
+  --mdc-plain-tooltip-container-color: rgb(var(--bg-primary));
+  --mdc-plain-tooltip-supporting-text-color: rgb(var(--text-primary));
+}
+.mat-mdc-tooltip .mdc-tooltip__surface {
+  color: rgb(var(--text-primary)) !important;
 }
 
 .mat-mdc-table {
@@ -291,9 +296,6 @@ input[type='password'] {
 .txt-card-info-description {
   @apply text-xs font-light text-text-secondary tracking-normal;
 }
-.txt-tag-common {
-  @apply font-semibold text-xs;
-}
 .txt-tag-default {
   @apply txt-tag-common text-text-secondary;
 }
@@ -325,9 +327,6 @@ input[type='password'] {
   @apply font-mono text-sm text-text-primary tracking-normal;
 }
 
-.btn-common {
-  @apply flex text-sm h-10 font-semibold px-xl py-normal items-center justify-center rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
-}
 .btn-default {
   @apply btn-common bg-button-default hover:opacity-75 text-text-inverse;
 }
@@ -340,9 +339,6 @@ input[type='password'] {
 .btn-alternative {
   @apply btn-common hover:bg-bg-hover text-text-primary border border-border-default;
 }
-.btn-menu-common {
-  @apply flex flex-row items-center px-semi;
-}
 .btn-menu-top {
   @apply btn-menu-common border-b border-border-default pt-small pb-semi;
 }
@@ -354,7 +350,7 @@ input[type='password'] {
 }
 
 .input-default {
-  @apply block h-[36px] text-text-primary placeholder:text-text-placeholder bg-bg-primary w-full rounded-md border px-semi py-normal border-border-default focus:outline-none focus:border-2 focus:border-gradient-primary-start text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out;
+  @apply block h-[36px] text-text-primary placeholder:text-text-placeholder bg-bg-primary w-full rounded-md border px-semi py-normal border-border-default focus:outline-none focus:border-2 focus:border-gradient-primary-start focus-visible:ring-2 focus-visible:ring-primary/50 text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out;
 }
 .input-invalid {
   @apply border-bg-error focus:ring-bg-error focus:border-bg-error;
@@ -363,12 +359,9 @@ input[type='password'] {
   @apply focus:border-2 focus:border-border-hover2 focus:bg-bg-hover2;
 }
 .input-otp {
-  @apply bg-bg-primary w-full rounded-md border px-semi py-normal border-border-default focus:outline-none focus:border-2 focus:border-gradient-primary-start text-text-primary ring-0 transition-colors duration-500 ease-in-out;
+  @apply bg-bg-primary w-full rounded-md border px-semi py-normal border-border-default focus:outline-none focus:border-2 focus:border-gradient-primary-start focus-visible:ring-2 focus-visible:ring-primary/50 text-text-primary ring-0 transition-colors duration-500 ease-in-out;
 }
 
-.card-common {
-  @apply text-left px-xl py-large border border-border-default rounded-lg shadow-sm transition-colors duration-500 ease-in-out;
-}
 .card-information {
   @apply card-common hover:opacity-70 hover:shadow-md hover:border-border-selected;
 }
@@ -379,9 +372,6 @@ input[type='password'] {
   @apply flex items-center justify-between rounded-md px-semi py-normal bg-bg-primary mb-normal last:mb-0;
 }
 
-.tag-common {
-  @apply flex min-w-7 px-[10px] py-[2px] leading-5 hover:opacity-70 items-center justify-center;
-}
 .tag-default {
   @apply tag-common bg-bg-hover;
 }

package/src/lib/styles/fonts.css

@@ -1,237 +1,271 @@
 @font-face {
   font-family: 'BeVietnamPro';
-  src: url('./BeVietnamPro/BeVietnamPro-Thin.ttf') format('truetype');
+  font-display: swap;
+  src: url('./BeVietnamPro/BeVietnamPro-Thin.woff2') format('woff2');
   font-weight: 100;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'BeVietnamPro';
-  src: url('./BeVietnamPro/BeVietnamPro-ExtraLight.ttf') format('truetype');
+  font-display: swap;
+  src: url('./BeVietnamPro/BeVietnamPro-ExtraLight.woff2') format('woff2');
   font-weight: 200;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'BeVietnamPro';
-  src: url('./BeVietnamPro/BeVietnamPro-Light.ttf') format('truetype');
+  font-display: swap;
+  src: url('./BeVietnamPro/BeVietnamPro-Light.woff2') format('woff2');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'BeVietnamPro';
-  src: url('./BeVietnamPro/BeVietnamPro-Regular.ttf') format('truetype');
+  font-display: swap;
+  src: url('./BeVietnamPro/BeVietnamPro-Regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'BeVietnamPro';
-  src: url('./BeVietnamPro/BeVietnamPro-Medium.ttf') format('truetype');
+  font-display: swap;
+  src: url('./BeVietnamPro/BeVietnamPro-Medium.woff2') format('woff2');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'BeVietnamPro';
-  src: url('./BeVietnamPro/BeVietnamPro-SemiBold.ttf') format('truetype');
+  font-display: swap;
+  src: url('./BeVietnamPro/BeVietnamPro-SemiBold.woff2') format('woff2');
   font-weight: 600;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'BeVietnamPro';
-  src: url('./BeVietnamPro/BeVietnamPro-Bold.ttf') format('truetype');
+  font-display: swap;
+  src: url('./BeVietnamPro/BeVietnamPro-Bold.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DMSans';
-  src: url('./dm-sans/DMSans-Thin.ttf') format('truetype');
+  font-display: swap;
+  src: url('./dm-sans/DMSans-Thin.woff2') format('woff2');
   font-weight: 200;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DMSans';
-  src: url('./dm-sans/DMSans-Light.ttf') format('truetype');
+  font-display: swap;
+  src: url('./dm-sans/DMSans-Light.woff2') format('woff2');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DMSans';
-  src: url('./dm-sans/DMSans-Regular.ttf') format('truetype');
+  font-display: swap;
+  src: url('./dm-sans/DMSans-Regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DMSans';
-  src: url('./dm-sans/DMSans-Medium.ttf') format('truetype');
+  font-display: swap;
+  src: url('./dm-sans/DMSans-Medium.woff2') format('woff2');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DMSans';
-  src: url('./dm-sans/DMSans-SemiBold.ttf') format('truetype');
+  font-display: swap;
+  src: url('./dm-sans/DMSans-SemiBold.woff2') format('woff2');
   font-weight: 600;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DMSans';
-  src: url('./dm-sans/DMSans-Bold.ttf') format('truetype');
+  font-display: swap;
+  src: url('./dm-sans/DMSans-Bold.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Orbitron';
-  src: url('./orbitron/Orbitron-Regular.ttf') format('truetype');
+  font-display: swap;
+  src: url('./orbitron/Orbitron-Regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Orbitron';
-  src: url('./orbitron/Orbitron-Medium.ttf') format('truetype');
+  font-display: swap;
+  src: url('./orbitron/Orbitron-Medium.woff2') format('woff2');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Orbitron';
-  src: url('./orbitron/Orbitron-SemiBold.ttf') format('truetype');
+  font-display: swap;
+  src: url('./orbitron/Orbitron-SemiBold.woff2') format('woff2');
   font-weight: 600;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Orbitron';
-  src: url('./orbitron/Orbitron-Bold.ttf') format('truetype');
+  font-display: swap;
+  src: url('./orbitron/Orbitron-Bold.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'SpaceMonoRegular';
-  src: url('./SpaceMono-Regular.ttf') format('truetype');
+  font-display: swap;
+  src: url('./SpaceMono-Regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-Thin.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-Thin.woff2') format('woff2');
   font-weight: 100;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-ThinItalic.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-ThinItalic.woff2') format('woff2');
   font-weight: 100;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-Light.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-Light.woff2') format('woff2');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-LightItalic.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-LightItalic.woff2') format('woff2');
   font-weight: 300;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-Regular.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-Regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-Italic.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-Italic.woff2') format('woff2');
   font-weight: 400;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-Medium.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-Medium.woff2') format('woff2');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-MediumItalic.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-MediumItalic.woff2') format('woff2');
   font-weight: 500;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-Bold.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-Bold.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-BoldItalic.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-BoldItalic.woff2') format('woff2');
   font-weight: 700;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-Black.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-Black.woff2') format('woff2');
   font-weight: 900;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto';
-  src: url('./roboto/Roboto-BlackItalic.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-BlackItalic.woff2') format('woff2');
   font-weight: 900;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Roboto Condensed';
-  src: url('./roboto/Roboto-Condensed.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-Condensed.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto Condensed';
-  src: url('./roboto/Roboto-CondensedItalic.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-CondensedItalic.woff2') format('woff2');
   font-weight: 400;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Roboto Condensed';
-  src: url('./roboto/Roboto-BoldCondensed.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-BoldCondensed.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Roboto Condensed';
-  src: url('./roboto/Roboto-BoldCondensedItalic.ttf') format('truetype');
+  font-display: swap;
+  src: url('./roboto/Roboto-BoldCondensedItalic.woff2') format('woff2');
   font-weight: 700;
   font-style: italic;
 }

package/src/lib/styles/tailwind.css

@@ -1,18 +1,21 @@
+/* fonts.css is NOT imported here: Tailwind v4 inlines imports and rebases
+   font url()s against the entry file, which breaks webpack resolution.
+   Consumers add '@foxeltech/angular-ui/fonts.css' to their styles array. */
+@import 'tailwindcss';
+@import './tokens.css';
+@import './utilities.css';
 @import './theme.css';
-@import './components.css';
-@import './dialogs.css';
-@import './fonts.css';
+@import './components.css' layer(components);
+@import './dialogs.css' layer(components);
 @import './animations.css';
 @import '@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';
-@tailwind base;
-@tailwind component;
-@tailwind utilities;
 
-html, body {
+html,
+body {
   font-family: 'Roboto';
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
   background: rgb(var(--bg-primary));
-}
+}

package/src/lib/styles/tokens.css

@@ -0,0 +1,131 @@
+/*
+ * Tailwind v4 CSS-first theme for @foxeltech/angular-ui.
+ * Replaces the old JS preset (tailwind.config.js / lodash.merge sharing).
+ *
+ * Colour tokens point at the runtime RGB-triplet variables from theme.css
+ * (dark default on :root, light via .light_theme) so theme switching keeps
+ * working; opacity modifiers like bg-critical/10 are handled by v4's
+ * color-mix() and need no <alpha-value> plumbing.
+ */
+/* `inline` is load-bearing: without it the rgb(var(--x)) values are baked
+   into :root once, so .light_theme's runtime triplet overrides never reach
+   the utilities. inline makes every utility carry rgb(var(--x)) itself and
+   resolve at the element that uses it — same behavior as v3. */
+@theme inline {
+  /* Colours (names match the v3 preset so every existing class keeps working) */
+  --color-gradient-primary-start: rgb(var(--gradient-primary-start));
+  --color-gradient-primary-end: rgb(var(--gradient-primary-end));
+  --color-gradient-success-start: rgb(var(--gradient-success-start));
+  --color-gradient-success-end: rgb(var(--gradient-success-end));
+  --color-primary: rgb(var(--primary));
+  --color-success: rgb(var(--success));
+  --color-danger: rgb(var(--danger));
+  --color-warning: rgb(var(--warning));
+  --color-critical: rgb(var(--critical));
+  --color-discovery: rgb(var(--discovery));
+  --color-information: rgb(var(--information));
+  --color-bg-primary: rgb(var(--bg-primary));
+  --color-bg-canvas: rgb(var(--bg-canvas));
+  --color-bg-hover: rgb(var(--bg-primary-hover));
+  --color-bg-error: rgb(var(--bg-error-bold));
+  --color-bg-hover2: rgb(var(--bg-secondary-hover));
+  --color-text-primary: rgb(var(--text-primary));
+  --color-text-secondary: rgb(var(--text-secondary));
+  --color-text-placeholder: rgb(var(--text-placeholder));
+  --color-text-selected: rgb(var(--text-selected-primary));
+  --color-text-focus: rgb(var(--text-focus));
+  --color-text-inverse: rgb(var(--text-inverse));
+  --color-text-error: rgb(var(--text-error));
+  --color-text-link: rgb(var(--text-link-primary));
+  --color-border-default: rgb(var(--border-default));
+  --color-border-interactive: rgb(var(--border-interactive));
+  --color-border-selected: rgb(var(--border-selected));
+  --color-border-strong: rgb(var(--border-strong));
+  --color-border-hover2: rgb(var(--border-secondary-hover));
+  --color-button-default: rgb(var(--button-default));
+  --color-button-primary: rgb(var(--button-primary));
+
+  /* Breakpoints (v3 custom screens) */
+  --breakpoint-sm: 480px;
+  --breakpoint-md: 720px;
+  --breakpoint-lg: 1080px;
+  --breakpoint-xl: 1920px;
+
+  /* Shadows — same scale as the v3 preset, incl. the DEFAULT key so the bare
+     `shadow` utility keeps its v3 meaning (no shadow→shadow-sm rename sweep). */
+  --shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color) / 0.05);
+  --shadow: 0 1px 3px 0 rgb(var(--shadow-color) / 0.1), 0 1px 2px -1px rgb(var(--shadow-color) / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / 0.1), 0 2px 4px -2px rgb(var(--shadow-color) / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / 0.1), 0 4px 6px -4px rgb(var(--shadow-color) / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / 0.1), 0 10px 10px -5px rgb(var(--shadow-color) / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(var(--shadow-color) / 0.25);
+  --inset-shadow-sm: inset 0 2px 4px 0 rgb(var(--shadow-color) / 0.05);
+
+  /* v3 default border radii, incl. DEFAULT so bare `rounded` keeps working */
+  --radius-sm: 0.125rem;
+  --radius: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+
+  /* Named spacing scale (gap-small, p-semi, mb-large, …) */
+  --spacing-xs: 0.125rem;
+  --spacing-small: 0.25rem;
+  --spacing-normal: 0.5rem;
+  --spacing-semi: 0.75rem;
+  --spacing-large: 1rem;
+  --spacing-xl: 1.25rem;
+  --spacing-2xl: 1.5rem;
+
+  /* Font families */
+  --font-spmono: 'SpaceMonoRegular', monospace;
+  --font-dmsans: 'DMSans', sans-serif;
+  --font-orbitron: 'Orbitron', sans-serif;
+  --font-bevn: 'BeVietnamPro', sans-serif;
+  --font-roboto: 'Roboto', sans-serif;
+
+  /* Font-size overrides (v3 preset values) */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.625rem;
+  --text-3xl: 2rem;
+  --text-4xl: 2.25rem;
+  --text-5xl: 3rem;
+}
+
+/* v3 backgroundImage entries — v4 has no background-image theme namespace */
+@utility bg-gradient-primary {
+  background-image: linear-gradient(
+    135deg,
+    rgb(var(--gradient-primary-start)) 0%,
+    rgb(var(--gradient-primary-end)) 100%
+  );
+}
+@utility bg-gradient-success {
+  background-image: linear-gradient(
+    135deg,
+    rgb(var(--gradient-success-start)) 0%,
+    rgb(var(--gradient-success-end)) 100%
+  );
+}
+
+/* v3 behavior compat (per the official upgrade guide) */
+@layer base {
+  /* v4 defaults borders to currentColor; restore the theme default */
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: rgb(var(--border-default));
+  }
+  /* v4 preflight switched buttons to cursor: default */
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+}

package/src/lib/styles/utilities.css

@@ -0,0 +1,24 @@
+/*
+ * Shared composable utilities (v4 @utility) — kept OUT of components.css
+ * because that file is imported inside layer(components) and @utility must
+ * be top-level/unlayered. Usable both in markup and via @apply.
+ */
+@utility txt-tag-common {
+  @apply font-semibold text-xs;
+}
+
+@utility btn-common {
+  @apply flex text-sm h-10 font-semibold px-xl py-normal items-center justify-center rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
+}
+
+@utility btn-menu-common {
+  @apply flex flex-row items-center px-semi;
+}
+
+@utility card-common {
+  @apply text-left px-xl py-large border border-border-default rounded-lg shadow-sm transition-colors duration-500 ease-in-out;
+}
+
+@utility tag-common {
+  @apply flex min-w-7 px-[10px] py-[2px] leading-5 hover:opacity-70 items-center justify-center;
+}