@rescui/card 0.14.5 → 0.14.6

package/lib/card.p.module.css.js

@@ -1,29 +1,29 @@
 var styles = {
-  "themeLight": "_themeLight_1a2yq95_8",
-  "themeDark": "_themeDark_1a2yq95_11",
-  "padding0": "_padding0_1a2yq95_15",
-  "padding16": "_padding16_1a2yq95_18",
-  "padding24": "_padding24_1a2yq95_21",
-  "padding32": "_padding32_1a2yq95_24",
-  "borderRadius0": "_borderRadius0_1a2yq95_28",
-  "borderRadius8": "_borderRadius8_1a2yq95_31",
-  "borderRadius16": "_borderRadius16_1a2yq95_34",
-  "borderRadius24": "_borderRadius24_1a2yq95_37",
-  "modeClassic": "_modeClassic_1a2yq95_41",
-  "modeRock": "_modeRock_1a2yq95_51",
-  "transparentBorderTrue": "_transparentBorderTrue_1a2yq95_60",
-  "transparentBorderFalse": "_transparentBorderFalse_1a2yq95_63",
-  "clickable": "_clickable_1a2yq95_111",
-  "disableBorder": "_disableBorder_1a2yq95_70",
-  "hasGlowHover": "_hasGlowHover_1a2yq95_88",
-  "legacyBorder": "_legacyBorder_1a2yq95_133",
-  "tile": "_tile_1a2yq95_247",
-  "fixedImageHeight": "_fixedImageHeight_1a2yq95_323",
-  "fullImageWidth": "_fullImageWidth_1a2yq95_332",
-  "cardImage": "_cardImage_1a2yq95_336",
-  "cardImageImg": "_cardImageImg_1a2yq95_344",
-  "cardImageDiv": "_cardImageDiv_1a2yq95_369",
-  "innerLink": "_innerLink_1a2yq95_394",
-  "innerButton": "_innerButton_1a2yq95_406"
+  "themeLight": "_themeLight_1h1z6y5_8",
+  "themeDark": "_themeDark_1h1z6y5_11",
+  "padding0": "_padding0_1h1z6y5_15",
+  "padding16": "_padding16_1h1z6y5_18",
+  "padding24": "_padding24_1h1z6y5_21",
+  "padding32": "_padding32_1h1z6y5_24",
+  "borderRadius0": "_borderRadius0_1h1z6y5_28",
+  "borderRadius8": "_borderRadius8_1h1z6y5_31",
+  "borderRadius16": "_borderRadius16_1h1z6y5_34",
+  "borderRadius24": "_borderRadius24_1h1z6y5_37",
+  "modeClassic": "_modeClassic_1h1z6y5_41",
+  "modeRock": "_modeRock_1h1z6y5_51",
+  "transparentBorderTrue": "_transparentBorderTrue_1h1z6y5_60",
+  "transparentBorderFalse": "_transparentBorderFalse_1h1z6y5_63",
+  "clickable": "_clickable_1h1z6y5_111",
+  "disableBorder": "_disableBorder_1h1z6y5_70",
+  "hasGlowHover": "_hasGlowHover_1h1z6y5_88",
+  "legacyBorder": "_legacyBorder_1h1z6y5_133",
+  "tile": "_tile_1h1z6y5_247",
+  "fixedImageHeight": "_fixedImageHeight_1h1z6y5_323",
+  "fullImageWidth": "_fullImageWidth_1h1z6y5_332",
+  "cardImage": "_cardImage_1h1z6y5_336",
+  "cardImageImg": "_cardImageImg_1h1z6y5_344",
+  "cardImageDiv": "_cardImageDiv_1h1z6y5_369",
+  "innerLink": "_innerLink_1h1z6y5_394",
+  "innerButton": "_innerButton_1h1z6y5_406"
 };
 export { styles as default };

package/lib/index.css

