@madebywild/wvk 0.0.2 → 0.1.0

package/dist/styles.css

@@ -51,6 +51,14 @@
   --color-wvk-transparency-light-40: var(--wvk-transparency-light-40);
   --color-wvk-transparency-light-20: var(--wvk-transparency-light-20);
 
+  /* Deprecated: use --color-wvk-transparency-* instead. Kept for backwards compatibility. */
+  --color-wvk-alpha-dark-80: var(--wvk-transparency-dark-80);
+  --color-wvk-alpha-dark-40: var(--wvk-transparency-dark-40);
+  --color-wvk-alpha-dark-20: var(--wvk-transparency-dark-20);
+  --color-wvk-alpha-light-80: var(--wvk-transparency-light-80);
+  --color-wvk-alpha-light-40: var(--wvk-transparency-light-40);
+  --color-wvk-alpha-light-20: var(--wvk-transparency-light-20);
+
 
   /* Primitives — opaque Color collection (Figma layer names: Dark, Medium, …) */
   --color-wvk-primitive-dark: var(--wvk-primitive-dark);
@@ -112,6 +120,14 @@
   --wvk-transparency-light-40: var(--wvk-primitive-light-40);
   --wvk-transparency-light-20: var(--wvk-primitive-light-20);
 
+  /* Deprecated alpha aliases — use --wvk-transparency-* instead. */
+  --wvk-alpha-dark-80: var(--wvk-transparency-dark-80);
+  --wvk-alpha-dark-40: var(--wvk-transparency-dark-40);
+  --wvk-alpha-dark-20: var(--wvk-transparency-dark-20);
+  --wvk-alpha-light-80: var(--wvk-transparency-light-80);
+  --wvk-alpha-light-40: var(--wvk-transparency-light-40);
+  --wvk-alpha-light-20: var(--wvk-transparency-light-20);
+
   /* App semantic (shadcn compatibility) — driven by wvk semantic tokens */
   --background: var(--wvk-surface-primary);
   --foreground: var(--wvk-foreground-primary);
@@ -157,12 +173,24 @@
 
   /*
    * Custom cursors — embedded SVG data URLs so consumers do not need public assets.
-   * Hotspot coords are top-left of the click point in the 32×32 artwork.
+   * Hotspot coords are the click point inside the artwork (top-left = 0,0).
    * Always end with a keyword fallback (accessibility + engines without SVG cursors).
    */
   --wvk-cursor-default: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIKICAgICAgaWQ9Ind2ay1jdXJzb3Itc2hhZG93IgogICAgICBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiCiAgICAgIHg9Ii00IgogICAgICB5PSItNCIKICAgICAgd2lkdGg9IjQwIgogICAgICBoZWlnaHQ9IjQwIgogICAgICBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiCiAgICA+CiAgICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSIxLjI1IiBzdGREZXZpYXRpb249IjEiIGZsb29kLWNvbG9yPSIjMDAwMDAwIiBmbG9vZC1vcGFjaXR5PSIwLjM4IiAvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxnIGZpbHRlcj0idXJsKCN3dmstY3Vyc29yLXNoYWRvdykiPgogICAgPHBhdGggZmlsbD0iIzAwNTVGRiIgZD0iTTEwIDYuMDI4djE0LjYzN2EuNS41IDAgMCAwIC44Ni4zNDhsMi40MjQtMi41MDNhLjUuNSAwIDAgMSAuODA4LjEyN2wyLjIyNSA0LjUyM2ExIDEgMCAwIDAgMS4zNzkuNDM1bDIuMjM0LTEuMjI5YTEgMSAwIDAgMCAuNDEtMS4zM2wtMi4xOTItNC4zMWEuNS41IDAgMCAxIC40NDYtLjcyNmgzLjk2YS41LjUgMCAwIDAgLjMxLS44OTNMMTAuODA4IDUuNjM1YS41LjUgMCAwIDAtLjgwOS4zOTNaIi8+CiAgICA8cGF0aCBzdHJva2U9IndoaXRlIiBzdHJva2Utb3BhY2l0eT0iLjgiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTkuNDIgNC45ODVhMS41MDIgMS41MDIgMCAwIDEgMS44ODItLjIyNWwuMTI1LjA4OUwyMy40OCAxNC4zMmExLjUwMSAxLjUwMSAwIDAgMS0uOTI2IDIuNjhoLTMuMTQ3bDEuODIzIDMuNTgzYTIgMiAwIDAgMS0uODE5IDIuNjZsLTIuMjM0IDEuMjI5YTIgMiAwIDAgMS0yLjc1OS0uODdsLTEuOTExLTMuODg2LTEuOTMgMS45OTNBMS41IDEuNSAwIDAgMSA5IDIwLjY2NVY2LjAyOGExLjUgMS41IDAgMCAxIC4zMi0uOTI2bC4xLS4xMTdaIi8+CiAgPC9nPgo8L3N2Zz4K") 9 5, default;
