@dereekb/browser 13.4.2 → 13.5.0

package/index.cjs.js

@@ -379,7 +379,6 @@ function _ts_generator(thisArg, body) {
 } 
 ();
 
-// https://dev.to/maciejtrzcinski/100vh-problem-with-ios-safari-3ge9
 /**
  * Default CSS custom property name used to store the viewport height value.
  */ var DEFAULT_VH100_VARIABLE_NAME = 'vh100';
@@ -389,7 +388,7 @@ function _ts_generator(thisArg, body) {
  * This is a workaround for the iOS Safari 100vh bug where `100vh` includes the browser chrome,
  * causing layout overflow. The returned function can be called to refresh the property value.
  *
- * @param cssVariableName - Name of the CSS custom property (without the `--` prefix)
+ * @param cssTokenName - Name of the CSS custom property (without the `--` prefix)
  * @returns A zero-argument function that updates the CSS property to the current inner height
  *
  * @example
@@ -398,8 +397,8 @@ function _ts_generator(thisArg, body) {
  * refresh(); // sets --vh100 to e.g. "812px"
  * ```
  */ function refreshVh100Function() {
-    var cssVariableName = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : DEFAULT_VH100_VARIABLE_NAME;
-    var cssProperty = "--".concat(cssVariableName);
+    var cssTokenName = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : DEFAULT_VH100_VARIABLE_NAME;
+    var cssProperty = "--".concat(cssTokenName);
     return function() {
         var doc = document.documentElement;
         doc.style.setProperty(cssProperty, "".concat(window.innerHeight, "px"));
@@ -408,9 +407,9 @@ function _ts_generator(thisArg, body) {
 /**
  * Adds window event listeners to populate the css variable `vh100`, or another input variable name, with the current window height.
  *
- * @param cssVariableName - Name of the CSS custom property to update; defaults to `vh100`
- */ function watchWindowAndUpdateVh100StyleProperty(cssVariableName) {
-    var refreshPropertyValue = refreshVh100Function(cssVariableName);
+ * @param cssTokenName - Name of the CSS custom property to update; defaults to `vh100`
+ */ function watchWindowAndUpdateVh100StyleProperty(cssTokenName) {
+    var refreshPropertyValue = refreshVh100Function(cssTokenName);
     window.addEventListener('resize', refreshPropertyValue);
     window.addEventListener('orientationchange', refreshPropertyValue);
     refreshPropertyValue();

package/index.esm.js

@@ -377,7 +377,6 @@ function _ts_generator(thisArg, body) {
 } 
 ();
 
-// https://dev.to/maciejtrzcinski/100vh-problem-with-ios-safari-3ge9
 /**
  * Default CSS custom property name used to store the viewport height value.
  */ var DEFAULT_VH100_VARIABLE_NAME = 'vh100';
@@ -387,7 +386,7 @@ function _ts_generator(thisArg, body) {
  * This is a workaround for the iOS Safari 100vh bug where `100vh` includes the browser chrome,
  * causing layout overflow. The returned function can be called to refresh the property value.
  *
- * @param cssVariableName - Name of the CSS custom property (without the `--` prefix)
+ * @param cssTokenName - Name of the CSS custom property (without the `--` prefix)
  * @returns A zero-argument function that updates the CSS property to the current inner height
  *
  * @example
@@ -396,8 +395,8 @@ function _ts_generator(thisArg, body) {
  * refresh(); // sets --vh100 to e.g. "812px"
  * ```
  */ function refreshVh100Function() {
-    var cssVariableName = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : DEFAULT_VH100_VARIABLE_NAME;
-    var cssProperty = "--".concat(cssVariableName);
+    var cssTokenName = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : DEFAULT_VH100_VARIABLE_NAME;
+    var cssProperty = "--".concat(cssTokenName);
     return function() {
         var doc = document.documentElement;
         doc.style.setProperty(cssProperty, "".concat(window.innerHeight, "px"));
@@ -406,9 +405,9 @@ function _ts_generator(thisArg, body) {
 /**
  * Adds window event listeners to populate the css variable `vh100`, or another input variable name, with the current window height.
  *
- * @param cssVariableName - Name of the CSS custom property to update; defaults to `vh100`
- */ function watchWindowAndUpdateVh100StyleProperty(cssVariableName) {
-    var refreshPropertyValue = refreshVh100Function(cssVariableName);
+ * @param cssTokenName - Name of the CSS custom property to update; defaults to `vh100`
+ */ function watchWindowAndUpdateVh100StyleProperty(cssTokenName) {
+    var refreshPropertyValue = refreshVh100Function(cssTokenName);
     window.addEventListener('resize', refreshPropertyValue);
     window.addEventListener('orientationchange', refreshPropertyValue);
     refreshPropertyValue();

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dereekb/browser",
-  "version": "13.4.2",
+  "version": "13.5.0",
   "peerDependencies": {
-    "@dereekb/util": "13.4.2",
-    "@dereekb/rxjs": "13.4.2",
+    "@dereekb/util": "13.5.0",
+    "@dereekb/rxjs": "13.5.0",
     "rxjs": "^7.8.0"
   },
   "dependencies": {},

package/src/lib/vh100.d.ts

@@ -1,14 +1,15 @@
+import { type CssTokenName } from '@dereekb/util';
 /**
  * Default CSS custom property name used to store the viewport height value.
  */
-export declare const DEFAULT_VH100_VARIABLE_NAME = "vh100";
+export declare const DEFAULT_VH100_VARIABLE_NAME: CssTokenName;
 /**
  * Creates a function that sets a CSS custom property on `document.documentElement` to the current `window.innerHeight` in pixels.
  *
  * This is a workaround for the iOS Safari 100vh bug where `100vh` includes the browser chrome,
  * causing layout overflow. The returned function can be called to refresh the property value.
  *
- * @param cssVariableName - Name of the CSS custom property (without the `--` prefix)
+ * @param cssTokenName - Name of the CSS custom property (without the `--` prefix)
  * @returns A zero-argument function that updates the CSS property to the current inner height
  *
  * @example
@@ -17,10 +18,10 @@ export declare const DEFAULT_VH100_VARIABLE_NAME = "vh100";
  * refresh(); // sets --vh100 to e.g. "812px"
  * ```
  */
-export declare function refreshVh100Function(cssVariableName?: string): () => void;
+export declare function refreshVh100Function(cssTokenName?: CssTokenName): () => void;
 /**
  * Adds window event listeners to populate the css variable `vh100`, or another input variable name, with the current window height.
  *
- * @param cssVariableName - Name of the CSS custom property to update; defaults to `vh100`
+ * @param cssTokenName - Name of the CSS custom property to update; defaults to `vh100`
  */
-export declare function watchWindowAndUpdateVh100StyleProperty(cssVariableName?: string): void;
+export declare function watchWindowAndUpdateVh100StyleProperty(cssTokenName?: CssTokenName): void;