@underlayerdev/ui 0.19.0 → 0.21.0

package/fonts/index.css

@@ -1,23 +1,54 @@
 @font-face {
   font-family: 'Roboto Mono';
-  src: url('../fonts/RobotoMono.ttf') format('truetype');
+  src: url('../fonts/RobotoMono.woff2') format('woff2');
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Underlayer Brand';
-  src: url('../fonts/UnderlayerBrand.otf') format('opentype');
+  src: url('../fonts/UnderlayerBrand.woff2') format('woff2');
   font-display: swap;
 }
 
+/* `block` on purpose: icons are drawn from their names, so until the font is there a
+   fallback would print the name ("chevron_down") instead of the icon. */
 @font-face {
   font-family: 'Underlayer Icons';
-  src: url('../fonts/UnderlayerIcons-v4-VF.ttf') format('truetype');
+  src: url('../fonts/UnderlayerIcons-v4-VF.woff2') format('woff2');
+  font-weight: 500 700;
   font-display: block;
 }
 
+/* Nunito Sans comes in two files, by character (scripts/optimize-fonts.py): Latin, and the
+   rest, which a browser only downloads when a page shows those characters. */
 @font-face {
   font-family: 'Underlayer Nunito Sans';
-  src: url('../fonts/UnderlayerNunitoSans.ttf') format('truetype');
+  src: url('../fonts/UnderlayerNunitoSans-latin.woff2') format('woff2');
+  font-weight: 400 1000;
   font-display: swap;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Underlayer Nunito Sans';
+  src: url('../fonts/UnderlayerNunitoSans-rest.woff2') format('woff2');
+  font-weight: 400 1000;
+  font-display: swap;
+  unicode-range:
+    U+0100-0130, U+0132-0151, U+0154-017E, U+0181, U+018A, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0,
+    U+01B3-01B4, U+01C4-01CE, U+01D4, U+01E5-01E7, U+01E9-01EB, U+01EF, U+01FA-021B, U+021F,
+    U+0226-0228, U+022A-022D, U+0230-0233, U+0237, U+0253, U+0257, U+0259, U+0292, U+02B9-02BA,
+    U+02BE-02BF, U+02C7-02CC, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+0309-030C,
+    U+030F, U+0311-0312, U+031B, U+0323-0324, U+0326-0328, U+032E, U+0331, U+0335, U+0337-0338,
+    U+0394, U+03A3, U+03A9, U+03BC, U+03C0, U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475,
+    U+048A-04A5, U+04A8-04FF, U+0510-0513, U+051A-051D, U+0524-0529, U+052E-052F, U+156B,
+    U+1E08-1E09, U+1E0C-1E0F, U+1E14-1E17, U+1E1C-1E1D, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2B,
+    U+1E2E-1E2F, U+1E36-1E37, U+1E3A-1E3B, U+1E42-1E49, U+1E4C-1E53, U+1E5A-1E5B, U+1E5E-1E69,
+    U+1E6C-1E6F, U+1E78-1E7B, U+1E80-1E85, U+1E8E-1E8F, U+1E92-1E93, U+1E97, U+1E9E, U+1EA0-1EF9,
+    U+2070, U+2074-2079, U+2080-2089, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD-20AE,
+    U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BC-20BD, U+2113, U+2116, U+2126, U+212E, U+2202,
+    U+2205-2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA,
+    U+27E8-27E9, U+F8FF, U+FB01-FB02;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@underlayerdev/ui",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "peerDependencies": {
     "@angular/cdk": "^22.0.0",
     "@angular/common": "^22.0.0",

package/styles/fonts/index.css

@@ -1,23 +1,54 @@
 @font-face {
   font-family: 'Roboto Mono';
-  src: url('../fonts/RobotoMono.ttf') format('truetype');
+  src: url('../fonts/RobotoMono.woff2') format('woff2');
   font-display: swap;
 }
 
 @font-face {
   font-family: 'Underlayer Brand';
-  src: url('../fonts/UnderlayerBrand.otf') format('opentype');
+  src: url('../fonts/UnderlayerBrand.woff2') format('woff2');
   font-display: swap;
 }
 
+/* `block` on purpose: icons are drawn from their names, so until the font is there a
+   fallback would print the name ("chevron_down") instead of the icon. */
 @font-face {
   font-family: 'Underlayer Icons';
-  src: url('../fonts/UnderlayerIcons-v4-VF.ttf') format('truetype');
+  src: url('../fonts/UnderlayerIcons-v4-VF.woff2') format('woff2');
+  font-weight: 500 700;
   font-display: block;
 }
 
+/* Nunito Sans comes in two files, by character (scripts/optimize-fonts.py): Latin, and the
+   rest, which a browser only downloads when a page shows those characters. */
 @font-face {
   font-family: 'Underlayer Nunito Sans';
-  src: url('../fonts/UnderlayerNunitoSans.ttf') format('truetype');
+  src: url('../fonts/UnderlayerNunitoSans-latin.woff2') format('woff2');
+  font-weight: 400 1000;
   font-display: swap;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Underlayer Nunito Sans';
+  src: url('../fonts/UnderlayerNunitoSans-rest.woff2') format('woff2');
+  font-weight: 400 1000;
+  font-display: swap;
+  unicode-range:
+    U+0100-0130, U+0132-0151, U+0154-017E, U+0181, U+018A, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0,
+    U+01B3-01B4, U+01C4-01CE, U+01D4, U+01E5-01E7, U+01E9-01EB, U+01EF, U+01FA-021B, U+021F,
+    U+0226-0228, U+022A-022D, U+0230-0233, U+0237, U+0253, U+0257, U+0259, U+0292, U+02B9-02BA,
+    U+02BE-02BF, U+02C7-02CC, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+0309-030C,
+    U+030F, U+0311-0312, U+031B, U+0323-0324, U+0326-0328, U+032E, U+0331, U+0335, U+0337-0338,
+    U+0394, U+03A3, U+03A9, U+03BC, U+03C0, U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475,
+    U+048A-04A5, U+04A8-04FF, U+0510-0513, U+051A-051D, U+0524-0529, U+052E-052F, U+156B,
+    U+1E08-1E09, U+1E0C-1E0F, U+1E14-1E17, U+1E1C-1E1D, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2B,
+    U+1E2E-1E2F, U+1E36-1E37, U+1E3A-1E3B, U+1E42-1E49, U+1E4C-1E53, U+1E5A-1E5B, U+1E5E-1E69,
+    U+1E6C-1E6F, U+1E78-1E7B, U+1E80-1E85, U+1E8E-1E8F, U+1E92-1E93, U+1E97, U+1E9E, U+1EA0-1EF9,
+    U+2070, U+2074-2079, U+2080-2089, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD-20AE,
+    U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BC-20BD, U+2113, U+2116, U+2126, U+212E, U+2202,
+    U+2205-2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA,
+    U+27E8-27E9, U+F8FF, U+FB01-FB02;
 }

package/styles/foundations.css

@@ -295,23 +295,33 @@ a:active {
 
 @font-face {
   font-family: "Roboto Mono";
-  src: url("fonts/RobotoMono.ttf") format("truetype");
+  src: url("fonts/RobotoMono.woff2") format("woff2");
   font-display: swap;
 }
 @font-face {
   font-family: "Underlayer Brand";
-  src: url("fonts/UnderlayerBrand.otf") format("opentype");
+  src: url("fonts/UnderlayerBrand.woff2") format("woff2");
   font-display: swap;
 }
 @font-face {
   font-family: "Underlayer Icons";
-  src: url("fonts/UnderlayerIcons-v4-VF.ttf") format("truetype");
+  src: url("fonts/UnderlayerIcons-v4-VF.woff2") format("woff2");
+  font-weight: 500 700;
   font-display: block;
 }
 @font-face {
   font-family: "Underlayer Nunito Sans";
-  src: url("fonts/UnderlayerNunitoSans.ttf") format("truetype");
+  src: url("fonts/UnderlayerNunitoSans-latin.woff2") format("woff2");
+  font-weight: 400 1000;
   font-display: swap;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Underlayer Nunito Sans";
+  src: url("fonts/UnderlayerNunitoSans-rest.woff2") format("woff2");
+  font-weight: 400 1000;
+  font-display: swap;
+  unicode-range: U+0100-0130, U+0132-0151, U+0154-017E, U+0181, U+018A, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01B3-01B4, U+01C4-01CE, U+01D4, U+01E5-01E7, U+01E9-01EB, U+01EF, U+01FA-021B, U+021F, U+0226-0228, U+022A-022D, U+0230-0233, U+0237, U+0253, U+0257, U+0259, U+0292, U+02B9-02BA, U+02BE-02BF, U+02C7-02CC, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+0309-030C, U+030F, U+0311-0312, U+031B, U+0323-0324, U+0326-0328, U+032E, U+0331, U+0335, U+0337-0338, U+0394, U+03A3, U+03A9, U+03BC, U+03C0, U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+048A-04A5, U+04A8-04FF, U+0510-0513, U+051A-051D, U+0524-0529, U+052E-052F, U+156B, U+1E08-1E09, U+1E0C-1E0F, U+1E14-1E17, U+1E1C-1E1D, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2B, U+1E2E-1E2F, U+1E36-1E37, U+1E3A-1E3B, U+1E42-1E49, U+1E4C-1E53, U+1E5A-1E5B, U+1E5E-1E69, U+1E6C-1E6F, U+1E78-1E7B, U+1E80-1E85, U+1E8E-1E8F, U+1E92-1E93, U+1E97, U+1E9E, U+1EA0-1EF9, U+2070, U+2074-2079, U+2080-2089, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BC-20BD, U+2113, U+2116, U+2126, U+212E, U+2202, U+2205-2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+27E8-27E9, U+F8FF, U+FB01-FB02;
 }
 .ul-content {
   width: 100%;

package/types/underlayerdev-ui.d.ts

@@ -2890,6 +2890,38 @@ export declare class CustomCurrencyPipe extends CurrencyPipe implements PipeTran
   static ɵfac: i0.ɵɵFactoryDeclaration<CustomCurrencyPipe, never>;
   static ɵpipe: i0.ɵɵPipeDeclaration<CustomCurrencyPipe, "peCurrency", true>;
 }
+/**
+ * A thin bar that says something is on its way. With a `value` (0–100) it fills to that point;
+ * without one it is indeterminate and runs on its own. `fixed` pins it along the top of the
+ * viewport, over the page, for app-wide waits such as a navigation.
+ */
+export declare class ProgressBarComponent {
+  /** How far along, 0–100. Left unset, the bar is indeterminate. */
+  value: import("@angular/core").InputSignal<number | null>;
+  /** Pinned to the top of the viewport, over the page. */
+  fixed: import("@angular/core").InputSignal<boolean>;
+  /** The accessible name, passed translated by the host. */
+  label: import("@angular/core").InputSignal<string>;
+  protected readonly clampedValue: import("@angular/core").Signal<number | null>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarComponent, "ul-progress-bar", never, {
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "fixed": {
+      "alias": "fixed";
+      "required": false;
+      "isSignal": true;
+    };
+    "label": {
+      "alias": "label";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 /**
  * Radio button for use inside a group. For Signal Forms use ul-radio-group with [formField].
  * Use [(checked)] when controlling each radio manually, or place inside ul-radio-group for [formField] binding.