+  --wvk-cursor-default-arrow: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMyIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMyIDMzIj4KICA8ZyBmaWx0ZXI9InVybCgjYSkiPgogICAgPHBhdGggZmlsbD0iIzAwNTVGRiIgZD0iTTEwIDI0VjcuMjE2YzAtLjg2MSAxLjAxNi0xLjMyIDEuNjYyLS43NWwxMy4wNDYgMTEuNTExYy43MjUuNjQuMjEgMS44MzQtLjc1MiAxLjc0NmwtNy40LS42NzJhMSAxIDAgMCAwLS44OS4zOTVMMTEuOCAyNC42Yy0uNTc3Ljc2OS0xLjguMzYxLTEuOC0uNloiLz4KICAgIDxwYXRoIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTkgNy4yMTZjMC0xLjcyMiAyLjAzMi0yLjY0IDMuMzIzLTEuNUwyNS4zNyAxNy4yMjdjMS40NSAxLjI4LjQyMiAzLjY2Ny0xLjUwNCAzLjQ5MmwtNy40LS42NzJMMTIuNiAyNS4yQzExLjQ0NiAyNi43MzcgOSAyNS45MjIgOSAyNFY3LjIxNloiLz4KICA8L2c+CiAgPGRlZnM+CiAgICA8ZmlsdGVyIGlkPSJhIiB3aWR0aD0iMjcuMDU1IiBoZWlnaHQ9IjMwLjc5NiIgeD0iNCIgeT0iMi4yMSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgogICAgICA8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0iaGFyZEFscGhhIiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwIi8+CiAgICAgIDxmZU9mZnNldCBkeT0iMiIvPgogICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIi8+CiAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4xNiAwIi8+CiAgICAgIDxmZUJsZW5kIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvd180ODA5XzY2OSIvPgogICAgICA8ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDgwOV82NjkiIHJlc3VsdD0ic2hhcGUiLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KPC9zdmc+Cg==") 10 7, default;
   --wvk-cursor-pointer: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIKICAgICAgaWQ9Ind2ay1jdXJzb3Itc2hhZG93IgogICAgICBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiCiAgICAgIHg9Ii00IgogICAgICB5PSItNCIKICAgICAgd2lkdGg9IjQwIgogICAgICBoZWlnaHQ9IjQwIgogICAgICBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiCiAgICA+CiAgICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSIxLjI1IiBzdGREZXZpYXRpb249IjEiIGZsb29kLWNvbG9yPSIjMDAwMDAwIiBmbG9vZC1vcGFjaXR5PSIwLjM4IiAvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxnIGZpbHRlcj0idXJsKCN3dmstY3Vyc29yLXNoYWRvdykiPgogICAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xOC41IDMwSDEzYy01LjQ0IDAtOS4wODMtNC45NjQtMTEuNDEtMTQuMjcyQy42NTkgMTIuMDAzIDMuOTE3IDguOTEzIDcgOS42NVY2YTUgNSAwIDAgMSAxMCAwdjIuMWE0Ljk5IDQuOTkgMCAwIDEgMi4xMDUuOThBNSA1IDAgMCAxIDI0LjAwMSAxMWE1IDUgMCAwIDEgNSA1djRjMCAuMTktLjAxOS4zOC0uMDU0LjU2NUMyOC40MDkgMjUuODk3IDIzLjkwNyAzMCAxOC41IDMwWiIvPgogICAgPHBhdGggZmlsbD0iIzAwNTVGRiIgZD0iTTI1IDE5LjVWMTZhMSAxIDAgMSAwLTIgMCAxIDEgMCAxIDEtMiAwdi0yYTEgMSAwIDEgMC0yIDAgMSAxIDAgMSAxLTIgMCAzIDMgMCAwIDEgNS44OTUtLjc5QTMgMyAwIDAgMSAyNyAxNnY0YTEgMSAwIDAgMS0uMDMzLjI1NkE4LjUgOC41IDAgMCAxIDE4LjUgMjhIMTNjLTQuMjg0IDAtNy4zNy00LjM1Ny05LjQ3LTEyLjc1OC0uNjk4LTIuNzkyIDIuMzIxLTQuODA1IDQuMTc3LTIuOTVMOSAxMy41ODdWNmEzIDMgMCAxIDEgNiAwdjdhMSAxIDAgMSAxLTIgMFY2YTEgMSAwIDEgMC0yIDB2MTBhMSAxIDAgMCAxLTEuNzA3LjcwN2wtMy0zYy0uMzQ0LS4zNDQtMS4wNTMuMTI5LS44MjMgMS4wNUM3LjM3IDIyLjM1OCA5Ljk1IDI2IDEzIDI2aDUuNWE2LjUgNi41IDAgMCAwIDYuNS02LjVaTTE2IDEwYTMgMyAwIDAgMSAzIDN2MWExIDEgMCAxIDEtMiAwdi0xYTEgMSAwIDEgMC0yIDAgMSAxIDAgMSAxLTIgMCAzIDMgMCAwIDEgMy0zWm0tMSA3YTEgMSAwIDAgMSAxIDF2M2ExIDEgMCAxIDEtMiAwdi0zYTEgMSAwIDAgMSAxLTFabTQgMGExIDEgMCAwIDEgMSAxdjNhMSAxIDAgMSAxLTIgMHYtM2ExIDEgMCAwIDEgMS0xWiIvPgogIDwvZz4KPC9zdmc+Cg==") 12 8, pointer;
   --wvk-cursor-move: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIKICAgICAgaWQ9Ind2ay1jdXJzb3Itc2hhZG93IgogICAgICBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiCiAgICAgIHg9Ii00IgogICAgICB5PSItNCIKICAgICAgd2lkdGg9IjQwIgogICAgICBoZWlnaHQ9IjQwIgogICAgICBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiCiAgICA+CiAgICAgIDxmZURyb3BTaGFkb3cgZHg9IjAiIGR5PSIxLjI1IiBzdGREZXZpYXRpb249IjEiIGZsb29kLWNvbG9yPSIjMDAwMDAwIiBmbG9vZC1vcGFjaXR5PSIwLjM4IiAvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxnIGZpbHRlcj0idXJsKCN3dmstY3Vyc29yLXNoYWRvdykiPgogICAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Im0xNiAyLjAzIDE0LjE0MiAxNC4xNEwxNiAzMC4zMTQgMS44NTggMTYuMTcgMTYgMi4wM1oiLz4KICAgIDxwYXRoIGZpbGw9IiMwMDU1RkYiIGQ9Ik0xMCAxOC45NmEuNS41IDAgMCAxLS44MTMuMzlsLTMuNy0yLjk2YS41LjUgMCAwIDEgMC0uNzhsMy43LTIuOTZhLjUuNSAwIDAgMSAuODEzLjM5VjE1bDQuOTk5LS4wMDF2LTVoLTEuOTZhLjUuNSAwIDAgMS0uMzktLjgxMmwyLjk2LTMuN2EuNS41IDAgMCAxIC43ODEgMGwyLjk2IDMuN2EuNS41IDAgMCAxLS4zOS44MTJIMTdsLS4wMDEgNWg1di0xLjk2YS41LjUgMCAwIDEgLjgxMy0uMzlsMy43IDIuOTZhLjUuNSAwIDAgMSAwIC43OGwtMy43IDIuOTZhLjUuNSAwIDAgMS0uODEyLS4zOVYxN2gtNS4wMDF2NWgxLjk2YS41LjUgMCAwIDEgLjM5LjgxM2wtMi45NTkgMy43YS41LjUgMCAwIDEtLjc4IDBsLTIuOTYtMy43YS41LjUgMCAwIDEgLjM5LS44MTNIMTVsLS4wMDEtNWgtNXYxLjk2WiIvPgogIDwvZz4KPC9zdmc+Cg==") 16 16, move;