@@ -1,44 +1,50 @@
-._themeLight_1a2yq95_8{
+@property --_rs-theme-dark-coefficient{
+  syntax:'<number>';
+  inherits:true;
+  initial-value:0;
+}
+
+._themeLight_1h1z6y5_8{
   --rs-theme-dark:0;
 }
 
-._themeDark_1a2yq95_11{
+._themeDark_1h1z6y5_11{
   --rs-theme-dark:1;
 }
 
-._padding0_1a2yq95_15{
+._padding0_1h1z6y5_15{
   --_rs-card-padding:0px;
 }
 
-._padding16_1a2yq95_18{
+._padding16_1h1z6y5_18{
   --_rs-card-padding:16px;
 }
 
-._padding24_1a2yq95_21{
+._padding24_1h1z6y5_21{
   --_rs-card-padding:24px;
 }
 
-._padding32_1a2yq95_24{
+._padding32_1h1z6y5_24{
   --_rs-card-padding:32px;
 }
 
-._borderRadius0_1a2yq95_28{
+._borderRadius0_1h1z6y5_28{
   --_rs-card-border-radius:0px;
 }
 
-._borderRadius8_1a2yq95_31{
+._borderRadius8_1h1z6y5_31{
   --_rs-card-border-radius:8px;
 }
 
-._borderRadius16_1a2yq95_34{
+._borderRadius16_1h1z6y5_34{
   --_rs-card-border-radius:16px;
 }
 
-._borderRadius24_1a2yq95_37{
+._borderRadius24_1h1z6y5_37{
   --_rs-card-border-radius:24px;
 }
 
-._modeClassic_1a2yq95_41{
+._modeClassic_1h1z6y5_41{
   --_rs-card-states-theme-flip:0;
 
   --_rs-card-hover-focus-active-border-color:rgb(
@@ -49,7 +55,7 @@
   --_rs-card-active-background:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*207), calc(255 - var(--_rs-theme-dark-coefficient, 0)*204));
 }
 
-._modeRock_1a2yq95_51{
+._modeRock_1h1z6y5_51{
   --_rs-card-states-theme-flip:1;
 
   --_rs-card-hover-focus-active-border-color:transparent;
@@ -58,15 +64,15 @@
   --_rs-card-active-background:rgb(calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*196), calc(244 - var(--_rs-theme-dark-coefficient, 0)*193));
 }
 
-._transparentBorderTrue_1a2yq95_60{
+._transparentBorderTrue_1h1z6y5_60{
   --_rs-card-grey-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
 }
 
-._transparentBorderFalse_1a2yq95_63{
+._transparentBorderFalse_1h1z6y5_63{
   --_rs-card-grey-border-color:rgb(calc(209 - var(--_rs-theme-dark-coefficient, 0)*115), calc(209 - var(--_rs-theme-dark-coefficient, 0)*115), calc(210 - var(--_rs-theme-dark-coefficient, 0)*114));
 }
 
-._clickable_1a2yq95_111{
+._clickable_1h1z6y5_111{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -77,11 +83,11 @@
   --_rs-card-native-static-border-color:var(--_rs-card-grey-border-color);
 }
 
-._clickable_1a2yq95_111._disableBorder_1a2yq95_70{
+._clickable_1h1z6y5_111._disableBorder_1h1z6y5_70{
     --_rs-card-native-static-border-color:transparent;
   }
 
-._clickable_1a2yq95_111 {
+._clickable_1h1z6y5_111 {
   --_rs-card-native-hover-border-color:var(
     --_rs-card-hover-focus-active-border-color
   );
@@ -91,26 +97,26 @@
   );
 }
 
-._clickable_1a2yq95_111:is([data-extra-hover-effect], ._hasGlowHover_1a2yq95_88){
+._clickable_1h1z6y5_111:is([data-extra-hover-effect], ._hasGlowHover_1h1z6y5_88){
     --_rs-card-native-hover-border-color:var(--_rs-card-grey-border-color);
   }
 
-._clickable_1a2yq95_111:is([data-extra-hover-effect], ._hasGlowHover_1a2yq95_88)[data-extra-active-effect]{
+._clickable_1h1z6y5_111:is([data-extra-hover-effect], ._hasGlowHover_1h1z6y5_88)[data-extra-active-effect]{
       --_rs-card-native-active-border-width:1px;
       --_rs-card-native-active-border-color:var(--_rs-card-grey-border-color);
     }
 
-._clickable_1a2yq95_111:is([data-extra-hover-effect], ._hasGlowHover_1a2yq95_88)._disableBorder_1a2yq95_70{
+._clickable_1h1z6y5_111:is([data-extra-hover-effect], ._hasGlowHover_1h1z6y5_88)._disableBorder_1h1z6y5_70{
       --_rs-card-native-hover-border-color:transparent;
 
       --_rs-card-native-active-border-width:1px;
     }
 
-._clickable_1a2yq95_111:is([data-extra-hover-effect], ._hasGlowHover_1a2yq95_88)._disableBorder_1a2yq95_70[data-extra-active-effect]{
+._clickable_1h1z6y5_111:is([data-extra-hover-effect], ._hasGlowHover_1h1z6y5_88)._disableBorder_1h1z6y5_70[data-extra-active-effect]{
         --_rs-card-native-active-border-color:transparent;
       }
 
-._clickable_1a2yq95_111 {
+._clickable_1h1z6y5_111 {
 
   --_rs-card-env-background:var(
     --rs-card-static-background,
@@ -131,12 +137,12 @@
   --_rs-card-css-border:none;
 }
 
-._clickable_1a2yq95_111._legacyBorder_1a2yq95_133{
+._clickable_1h1z6y5_111._legacyBorder_1h1z6y5_133{
     --_rs-card-css-padding:calc(var(--_rs-card-padding-final) - var(--_rs-card-env-border-width));
     --_rs-card-css-border:var(--_rs-card-env-border-width) solid var(--_rs-card-env-border-color);
   }
 
-._clickable_1a2yq95_111 {
+._clickable_1h1z6y5_111 {
   --rs-out-card-padding:var(--_rs-card-padding-final);
   --rs-out-card-border-radius:var(--_rs-card-border-radius-final);
   --rs-out-card-border-width:var(--_rs-card-env-border-width);
@@ -167,7 +173,7 @@
           appearance:none;
 }
 
-._clickable_1a2yq95_111:not(._legacyBorder_1a2yq95_133)::after{
+._clickable_1h1z6y5_111:not(._legacyBorder_1h1z6y5_133)::after{
     position:absolute;
     top:0;
     right:0;
@@ -186,13 +192,13 @@
     transition:box-shadow 100ms var(--rs-transition-function, ease);
   }
 
-._clickable_1a2yq95_111,
-  ._clickable_1a2yq95_111:hover{
+._clickable_1h1z6y5_111,
+  ._clickable_1h1z6y5_111:hover{
     text-decoration:none;
   }
 
 @media (hover: hover){
-    ._clickable_1a2yq95_111:hover{
+    ._clickable_1h1z6y5_111:hover{
       --rs-theme-flip:var(--_rs-card-states-theme-flip);
 
       --_rs-card-env-background:var(
@@ -207,7 +213,7 @@
     }
   }
 
-._clickable_1a2yq95_111:focus-visible{
+._clickable_1h1z6y5_111:focus-visible{
     --rs-theme-flip:var(--_rs-card-states-theme-flip);
 
     --_rs-card-env-background:var(
@@ -222,7 +228,7 @@
     outline:none;
   }
 
-._clickable_1a2yq95_111:active{
+._clickable_1h1z6y5_111:active{
     --rs-theme-flip:var(--_rs-card-states-theme-flip);
 
     --_rs-card-env-background:var(
@@ -239,7 +245,7 @@
     );
   }
 
-._tile_1a2yq95_247{
+._tile_1h1z6y5_247{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -250,11 +256,11 @@
   --_rs-card-native-static-border-color:var(--_rs-card-grey-border-color);
 }
 
-._tile_1a2yq95_247._disableBorder_1a2yq95_70{
+._tile_1h1z6y5_247._disableBorder_1h1z6y5_70{
     --_rs-card-native-static-border-color:transparent;
   }
 
-._tile_1a2yq95_247 {
+._tile_1h1z6y5_247 {
 
   --_rs-card-env-background:var(
     --rs-card-static-background,
@@ -275,12 +281,12 @@
   --_rs-card-css-border:none;
 }
 
-._tile_1a2yq95_247._legacyBorder_1a2yq95_133{
+._tile_1h1z6y5_247._legacyBorder_1h1z6y5_133{
     --_rs-card-css-padding:calc(var(--_rs-card-padding-final) - var(--_rs-card-env-border-width));
     --_rs-card-css-border:var(--_rs-card-env-border-width) solid var(--_rs-card-env-border-color);
   }
 
-._tile_1a2yq95_247 {
+._tile_1h1z6y5_247 {
   --rs-out-card-padding:var(--_rs-card-padding-final);
   --rs-out-card-border-radius:var(--_rs-card-border-radius-final);
   --rs-out-card-border-width:var(--_rs-card-env-border-width);
@@ -312,7 +318,7 @@
           appearance:none;
 }
 
-._tile_1a2yq95_247:not(._legacyBorder_1a2yq95_133)::after{
+._tile_1h1z6y5_247:not(._legacyBorder_1h1z6y5_133)::after{
     position:absolute;
     top:0;
     right:0;
@@ -329,20 +335,20 @@
     box-shadow:inset 0 0 0 var(--_rs-card-env-border-width) var(--_rs-card-env-border-color);
   }
 
-._fixedImageHeight_1a2yq95_323{
+._fixedImageHeight_1h1z6y5_323{
   height:calc(188px + var(--_rs-card-padding-final));
   max-height:calc(188px + var(--_rs-card-padding-final));
 }
 
-._fixedImageHeight_1a2yq95_323 img{
+._fixedImageHeight_1h1z6y5_323 img{
     height:100%;
   }
 
-._fullImageWidth_1a2yq95_332 img{
+._fullImageWidth_1h1z6y5_332 img{
   width:100%;
 }
 
-._cardImage_1a2yq95_336{
+._cardImage_1h1z6y5_336{
   position:relative;
 
   overflow:hidden;
@@ -350,7 +356,7 @@
   box-sizing:border-box;
 }
 
-._cardImageImg_1a2yq95_344{
+._cardImageImg_1h1z6y5_344{
   top:calc(var(--_rs-card-padding-final)*-1);
   left:calc(var(--_rs-card-padding-final)*-1);
 
@@ -361,21 +367,21 @@
   width:calc(100% + var(--_rs-card-padding-final)*2);
 }
 
-._cardImageImg_1a2yq95_344 img{
+._cardImageImg_1h1z6y5_344 img{
     max-width:100%;
     max-height:100%;
   }
 
-._clickable_1a2yq95_111 ._cardImageImg_1a2yq95_344 img{
+._clickable_1h1z6y5_111 ._cardImageImg_1h1z6y5_344 img{
       transition:transform 0.2s var(--rs-transition-function, ease);
       transform:scale(1);
     }
 
-._clickable_1a2yq95_111:hover ._cardImageImg_1a2yq95_344 img{
+._clickable_1h1z6y5_111:hover ._cardImageImg_1h1z6y5_344 img{
       transform:scale(1.1);
     }
 
-._cardImageDiv_1a2yq95_369{
+._cardImageDiv_1h1z6y5_369{
   top:calc(var(--_rs-card-padding-final)*-1);
   left:calc(var(--_rs-card-padding-final)*-1);
 
@@ -392,16 +398,16 @@
   background-size:100% 100%;
 }
 
-._clickable_1a2yq95_111 ._cardImageDiv_1a2yq95_369{
+._clickable_1h1z6y5_111 ._cardImageDiv_1h1z6y5_369{
     transition:background-size 0.2s var(--rs-transition-function, ease);
   }
 
-._clickable_1a2yq95_111:hover ._cardImageDiv_1a2yq95_369{
+._clickable_1h1z6y5_111:hover ._cardImageDiv_1h1z6y5_369{
     background-size:110% 110%;
   }
 
 @media (hover: hover){
-    ._clickable_1a2yq95_111:hover ._innerLink_1a2yq95_394{
+    ._clickable_1h1z6y5_111:hover ._innerLink_1h1z6y5_394{
       --_rs-typography-link-padding-bottom-from-state-hover:calc(1px - var(--_rs-typography-link-hover-underline-width-difference-wf));
       --_rs-typography-link-border-bottom-width-from-state-hover:calc(var(--_rs-typography-link-border-bottom-width-wf) + var(--_rs-typography-link-hover-underline-width-difference-wf));
       --_rs-typography-link-border-bottom-color-from-state-hover:var(
@@ -423,14 +429,14 @@
     }
   }
 
-._clickable_1a2yq95_111:focus-visible ._innerLink_1a2yq95_394{
+._clickable_1h1z6y5_111:focus-visible ._innerLink_1h1z6y5_394{
     --_rs-typography-link-box-shadow-from-state-focus-visible:var(
       --_rs-color-primary
     ) 0 0 0 4px;
   }
 
 @media (hover: hover){
-    ._clickable_1a2yq95_111:hover ._innerButton_1a2yq95_406{
+    ._clickable_1h1z6y5_111:hover ._innerButton_1h1z6y5_406{
       --_rs-button-border-inner-color:rgba(
     calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
     calc(0.3 + var(--_rs-theme-dark-coefficient, 0)*0.1)
@@ -439,7 +445,7 @@
     }
   }
 
-._clickable_1a2yq95_111:active ._innerButton_1a2yq95_406{
+._clickable_1h1z6y5_111:active ._innerButton_1h1z6y5_406{
     --_rs-button-border-inner-width:2px;
     --_rs-button-border-inner-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
     --_rs-button-background-from-state-active:var(
@@ -447,13 +453,13 @@
   );
   }
 
-._clickable_1a2yq95_111:focus-visible ._innerButton_1a2yq95_406{
+._clickable_1h1z6y5_111:focus-visible ._innerButton_1h1z6y5_406{
     --_rs-button-box-shadow-from-state-focus-visible:var(
       --_rs-color-primary-t-dim
     ) 0 0 0 4px;
   }
 
-._clickable_1a2yq95_111:active:focus-visible:not(:hover) ._innerButton_1a2yq95_406{
+._clickable_1h1z6y5_111:active:focus-visible:not(:hover) ._innerButton_1h1z6y5_406{
     --_rs-button-background-from-state-active-focus-visible-no-hover:var(
     --_rs-button-active-focus-visible-no-hover-background
   );

package/llm/cards.md

@@ -53,7 +53,6 @@ A ClassName Helper for creating cards with simple styles and some customizations
 - Base example
 - Using css variables to control the border
 - Set border on the pseudo-element to avoid scaling bug when changing `border-width`
-
 - [cardCn implementation](/components/card-cn/#default-clickable-card)
 
 ```tsx
@@ -140,7 +139,6 @@ render(<Demo />);
 - Dark theme
 - Using css variables to control the border
 - Set border on the pseudo-element to avoid scaling bug when changing `border-width`
-
 - [cardCn implementation](/components/card-cn/#theme-dark)
 
 ```tsx
@@ -383,15 +381,10 @@ render(<Demo />);
 ##### Details:
 
 - With border via pseudo-element `::before`
-
 - Forward states to the `Button` inside
-
 - Card should have the `button` HTML tag
-
 - Main action, like `onClick`, should be on the card element
-
 - Use `notFocusable` property with `Button`
-
 - Use only one action element inside
 - [cardCn implementation](/components/card-cn/#with-action-button-inside)
 
@@ -508,15 +501,10 @@ render(<Demo />);
 ##### Details:
 
 - With border via pseudo-element `::before`
-
 - Forward states to the `rs-link` inside
-
 - Card should have the `a` HTML tag
-
 - Main action, like `href`, should be on the card element
-
 - `rs-link` should have `span` HTML tag
-
 - Use only one action element inside
 - [cardCn implementation](/components/card-cn/#with-action-link-inside)
 
@@ -628,10 +616,8 @@ render(<Demo />);
 ##### Details:
 
 - With static border on the main element (border width is constant)
-
 - Decrease inner padding by border width value to compensate for the offset
 - Change `border-color` to transparent on hover/active instead of changing its width
-
 - Change background-color to contrast value on hover/active
 - Use `--rs-theme-flip` css-variable to reverse theme for all RescUI components on hover/active
 
@@ -718,7 +704,6 @@ render(<Demo />);
 ##### Details:
 
 - With border via pseudo-element `::before`
-
 - Inside grid container
 - Each card takes up two rows and applies subgrid to its children
 - Cards text content lays on the second row, aligning with the content in the sibling cards
@@ -858,7 +843,6 @@ render(<Demo />);
 ##### Details:
 
 - With border via pseudo-element `::before`
-
 - With colored bg and border
 - `border-color` is constant, but the `background-color` changes on hover
 - Text is center aligned
@@ -1178,7 +1162,6 @@ render(<Demo />);
 
 - Base example
 - Has no dynamic states - its a static `div` element
-
 - [cardCn implementation](/components/card-cn/#default-card)
 
 ```tsx
@@ -1594,9 +1577,7 @@ render(<Demo />);
 ##### Details:
 
 - Tiles are aligned using `grid-template-areas` CSS property
-
 - Grid areas are forwarded to CSS using `--tile-id` CSS variable
-
 - Flat tiles layout structure allows for easy adaptive changes compared to the two-column flex layout
 
 ```tsx
@@ -1747,10 +1728,8 @@ render(<Demo />);
 
 - Big tiles with a lot of content
 - One or more tiles may have `StickyTag`
-
 - Content inside tiles is aligned with siblings
 - `checkbox` aligned using subgrid
-
 - Actions in the footer are nailed to the tile bottom
 - Tiles may contain `Collapse` inside
 
@@ -2644,11 +2623,9 @@ render(<Demo />);
 
 - Without border
 - With `selected` state
-
 - With filling progress bar
 - With hover and focus-visible states
 - Control autoplay animation duration with `--carousel-vertical-control-autoplay-duration` css variable
-
 - With react state management
 
 ```tsx
@@ -2844,11 +2821,9 @@ render(<Demo />);
 
 - Without border
 - With `selected` state
-
 - With filling progress bar
 - With hover and focus-visible states
 - Control autoplay animation duration with `--carousel-horizontal-control-autoplay-duration` css variable
-
 - With react state management
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/card",
-  "version": "0.14.5",
+  "version": "0.14.6",
   "description": "",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -24,16 +24,16 @@
   },
   "devDependencies": {
     "@jetbrains/logos": "^1.4.16",
-    "@rescui/button": "^0.24.5",
-    "@rescui/colors": "^0.3.2",
-    "@rescui/postcss-preset-library": "^0.2.2",
+    "@rescui/button": "^0.24.6",
+    "@rescui/colors": "^0.3.3",
+    "@rescui/postcss-preset-library": "^0.2.3",
     "@rescui/scripts": "^0.5.2",
-    "@rescui/typography": "^0.27.3",
+    "@rescui/typography": "^0.27.4",
     "@rescui/visual-regression": "^0.1.4"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
   "nx": {},
-  "gitHead": "7614b4519a4716fbf1151d94c97fda48eab60800"
+  "gitHead": "3711cbfc0c797014395421b008aa5331d6d47c6e"
 }