+  --wvk-cursor-grabbing: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNSIgaGVpZ2h0PSIzNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM1IDM2Ij4KICA8ZyBmaWx0ZXI9InVybCgjYSkiPgogICAgPHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0zMC4xNzYgMTguNjY3QzMwLjE3NiAyNC45MjYgMjUuMTAyIDMwIDE4Ljg0MyAzMGgtMy4xODhhMTAgMTAgMCAwIDEtOS4wOC01LjgxTDQuNjUgMjAuMDE4Yy0xLjY4NS0zLjY1LjA1Ni03LjgyNCAzLjU0LTkuMzQ1YTUgNSAwIDAgMSA4LjA5LTMuNTkxIDQuOTc3IDQuOTc3IDAgMCAxIDQgMSA0Ljk3NyA0Ljk3NyAwIDAgMSAzLjk3Ny45ODFBNC45IDQuOSAwIDAgMSAyNS4wNDQgOWE1LjEzNCA1LjEzNCAwIDAgMSA1LjEzMyA1LjEzNHY0LjUzM1oiLz4KICA8L2c+CiAgPHBhdGggZmlsbD0iIzAwNTVGRiIgZD0iTTEzLjE3NyA4YzEuMDYyIDAgMS45OTQuNTU0IDIuNTI3IDEuMzg4YTIuOTk2IDIuOTk2IDAgMCAxIDQgMSAyLjk5NyAyLjk5NyAwIDAgMSAzLjk3NC45NTdBMi44NSAyLjg1IDAgMCAxIDI1LjA0MyAxMWEzLjEzNCAzLjEzNCAwIDAgMSAzLjEzNCAzLjEzNHY0LjUzM0E5LjMzNCA5LjMzNCAwIDAgMSAxOC44NDQgMjhoLTMuMTg5YTggOCAwIDAgMS03LjI2NC00LjY0OEw2LjQ2NiAxOS4xOGMtMS4zODItMi45OTMuNDYtNi40OCAzLjcxLTcuMDI3VjExYTMgMyAwIDAgMSAzLTNabTAgMmExIDEgMCAwIDAtMSAxdjVhMSAxIDAgMCAxLTIgMHYtMS44YTMgMyAwIDAgMC0xLjg5NiA0LjE0bDEuOTI3IDQuMTc1QTYgNiAwIDAgMCAxNS42NTUgMjZoMy4xODlhNy4zMzQgNy4zMzQgMCAwIDAgNy4zMzMtNy4zMzN2LTQuNTMzYzAtLjYyNi0uNTA4LTEuMTM0LTEuMTM0LTEuMTM0YS44NjcuODY3IDAgMCAwLS44NjYuODY2VjE0YTEgMSAwIDAgMS0yIDB2LTFhMSAxIDAgMCAwLTEuOTk1LS4xMDJsLS4wMS4yMDRBMSAxIDAgMCAxIDE4LjE3NyAxM3YtMWExIDEgMCAwIDAtMS45OTUtLjEwMmwtLjAxLjIwNEExIDEgMCAwIDEgMTQuMTc3IDEydi0xYTEgMSAwIDAgMC0xLTFabTMgN2ExIDEgMCAwIDEgMSAxdjNhMSAxIDAgMCAxLTIgMHYtM2ExIDEgMCAwIDEgMS0xWm00IDBhMSAxIDAgMCAxIDEgMXYzYTEgMSAwIDAgMS0yIDB2LTNhMSAxIDAgMCAxIDEtMVoiLz4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9ImEiIHdpZHRoPSIzNC4xNzYiIGhlaWdodD0iMzIiIHg9IjAiIHk9IjQiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KICAgICAgPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9ImhhcmRBbHBoYSIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIvPgogICAgICA8ZmVPZmZzZXQgZHk9IjIiLz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIvPgogICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMTYgMCIvPgogICAgICA8ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDgxMF83MzAiLz4KICAgICAgPGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzQ4MTBfNzMwIiByZXN1bHQ9InNoYXBlIi8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+Cjwvc3ZnPgo=") 17 18, grabbing;
+  --wvk-cursor-text: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDMyIDM0Ij4KICA8ZyBmaWx0ZXI9InVybCgjYSkiPgogICAgPHBhdGggZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iLjgiIGQ9Ik0xNC41ODYgNGMuNDg4IDAgLjk2Ni4wOSAxLjQxNC4yNi40NDgtLjE3LjkyNi0uMjYgMS40MTQtLjI2SDIwYTMgMyAwIDEgMSAwIDZoLTF2MTJoMWEzIDMgMCAxIDEgMCA2aC0yLjU4NmMtLjQ4OCAwLS45NjYtLjA5LTEuNDE0LS4yNi0uNDQ4LjE3LS45MjYuMjYtMS40MTQuMjZIMTJhMyAzIDAgMSAxIDAtNmgxVjEwaC0xYTMgMyAwIDEgMSAwLTZoMi41ODZaIi8+CiAgPC9nPgogIDxwYXRoIHN0cm9rZT0iIzAwNTVGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0xMiA3aDIuMTcyYTIgMiAwIDAgMSAxLjQxNC41ODZMMTYgOG0wIDB2MTZtMC0xNiAuNDE0LS40MTRBMiAyIDAgMCAxIDE3LjgyOCA3SDIwbS00IDE3IC40MTQuNDE0YTIgMiAwIDAgMCAxLjQxNC41ODZIMjBtLTQtMS0uNDE0LjQxNGEyIDIgMCAwIDEtMS40MTQuNTg2SDEyIi8+CiAgPGRlZnM+CiAgICA8ZmlsdGVyIGlkPSJhIiB3aWR0aD0iMjIiIGhlaWdodD0iMzIiIHg9IjUiIHk9IjIiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KICAgICAgPGZlQ29sb3JNYXRyaXggaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9ImhhcmRBbHBoYSIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIvPgogICAgICA8ZmVPZmZzZXQgZHk9IjIiLz4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMiIvPgogICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMTYgMCIvPgogICAgICA8ZmVCbGVuZCBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNDgxMF82ODUiLz4KICAgICAgPGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzQ4MTBfNjg1IiByZXN1bHQ9InNoYXBlIi8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+Cjwvc3ZnPgo=") 16 17, text;
+}
+
+/*
+ * Cursor style variant — opt in to the slim-arrow default by adding
+ * `class="wvk-cursor-style-arrow"` on <html>. ThemeProvider's `cursorStyle`
+ * prop / setCursorStyle handle this for you; this rule is the underlying knob.
+ */
+html.wvk-cursor-style-arrow {
+  --wvk-cursor-default: var(--wvk-cursor-default-arrow);
 }
 
 /* ---- Dark theme ---- */
@@ -192,6 +220,14 @@
   --wvk-transparency-light-40: rgba(0, 85, 255, 0.4);
   --wvk-transparency-light-20: rgba(0, 85, 255, 0.2);
 
+  /* Deprecated alpha aliases — use --wvk-transparency-* instead. */
+  --wvk-alpha-dark-80: var(--wvk-transparency-dark-80);
+  --wvk-alpha-dark-40: var(--wvk-transparency-dark-40);
+  --wvk-alpha-dark-20: var(--wvk-transparency-dark-20);
+  --wvk-alpha-light-80: var(--wvk-transparency-light-80);
+  --wvk-alpha-light-40: var(--wvk-transparency-light-40);
+  --wvk-alpha-light-20: var(--wvk-transparency-light-20);
+
   /* Primitives stay the fixed palette for one-off use */
   /* (--wvk-primitive-* unchanged from :root) */
 
@@ -249,7 +285,7 @@
   input[type="number"],
   textarea,
   [contenteditable="true"] {
-    cursor: text;
+    cursor: var(--wvk-cursor-text);
   }
 
   /* Common interactive controls (class-based utilities still layered below) */
@@ -327,7 +363,11 @@
   }
 
   .cursor-grabbing {
-    cursor: var(--wvk-cursor-move);
+    cursor: var(--wvk-cursor-grabbing);
+  }
+
+  .cursor-text {
+    cursor: var(--wvk-cursor-text);
   }
 
   /* {@link LoadingSpinner} — clip-path ring + rotate (ring color = currentColor → --wvk-foreground-primary) */
@@ -390,3 +430,59 @@
     --wvk-loading-spinner-border: 5px;
   }
 }
+
+@layer components {
+  /*
+   * Inline code: subtle tonal chip that adapts to light/dark via the
+   * dark-transparency token (dark overlay on light bg, light overlay on blue bg).
+   */
+  .wvk-code {
+    display: inline;
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--radius-sm, 0.25rem);
+    background-color: var(--wvk-transparency-dark-20);
+    color: var(--wvk-foreground-primary);
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+      "Liberation Mono", monospace;
+    font-size: 0.875em;
+    line-height: 1.4;
+    white-space: break-spaces;
+    word-break: break-word;
+  }
+
+  /*
+   * Block code container: same tonal surface as inline, but with padding,
+   * a faint border, and pre-wrap behavior. Use on a <pre> or wrap a <code>.
+   */
+  .wvk-code-block {
+    display: block;
+    padding: 0.75rem 1rem;
+    border-radius: var(--radius-md, 0.375rem);
+    background-color: var(--wvk-transparency-dark-20);
+    border: 1px solid var(--wvk-transparency-dark-40);
+    color: var(--wvk-foreground-primary);
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+      "Liberation Mono", monospace;
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  .wvk-code-block code {
+    background: transparent;
+    padding: 0;
+    border-radius: 0;
+    font-size: inherit;
+    color: inherit;
+  }
+}
+
+/* Unlayered — wins over all @layer blocks including utilities */
+[data-wvk-input="shell"] {
+  cursor: var(--wvk-cursor-text);
+}
+
+[data-wvk-input="shell"]:has(:disabled) {
+  cursor: not-allowed;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madebywild/wvk",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Wireframe kit — components, icons, and design tokens",
   "license": "MIT",
   "repository": {
@@ -13,6 +13,9 @@
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "bin": {
+    "wvk": "./bin/wvk.mjs"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -31,6 +34,8 @@
   ],
   "files": [
     "dist",
+    "bin",
+    "AGENTS.md",
     "README.md"
   ],
   "peerDependencies": {
@@ -38,9 +43,10 @@
     "react-dom": "^19"
   },
   "dependencies": {
-    "@radix-ui/react-slot": "^1.2.4",
+    "@base-ui-components/react": "1.0.0-rc.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "12.38.0",
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
@@ -61,6 +67,7 @@
     "build": "tsup",
     "clean": "rm -rf dist",
     "dev": "node src/scripts/build-icons.mjs && tsup --watch",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "node --test 'test/**/*.test.mjs'"
   }
 }